Writing Clean Code in JavaScript Using Template Literals and String Interpolation|JavaScript for Beginners
This blog post is a detailed guide on JavaScript template literals and explains what are template literals and how it is used to perform string interpolation.
Introduction
In JavaScript,template literals and string interpolation concepts are quite popular, or shall i say I say, unpopular 🤔, with beginners struggling to learn this well-known language of the web, since it can get quite challenging and tricky if you don't understand this concept, thoroughly.
Template literals are used to perform string manipulations by enabling variables and multiple expressions to be embedded within the string itself, and this method of working with strings is called String Interpolation. Template literals are depicted by bacticks (`).
By using Template literals you can create strings with multiple lines that could include multiple JavaScript expressions, variables or code right within the string itself!
Using Template Literals for Variables
In the below example, the template literals characterised by the backticks perform the task of inserting the assigned value of name, that is “Meera Menon”, to the name variable , when the program runs the greet. You may take a look at the code snippet below. For my source code, here is the link.
Code
const name = "Meera Menon";
const greet = `My name is ${name}`;
console.log(greet);
//output : “My name is Meera Menon”Embedding Variables inside a String
In the below snippet, we provide an example using string interpolation using template literals. We created 3 variables, namely, publication and subscriber and message respectively. In the string, we include the multiple variables as well as the expression, that is, const message = `Hello, ${subscriber}! Welcome to the World of Coding at ${publication}`;We used string with double quotes in th first two variables namely, publication and subscriber respectively. We use backticks in order to perform string interpolation.Within the string enclosed between the backticks, we write the dollar sign ($)before the variable, subscriber that is enclosed in curly braces and same goes for the other variable, publication. In this interpolation, the variable within curly braces preceded by the dollar sign, $ , enables to execute the JavaScript program by replacing the variables, subscriber and publication respectively, with their real current values.The values for publication and subscriber were already assigned at the beginning of the code as shown below.The curly braces preceded by the dollar sign, act like placeholders for executing the program by inserting actual current values of the variables and remember to write the back ticks outside the strings as shown.You can see the complete code and output in console below.
For source code here is the link.
Code
const publication = "Meera Teaches Tech";
const subscriber = "Tom Craig"
const message = `Hello, ${subscriber}! Welcome to the World of Coding at ${publication}`;
console.log(message);
// output : "Hello, Tom Craig! Welcome to the World of Coding at Meera Teaches Tech"
Concantenation Strings Using Template literals and String Interpolation:
In my earlier article, I had mentioned about string concantenation using the (+) operator, but, in this example, we see how it is done using template literals and string interpolation as shown below. We worked with multiple variables and managed to concantenate the variables using template literals and string interpolation and using this method is much easier and cleaner as compared to the method using the (+) operator. You may refer to The source code for this snippet could be accessed here.
Code
const newsletter = "Meera Teaches Tech";
const topic = "Coding in HTML, CSS, JavaScript and Python";
const message = `My newsletter is ${newsletter} and I write on topic ${topic} Programming.`;
console.log(message);
//output: "My newsletter is Meera Teaches Tech and I write on topic Coding in HTML, CSS, JavaScript and Python Programming."
Ease of Using Multiple Lines of Strings
Using multiple lines in a string gets much easier with template literals since they support multiline strings. In JavaScript, in order to use multiple lines in a string, we need to use the escape character (\n) to create new lines. But, when we use template literals, we can just write the string with multiple lines, and there is no need to use the escape character in order to produce new lines. Let’s see that with an example code below. Also check the output in my source code in codepen.
Code
let text = `Hello World,
My name is Meera Menon,
My publication's name is Meera Teaches Tech,
I love to code,
I love to write on coding tutorials.`;
console.log(text);
//output : "Hello World,
My name is Meera Menon,
My publication's name is Meera Teaches Tech,
I love to code,
I love to write on coding tutorials."
In the above code, we did not use the escape character (\n) for creating new line, but just by writing the string inside the backticks, we are able to preserve the formatting of multiple lines as shown in the code result above.
Embedding JavaScript Expressions using Template Literals
Using Template literals, it is so convenient to embed expressions right inside the string, and this is self-explanatory with the following code example. In the below example, book, rating, highestRating and output are variables. A JavaScript expression is a statement with code that will evaluate to produce a value, it could be arithmetic expression or a string expression as shown below. For example the feedback of customer is evaluated in percent value by conducting the calculation with variables as shown below. In the expression, that is const feedback on the left hand side and the statement on the right side of the equal to sign or equation, is an example of expression in JavaScript that evaluates to the final calculated value.
const book = "Far From The Madding Crowd";
const rating = 9.5;
const highestRating = 10;
const feedback = `One of my favorite books is "${book}". I rated it ${
(rating / highestRating) * 100
}%.`;
console.log(feedback);
Conclusion
Template literals as discussed above are so useful when you want to work with multiline texts and JavaScript expressions in a string and also enables a convenient formatting of complex strings as observed above in the working examples. Traditional concantenation of multiple strings looks quite ugly with the plus(+) sign or the (+=) sign coming in between the different strings whereas, the modern way of concantenation of strings is so smooth and convenient by using the template literals while performing string interpolations. String Interpolations render working with strings much more clean and readable in contrast to that with traditional string concatenation.
Please comment below on your challenges faced while working with template literals and string interpolation? Have you tried doing string interpolation earlier?
More of JavaScript tips, tricks, concepts later!
More JavaScript to read :