Building Strings in JavaScript with Template Literals

Template literals, or template strings, are a relatively recent addition to the JavaScript language. They provide flexibility and convenience when generating multi-line strings, and strings that include variables or other expressions.

Template literals are enclosed in backticks rather than the single or double quotes of earlier versions of JavaScript. If you want to incorporate the value of a variable in a template literal, you proceed it with a dollar sign and enclose the variable name in curly braces as shown here:

let x = 2, y = 3;
console.log(`x equals ${x}, y equals ${y}`); 
// x equals 2, y equals 3

Earlier JavaScript would use the following approach to achieve the same result:

console.log('x equals ' + x + ', y equals ' + y);

As you can see, with template literals the code is much more concise and readable.

Template literals can also use the dollar-sign/curly-brace syntax to incorporate other types of expressions as well, for example arithmetic expressions:

console.log(`2 times 3 equals ${2*3}`);
// 2 times 3 equals 6

The following demonstrates with a function call:

function prod(x, y) {
    return x * y;
}

console.log(`4 times 2 equals ${prod(4, 2)}`);
// 4 times 2 equals 8

Single and Double Quotes in Template Literals

You can include both single and double quotes within a template literal with no need to proceed them with a backslash.

let str = `"I'm not giving up!" she said.`;

In earlier JavaScript, if you wanted to include an apostrophe or single quote in a single-quoted string, you would need to escape it, i.e., precede it with a backslash.[1]

console.log( '"I\'m not giving up!" she said.' );

You would also need to escape double quotes within double-quoted strings.

Long Strings and Line Breaks

If you insert a carriage return in a string enclosed in single or double quotes, a JavaScript error will be triggered:

var str = 'This is an example JavaScript string 
    with a line break.';
// SyntaxError: unterminated string literal

You can use the plus sign to concatenate a series of strings across multiple lines, as we demonstrate here:

var str = 'This is an example JavaScript string ' +
    'with a line break.';
console.log( str );
// This is an example JavaScript string with a line break.

ECMAScript 5 introduced the backslash character (\) as another way to break a long string:

var str = 'This is an example JavaScript string \
    with a line break';
console.log( str );
// This is an example JavaScript string     with a line break.

Notice that with this approach the extra spaces used to indent the second line are retained, as shown in the output of console.log.

When enclosing a string in backticks, there is no need to add extra syntax to accommodate carriage returns:

let html = `\
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>`;
console.log(html);
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

When a carriage return is included in a template literal, that line break is part of the output, as is any indenting. However, template literals can use a backslash at the end of a line to exclude that carriage return from the output as shown above.

A string enclosed in single or double quotes would need to use the \n escape sequence to incorporate line breaks in the output:

let str = "line one\nline two\nline three";
console.log(str);
line one
line two
line three

Back to top


  1. See the complete list of escape sequences JavaScript supports at MDN. ^