Template literals

Picture a letter form where the text is already printed and blanks are left for a name and an amount: "Hello, ___! Amount due: ___." The text is written once, and only the inserts change.

You can also build a string from text and variable values with +. But the more parts there are, the more quotes and pluses you need, and the more often a space between words gets lost. Compare two ways to write the same phrase:

const name = "Ann";
const age = 30;

console.log("Hi, " + name + ". You are " + age + ".");
console.log(`Hi, ${name}. You are ${age}.`);
// Hi, Ann. You are 30.
// Hi, Ann. You are 30.

Both console.log calls print the same thing. In the second call the text is written in backticks — it is a template literal. It is the form: you write its text in one piece and put the values right where they belong.

On most keyboards the backtick is on the key to the left of 1, in the English layout.

In this course a string with no inserted values is still written in double quotes. Backticks are used when values go into the text.

Interpolation ${}

The ${…} form inside a template literal is called interpolation. When JavaScript meets it, it takes three steps:

1. It evaluates the expression in the braces.
2. It turns the result into a string.
3. It inserts that string into the text in place of ${…}.

The expression can be anything:

• a variable name;
• arithmetic;
• a comparison;
• a function call.

One string can hold any number of interpolations. Let's look at three of them:

const price = 5;
const count = 3;
console.log(`Total: ${price * count}`); // Total: 15
console.log(`Many: ${count > 2}`); // Many: true
console.log(`Upper: ${name.toUpperCase()}`); // Upper: ANN

1. ${price * count} first multiplies 5 by 3, and 15 goes into the text.
2. ${count > 2} inserts the result of the comparison, true.
3. ${name.toUpperCase()} calls a method on the string "Ann" from the first example, and ANN goes into the text.

Here the form analogy stops working. A blank on a form takes ready text, while ${} holds an expression, and JavaScript evaluates it first.

What value goes into the text

A value becomes a string the same way as through String:

• the number 15 gives "15";
• true gives "true";
• a declared variable that holds no value is inserted as the word undefined;
• null is inserted as the word null.

The result of a template literal is an ordinary string of type string.

A $ sign with no brace after it is a plain character: `Price: $5` prints Price: $5. Double and single quotes inside backticks stay plain characters too, so `Say "hi"` is a valid string.

Several lines

A template literal can span several lines of code. The line break stays in the text, and console.log prints it as a line break:

const lines = `first
second`;
console.log(lines);
// first
// second

Indentation and spaces at the start of the second line also go into the text. So the continuation starts at the beginning of the code line.

In double or single quotes, a line break in the middle of a string is a syntax error. Node.js and Chrome call it SyntaxError: Invalid or unexpected token.

Junior interviews often ask how backticks differ from ordinary quotes. The answer has three parts:

• interpolation ${} works inside backticks;
• a line break can be written right in the text;
• the result is the same string of type string.

Common mistake

The interpolation is written in ordinary double quotes:

const user = "Ann";
console.log("Hello, ${user}"); // ✗

There is no error: the program prints Hello, ${user}. The $, { and } signs stay in the text as they are. Interpolation works only between backticks; in double and single quotes ${ is plain characters. Change the quotes: `Hello, ${user}` prints Hello, Ann.

Key points

• A template literal is written in backticks, and ${expression} inserts the expression's value into the text.
• An interpolated value becomes a string as through String, and the result is an ordinary string.
• A line break inside backticks goes into the text; in ordinary quotes it is a syntax error.
• In double and single quotes, ${…} stays plain characters.