Template literals - String interpolation in Javascript (ES 6) with examples

Template literals are a new feature in ES6 which makes working with strings easy. In this section, we will look at template literals and how we can use them to interpolate strings. We will also look at an easy way of creating multiple line strings.

To use the template literals, we wrap the text in backtick (`) instead of the single or double-quotes. The backtick allows us to interpolate variables and expressions using the ${expression} symbol. For example,

Expression:

string = `Sum of 1 + 1 = ${1+1}`;

console.log(string); // Sum of 1 + 1 = 2

Variable:

let actor = "Mickey";
string = `Hello ${actor}`;

console.log(string); // Hello Mickey

Multi-line strings using template literals

Template literals make it easy to create multi-line strings. We know that \n is the newline character in Javascript. So, to create a string that contains a newline we will write the code something like this:

let message = "Hello, world! \n Good Morning";

console.log(message); 
// Hello, world! 
// Good Morning

Using template literal we can achieve the same result as follows:

let message = `Hello, world!
 Good Morning`;

console.log(message); 
// Hello, world!
// Good Morning

As you can see we now longer make use of the \n in template literals.

String interpolation

Let’s look at an example of string interpolation using the + operator.

let country1 = "Poland",
    country2 = "Portugal",
    country3 = "Spain",
    continent = "Europe";

console.log(country1 + ', ' + country2 + ' and ' + country3 + ' are in ' + continent);
// Poland, Portugal and Spain are in Europe

As you can see, the readability of the code is not that great. Let’s use the template literals to improve the readability of this code.

let country1 = "Poland",
    country2 = "Portugal",
    country3 = "Spain",
    continent = "Europe";

console.log(`${country1}, ${country2} and ${country3} are in ${continent}`);
// Poland, Portugal and Spain are in Europe

Templates literals are also helpful when you have single or double quotes in the string. There is no need for us to escape quotes. For example,

In ES 5, we would do something like this:

let message = "I don't know how to cook, please \"help me!\"";

console.log(message); // I don't know how to cook, please "help me!"

As you can see, here we need to escape the double quotes using the backslash(). But when using the template literals we can write the text as-is.

let message = `I don't know how to cook, please "help me!"`;

console.log(message); // I don't know how to cook, please "help me!"

Tagged templates

Tagged templates are an advanced form of template literals. In tagged templates, we can parse template literals with a function. This tag function contains the first argument as an array of strings and the rest of the arguments are dependent on the expressions used. For example,

let one = 1,
two = 2,
three = 3;

function func(strings, one, two, three) {
    console.log(strings[0]); // passing
    console.log(strings[1]); // ,
    console.log(strings[2]); // and
    console.log(one); // 1
    console.log(two); // 2
    console.log(three); // 3
}

func`passing ${one}, ${two} and ${three}`;

The tag function func parses the strings such that the string values passing, , and and are assigned to the first argument strings. In this statement, we also have three variables which are assigned to the rest of the arguments.

Multi-line strings using template literals#

String interpolation#

Tagged templates#

Multi-line strings using template literals

String interpolation

Tagged templates