Using Template Literals

Single quotes and double quotes are used interchangeably in JavaScript, and both can only contain string literals. To embed the value of a variable or a result of an expression into a string, we traditionally used + to concatenate. But that can get verbose and noisy, as in the following example.

Code with multiple +s often gets unwieldy, unpleasant, hard to maintain, and boring to write. This is where template literals come in.

Template Literals

Template literals are strings with embedded expressions. The expressions may be a single variable, multiple variables with operators, a function call, or combinations of them—any valid JavaScript expression.

In languages like Ruby and Groovy, single quotes are used for string literals and double quotes for template literals. Since JavaScript has used both single and double quotes for string literals, it’s too late to change the behavior or the semantics of either one. Thus, JavaScript has introduced a new syntax for template literals: the backtick.

Let’s convert the last line of the previous code to use a template literal instead of the multiple + operator.

The output of this line of code is the same as the last line of code from the previous code snippet:

Syntax of Template Literals

Within the pair of backticks, string literals appear as is. Expressions, on the other hand, appear within ${}. The curly braces {} surrounding the expressions in template literals are not optional. Without them, the expressions are treated as string literals. For example, let’s remove {} in the second expression of the previous line of code:

Here’s the result:

Don’t forget to embed the expressions with {} and also prefix with $.

You can use a backslash to embed a backtick within a template literal. For example, ‘“ will result in ‘. Single and double quotes may also appear within template literals, like so:

Template literals preserve the quotes, as we see from the following output:

The combination of ${ causes template literals to treat what follows as an expression. The appearance of one or the other of those two symbols alone will be treated as literals, like so:

The output shows that the first { and the first $ appear as is:

Template literals may include function calls as well, like so:

const, let, and Template Literals

In the examples so far, the variables used in template literals were declared as const. However, they may be declared using let as well, but use caution as this may lead to confusion. For example, try to determine the output of the following code without running it:

The expressions within template literals are evaluated when the template literal is evaluated. As a result, msg1 will contain the value 4. However, since the template literal within the arrow function will be evaluated later, only when the function is invoked, the value there will be zero. This is because the value has changed by the time that template literal is evaluated. We can see this from the output:

This is another reminder why we should honor immutability wherever possible—see ​Perils of Mutability​ and ​Prefer const over let​.

Nested Template Literals

Template literals may be nested as well. Here’s an example of nesting one template literal within another:

The top-level template literal relies on the nested template literal to create a string with an alternative embedded word “evening” or “night.” The output of this code is

Use your judgment to decide if after nesting template literals the code is readable or hard to understand. If it is the latter, then break the nested template literal into a separate regular function or an arrow function, like so:

If you decide to use nested literals, then inserting line breaks, as in the previous nested example, may help improve readability. That brings us to the next topic: multiline strings.