JavaScript - Tempate Literals

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 don’t 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 haven’t used the escape characters to add a single quote in the string.

<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.

<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.

<html>
<body>
   <div id = "output1"> </div>
   <div id = "output2"> </div>
   <script>
      function func() {
         return 10;
      }
       
      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.

<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.

<html>
<body>
   <div id = "output"> </div>
   <script>
      function func() {
         return 10;
      }
      
      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

Print Page