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 (\)
Table of Contents
What is Template Strings
Template literals are literals delimited with backticks ` instead of single quote or double quotes.
The following is a example of template string.
1 2 3 | `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.
1 2 3 | `Hello ${name}, Welcome to tutorial on Template string` |
Let us now explore the some of the use cases for the Template Strings
Multiline 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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.
1 2 3 4 5 6 7 8 9 10 11 | const str = `Line1 Line2`; console.log(str); console.log(str === 'Line1\nLine2'); // true //***output*** //Line1 //Line2 //true |
String Interpolation
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, ${palyerName} is the expression. It is evaluated first and the resulting value Sachin Tendulkar is replaced at its place in the final string.
1 2 3 4 5 6 7 8 9 | let playerName = "Sachin Tendulkar"; console.log(`${playerName} is the greatest cricketer of all time`) //**** Output **** //Sachin Tendulkar is the greatest cricketer of all time |
Multiple Expressions
1 2 3 4 5 6 7 8 9 10 11 12 | 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 |
Using Expressions
The following example shows that you can use any expressions inside the template string. It uses the arithmetic expression ${a+b}
1 2 3 4 5 6 7 8 9 | 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.
1 2 3 4 5 6 7 8 | let m=11; console.log(`The m is ${(m==10) ?'ten':'not ten'}`); //*** output **** //The m is not ten |
1 2 3 4 5 6 7 8 9 10 11 | const MAX = 100; function doSomeWork(x) { if (x > MAX) { throw new Error(`At most ${MAX} allowed: ${x}!`); } } doSomeWork(200) |
Nesting Expressions
You can nest expressions
1 2 3 4 5 6 7 8 9 10 | 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 |
Escaping in template strings
The backslash \ is used for escaping inside template literals. It enables you to include backticks and ${ inside template literals:
1 2 3 4 5 6 7 8 9 10 11 | console.log(```) //output ` console.log(`$`) //output $ this is ok console.log(`${`) //Error console.log(`\${`) //output ${ console.log(`\$\{\}`) //output ${} |
Tagged Templates
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.
Reference
Read More
