Template Literals in JavaScript

Old way, new way

The old way glues pieces together with +. The new way uses backticks, the little slanted quote mark (on many keyboards it sits left of the 1 key). Inside the backticks, you put a value in a dollar sign and curly braces, ${ }.

const name = "Bitsy";
const oldWay = "Hi, " + name + "!";
const newWay = `Hi, ${name}!`;
console.log(oldWay); // prints: Hi, Bitsy!
console.log(newWay); // prints: Hi, Bitsy!

Same result, easier to read. The backticks open and close the string just like normal quotes do. The ${ and } mark the blank, and whatever value is inside goes into the string at that spot. With plus signs you have to keep track of quotes, spaces and pluses. With backticks, the code looks like the sentence you'll get. Here is the classic slip the old way invites:

const pet = "cat";
console.log("I have a" + pet); // prints: I have acat
console.log(`I have a ${pet}`); // prints: I have a cat

Strings over many lines

Template literals can also go over many lines. With normal quotes you need \n, the code for a new line. Inside backticks you just press Enter.

const msg = `Dear Bob,
Thanks for the toys!
Love, Bitsy`;
console.log(msg.split("\n")); // prints: [ 'Dear Bob,', 'Thanks for the toys!', 'Love, Bitsy' ]

Splitting on new lines shows the string really has three lines. Printing msg itself would show the letter over three lines, just as you typed it. This is great for messages, emails and HTML, where a long string full of + and \n pieces gets hard to read very quickly. Watch your indentation, though. Any spaces at the start of those lines become part of the string.

The twist: code inside ${ }

You can put anything that makes a value inside the curly braces. Variables, math and even function calls all work.

console.log(`${2 + 3} toys`); // prints: 5 toys
console.log(`${"Bitsy".toUpperCase()}`); // prints: BITSY
const price = 3;
console.log(`Total: ${price * 4} coins`); // prints: Total: 12 coins

Keep the part inside ${ } short. If it starts to get long, work the value out in its own variable first and drop that variable into the blank.

When to use which quotes

Use backticks when a string has values in it or runs over several lines. For plain text with nothing inside, normal quotes work just as well. Many teams only use backticks when they need them, so seeing backticks tells the reader there's a value in there.

Backticks have one more small perk. Both kinds of normal quote can sit inside them without any escaping.

const toy = "robot";
console.log(`Bitsy said "it's my ${toy}"`); // prints: Bitsy said "it's my robot"

Whatever lands in the blank is turned into text first. Numbers and strings look the way you expect. An array gets its items joined with commas, and a plain object turns into [object Object], which is almost never what you want.

const snacks = ["apple", "cookie"];
console.log(`Snacks: ${snacks}`); // prints: Snacks: apple,cookie
console.log(`Snacks: ${snacks.join(" and ")}`); // prints: Snacks: apple and cookie

Rule of thumb