Javascript: What Are Template Literals?

ES6 introduced two types of literals: Template Literals and Tagged Template Literals to tag Template Literals. In this post, we cover both of them in depth!

In ES6, two types of literals were introduced:

  1. Template Literals for string concatenation and expression embedding in a string
  2. Tagged Template Literals to tag the Template Literal in a function so the literal can be evaluated in the function

Template Literals

Let’s assume that you need to do the string concatenation with a dynamic expression or with the value of a variable. Take a look at the following code:

Here, you see you’ll need to embed the value of variable foo in a string literal. In ES6, you can do this using Template Literals, as shown in the code listing above. Template Literals are mainly used for the following purposes:

  • String concatenation
  • Creating multi-line strings
  • Embedding expressions
  • Using string interpolation

In the code above, we are embedding the expression foo in the string result. To use Template Literals:

  1. Template Literals are created inside back-tick (`) characters.
  2. In Template Literals, placeholders are created using the ${expression} symbol. At runtime, the expression will be evaluated and replaced in the placeholders.
  3. In template Literals, the expression can be embedded using ${expression}. This is also called an expression interpolation.

Using Template Literals, let us create some expression interpolation. Consider the following code:

To create expression interpolation here, we are using the Template Literal. You’ll also notice the string is broken into multiple lines. If required, you can create a nested template also.

Tagged Template Literals

ES6 allows you to tag template literals, meaning you can parse that inside a function. So, if you use Tagged Template Literals, JavaScript will not immediately assign them to a variable, and rather parse them in a function. Let’s see an example:

Now let’s assume that in the sayHello function, you want to pass a template literal, perform some manipulation, and return a result. To do that, you can tag the template literal to function as shown below:

Here, you have tagged the template literal to the function sayHello. In Tagged Template Literals, the function gets the following parameters:

  1. The first parameter is a string array
  2. The second parameter onwards are interpolated values

Let’s modify the sayHello function to work with these parameters. Consider the code below:

As you can see, all strings of the Template Literal will be passed as the first parameter of the function. In the other two parameters (name and country), interpolated values will be passed. So, the name will contain foo and the country will contain India. Now, let’s see the code below:

In the above code snippet, we are checking the value of the interpolated parameter country and then creating a new string and returning that. You will get the expected output, however, there is one problem with the above approach: you are mapping all interpolated parameters in named parameters. This could cause problems for the dynamic number of interpolated parameters. This can be solved using JavaScript REST Parameters. So we should rewrite the above code as it appears below:

As you see, you can combine Rest Parameters and Tagged Template Literals for better use cases.

Conclusion

ES6 introduced two types of literals: Template Literals for string concatenation and embedding expressions in a string and Tagged Template Literals to tag Template Literals in a function so the literal can be evaluated in the function. And in this post, we covered both of them in-depth!

 

Arif Khoja
Arif Khoja is a Developer. He is a Javascript Enthusiatic who loves logical programming and has first hand experience in building a cutting edge internet product using Angular. He is also an open source freak and keen about learning and sharing. He writes Javascript both frontend and backend. He loves learning and sharing tech all the time. He also has a hands on experience in SEO and writes articles about latest emerging technologies.
Arif Khoja on FacebookArif Khoja on GoogleArif Khoja on InstagramArif Khoja on LinkedinArif Khoja on Twitter

Leave a Reply

Top
%d bloggers like this: