JavaScript String Templates

Strings written with backticks ` instead of quotes have superpowers: you can drop variables and expressions straight into the text, and they can span multiple lines. They go by several names (template strings, template literals, string templates), all meaning the same thing. Added in ES6 (2015), they are now the standard way to build any string that includes values.

// Backtick Syntax

let text = `Hello World!`;

On its own, that is just a normal string. The difference shows up in three places: quotes, line breaks, and ${ }.

// Quotes Inside Templates

Because the string is wrapped in backticks, single and double quotes inside it need no escaping at all:

let text = `He's often called "Johnny"`;
console.log(text);

Only a backtick inside a template needs escaping: `Use the \` key`.

// Multi-Line Strings

With quotes, you need \n for a line break, and pressing Enter mid-string is an error. With backticks, just press Enter:

let text = `The quick
brown fox
jumps over
the lazy dog`;
console.log(text);

// Interpolation: ${ }

This is the big one. Inside a template string, ${ } is a slot: JavaScript works out whatever is inside it and drops the result into the text. This is called interpolation.

let firstName = "John";
let lastName  = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
console.log(text);

Compare the same sentence built with +. The template version reads like the final sentence, with no juggling of quotes, spaces, and plus signs:

let name  = "Sam";
let score = 42;

let msg1 = "Player " + name + " scored " + score + " points.";
let msg2 = `Player ${name} scored ${score} points.`;

console.log(msg1);
console.log(msg2);

// Expression Substitution

You are not limited to variable names. Any expression works inside ${ }: math, method calls, even a ternary.

let price = 10;
let VAT   = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
console.log(total);

let qty = 3;
console.log(`${qty} item${qty === 1 ? "" : "s"}`);
console.log(`Shouting: ${"hello".toUpperCase()}`);

(toUpperCase() is a string method from the next lesson.) Remember the plural trick from the Ternary lesson, which needed extra parentheses when built with +? Inside ${ } the ternary is already neatly boxed off, so the precedence trap cannot happen.

// HTML Templates

Template strings are ideal for building chunks of HTML from data. Combined with a loop, they can turn a list into a web page list:

let header = "Template Strings";
let tags = ["template strings", "javascript", "es6"];

let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}
html += `</ul>`;

console.log(html);

Put that string into a page element with innerHTML (shown in Function Invocation) and the browser shows a heading and a bulleted list. Add a fourth tag to the array and the list grows automatically.

// Quick Check

let pet = "Rex";
console.log("Good dog, ${pet}!");

// Try It

▶ Open Playground

1. Click Open Playground. Rewrite the log as a template string and check it prints the same thing
2. Print a receipt line showing an item, a quantity, and a total, using ${ } with math and $${ } for the price
3. Use a ternary inside ${ } to print "1 message" or "5 messages"
4. Build an HTML list from an array of three of your favorite songs using a loop and +=, then log it