JavaScript Tempate Literals
In JavaScript, the template literals are introduced in ES6 to customize the string dynamically. The template literals allow you to add variables or expressions into the string, and the string changes according to the variables and expression value changes.
There are multiple synonyms words used for the template literal words. For example, template string, string templates, back-tics syntax, etc.
Syntax
Follow the syntax below to use the template literals in JavaScript.
let str =`Hi ${name}`;You need to write a string between back-tics (“). For using the dynamic variable or expression with a string, you need to place it between the ${}.
Furthermore, using the template literals, you dont need escape characters to add single or double quotes in the string.
Examples
Example: Creating Strings with Template Literals
In the example below, we used the template literals to create a string with special characters.
The str1 string is the same as the regular string we create using single or double quotes. The str2 string contains the single quotes with the string. Here, you can see that we havent used the escape characters to add a single quote in the string.
Open Compiler
<html><body><div id ="output1"></div><div id ="output2"></div><script>let str1 =`Hello Users!`;let str2 =`'Tutorialspoint' is a good website`;
document.getElementById("output1").innerHTML = str1;
document.getElementById("output2").innerHTML = str2;</script></body></html>Output
Hello Users!
'Tutorialspoint' is a good website
Example: Variables with Template Literals
The below code demonstrates to use the dynamic values in the string by passing the variables into the template literal string.
Here, we have defined the variables related to cars. After that, we create a string using the template literals and add the variables.
In the output, you can see that variables are replaced with their value in the string.
Open Compiler
<html><body><p id ="output"></p><script>let car ="BMW";let model ="X5";const price =5000000;const carStr =`The price of the ${car} ${model} is ${price}.`;
document.getElementById("output").innerHTML = carStr;</script></body></html>Output
The price of the BMW X5 is 5000000.
Example: Expressions with Template Literals
You can also add the expressions to the string using the template literals.
In the str1 string, we added the expression to perform the summation of two numbers in the template literals string.
In str2, we invoke the function invocation as an expression. It replaces the expression with a returned value from the function.
Open Compiler
<html><body><div id ="output1"></div><div id ="output2"></div><script>functionfunc(){return10;}const str1 =`The sum of 2 and 3 is ${2 + 3}.`;const str2 =`The return value from the function is ${func()}`;
document.getElementById("output1").innerHTML = str1;
document.getElementById("output2").innerHTML = str2;</script></body></html>Output
The sum of 2 and 3 is 5.
The return value from the function is 10
JavaScript Nested Template Literals
JavaScript allows you to use the template literals inside other template literals, and it is called the nested template literals.
Example
In the example below, we added the expression in the outer template literal. The expression contains the ternary operator. It checks whether the 2 is less than 3. Based on the returned boolean value, it executes the first or second nested expression and prints the result.
Open Compiler
<html><head><title>Nested Template Literals</title></head><body><p id ="output"></p><script>const nested =`The subtraction result is: ${2 < 3 ? `${3 - 2}` : `${2 - 3}`}`;
document.getElementById("output").innerHTML = nested;</script></body></html>Output
The subtraction result is: 1
Example: Multiline String Using Template Literal
You can also use the template literals to define the multiline string.
Open Compiler
<html><body><div id ="output"></div><script>functionfunc(){return10;}const str1 =`The sum of 2 and 3 is ${2 + 3}. <br>
The return value from the function is ${func()}`;
document.getElementById("output").innerHTML = str1;</script></body></html>Output
The sum of 2 and 3 is 5.
The return value from the function is 10
Leave a Reply