Template literals (or Template strings) in JavaScript are multi-line string literals that allow string interpolation. String interpolation allows us to include embedded expressions as part of the string . You can create multi-line strings, basic string formatting & tagged templates with Template strings. They are part of the ES2016/ES6 specification. Template strings are also called template literals. In this tutorial, we will learn about Template strings (or Literal) how to use it in Multiline Strings & string interpolation. We will also learn how to nest expressions and how to escape template literals using the backslash (\)
Template literals are literals delimited with backticks ` instead of single quote or double quotes.
The following is a example of template string.
`Hello & Welcome to Tutorial on Template Strings`
What makes them powerful is you can include a embedded expression within them. We must include the expression inside a dollar sign and curly braces (${expression}) .
In the following example ${name} is an expression. The JavaScript evaluates it and replaces its value in the its original position.
`Hello ${name}, Welcome to tutorial on Template string`
Let us now explore the some of the use cases for the Template Strings
The following is an example of creating a multiline string. Just hit enter and continue in the next line. The \n character automatically gets inserted in the string.
Example
let sentence= `Javascript is the scripting language,
that we use to make web pages interactive.
It is written in plain text on the HTML page and runs in the browser`
console.log(sentence);
//**** output ****
//Javascript is the scripting language,
//that we use to make web pages interactive.
//It is written in plain text on the HTML page and runs in the browser
The multiline strings without template strings are created by inserting a \n newline character (LF).
let sentence= "Javascript is the scripting language,\n" +
"that we use to make web pages interactive.\n" +
"It is written in plain text on the HTML page and runs in the browser"
console.log(sentence);
//***output****
//Javascript is the scripting language,
//that we use to make web pages interactive.
//It is written in plain text on the HTML page and runs in the browser
As we said earlier, the /n (LF) character is inserted when you use the template strings. Hence the following code is true.
const str = `Line1
Line2`;
console.log(str);
console.log(str === 'Line1\nLine2'); // true
//***output***
//Line1
//Line2
//true
string interpolation (expression Interpolation) is the process of evaluating a string literal containing one or more expressions. It evaluates the expression and coerces the result into a string. The result is then is replaced in the original string.
Example
In the following example, $(playerName) is the expression. It is evaluated first and the resulting value Sachin Tendulkar is replaced at its place in the final string.
let playerName = "Sachin Tendulkar";
console.log(`${playerName} is the greatest cricketer of all time`)
//**** Output ****
//Sachin Tendulkar is the greatest cricketer of all time
const firstName = 'Students';
const topic ="Template Literals"
console.log(`Hello ${firstName}!
Welcome to the ${topic} tutorial`);
//*** output ****
//Hello Students!
//Welcome to the Template Literals tutorial
The following example shows that you can use any expressions inside the template string. It uses the arithmetic expression ${a+b}
let a=1;
let b=2;
console.log(`The addition of ${a} + ${b} is ${a+b}`);
//***output ****
//The addition of 1 + 2 is 3
The following example uses the ternary conditional operator(?) in the template string.
let m=11;
console.log(`The m is ${(m==10) ?'ten':'not ten'}`);
//*** output ****
//The m is not ten
const MAX = 100;
function doSomeWork(x) {
if (x > MAX) {
throw new Error(`At most ${MAX} allowed: ${x}!`);
}
}
doSomeWork(200)
You can nest expressions
let x=10
let y=20
let varxy=`${x+y}` //template string
console.log(`The addion of ${x} + ${y} is ${varxy}`); //tempate string nested
//*** output ****
//The addion of 10 + 20 is 30
The following example uses the ternary conditional operator(?) in the template string.
let m=11;
console.log(`The m is ${(m==10) ?'ten':'not ten'}`);
//*** output ****
//The m is not ten
const MAX = 100;
function doSomeWork(x) {
if (x > MAX) {
throw new Error(`At most ${MAX} allowed: ${x}!`);
}
}
doSomeWork(200)
Another use of the Template string is in Tagged Templates. We tag a Template string to a function. This allows us to customize the parsing of the template string using the tagged function.
