In JavaScript, the string interpolation concept allows adding variables or expressions to a string. The interpolation can be carried out on strings that are created using the template literal. The purpose of string interpolation is to add various variables or expressions inside a string in an error-free manner.
The phenomenon looks like a concatenation but differs in application and advantages. Keeping the importance of interpolation, this guide serves the following learning outcomes.
Why string interpolation?
You might be thinking that string concatenation can be used to do the task that string interpolation does, so why is the interpolation carried out?
The usual string concatenation allows you to add variables/expressions to a string. To do so, you have to add/remove the quotation marks frequently as shown in the following image.
As the above image shows, there is a complex expression that is being carried out to use multiple variables which may result in committing a mistake. To avoid such a scenario, the interpolation of the string is quite useful in such a situation.
How to do a string interpolation in JavaScript
Before getting into the examples, let’s understand how string interpolation is carried out in JavaScript. There are multiple ways to create a string in JavaScript either by using the single/double quotes or creating a template literal (by using the backquote(`) ). The interpolation can be carried out on strings that are created using the backquote(`).
The following syntax refers to the string interpolation.
The ${expression} indicates that the value of the expression/variable would be embedded into this string.
Let’s practice a few examples to better understand the string interpolation concept.
Example 1
The following code makes use of string interpolation to embed multiple variables in a string.
var post= "author"
var str = `the name of ${post} is ${name} and is ${age} years old`
console.log(str);
In the above code, two strings and one integer variable are created. These variables are used in the string named “str” by using the interpolation concept. Lastly, the interpolated string is printed on the console.
Output
The output shows that the values of variables “age”, “name”, and “post” are successfully embedded into the string “str” by using the string interpolation.
Example 2
This example checks whether a string interpolation works on strings with single/double quotes.
console.log("the name of ${post} is ${name}");
console.log('the name of ${post} is ${name}');
The above code tries to use the interpolation concept on a single/double quote’s strings.
Output
The output shows that the string that exercised the interpolation phenomenon is printed as it is. The value of the variables is not fetched because the single/double quotes print them as they were used.
Conclusion
The string interpolation allows adding the values of variables/expressions in a string. The interpolation is quite helpful and easy to execute as compared to the concatenation concept. This post provides a detailed guide on string interpolation in JavaScript. For a brief guide, we have demonstrated a set of examples that illustrate how expressions can be embedded in strings. Lastly, it is concluded that the template literals can embed the expressions inside them whereas the single/double quotes have to exercise concatenation to carry out the same task.
