JavaScript Template Literals

A template literal is a string written between backtick characters (the key next to the number 1 on many keyboards). Inside it you can place any JavaScript expression with ${ }, and it becomes part of the text. This is called interpolation.

1
2
3
4
5
6

const name = "Maya";
const items = 3;

console.log(`Hello, ${name}!`);              // → Hello, Maya!
console.log(`You have ${items} items.`);      // → You have 3 items.
console.log(`Total: ${items * 4.5} dollars`); // → Total: 13.5 dollars

Compare it with the old way of joining strings:

1

const message = "Hello, " + name + "! You have " + items + " items.";

Template literals are shorter and easier to read, and you do not have to worry about missing spaces.

Any expression works

1
2
3
4
5
6
7

const price = 19.99;
const qty = 2;
const inStock = true;

console.log(`Price: $${price.toFixed(2)}`);               // → Price: $19.99
console.log(`Stock: ${inStock ? "available" : "sold out"}`); // → Stock: available
console.log(`Sum: ${price * qty}`);                        // → Sum: 39.98

In $${price}, the first $ is just a dollar sign and ${price} is the interpolation.

Multi-line strings

A normal string cannot contain a real line break. A template literal can.

1
2
3
4
5
6

const html = `
<ul>
  <li>One</li>
  <li>Two</li>
</ul>`;
console.log(html);

This is handy for building pieces of HTML, though be careful when the values come from users, see textContent vs innerHTML.

Escaping

To write a backtick or ${ literally, put a backslash in front of it.

Tagged templates (a glimpse)

A function placed before a template literal receives its pieces. Libraries use this for styling and translation. You do not need it as a beginner, but now you recognise the syntax if you see ` tag… `.

1
2
3
4
5

function shout(strings, ...values) {
  return strings.reduce((out, s, i) => out + s + (values[i] ? values[i].toUpperCase() : ""), "");
}
const who = "maya";
console.log(shout`Hello ${who}!`); // → Hello MAYA!