Template Literals: Stop Gluing Strings With +

If you're writing "Hello, " + name + "! You have " + count + " items.", stop. Template literals do the same thing in a way you can actually read: backticks for the string, ${} for the values.

The basics

const name = "Ana";
const count = 3;

console.log("Hello, " + name + "! You have " + count + " items.");
console.log(`Hello, ${name}! You have ${count} items.`);

Hello, Ana! You have 3 items.
Hello, Ana! You have 3 items.

Same output. The second one reads like the sentence it produces, and you can't forget a space next to a +, which is the most common bug with gluing.

The backtick key is usually top-left on the keyboard, under Esc. It's not the single quote.

Expressions inside ${}

Anything that gives a value works inside ${}: a calculation, a function call, a ternary.

const price = 95;
const qty = 2;
const stock = 0;

console.log(`Total: ${price * qty}`);
console.log(`Status: ${stock > 0 ? "In stock" : "Sold out"}`);
console.log(`Item: ${"coffee".toUpperCase()}`);

Total: 190
Status: Sold out
Item: COFFEE

Keep it short. If the expression is longer than a few words, compute it on its own line with a good name and put the name in ${}. The template is for showing values, not for doing the work.

Multi-line strings

Template literals keep line breaks as typed:

const receipt = `Order #1042
Coffee x2
Total: 190`;
console.log(receipt);

Order #1042
Coffee x2
Total: 190

No \n needed. The catch: indentation is kept too. If you indent the lines to match your code, the spaces end up in the string.

Formatting numbers for people

${} turns a number into text as-is. That's often not what a person should see:

const total = 1234.5;
console.log(`Total: ${total}`);
console.log(`Total: ${total.toFixed(2)}`);
console.log(`Total: ₱${total.toLocaleString("en-PH", { minimumFractionDigits: 2 })}`);

Total: 1234.5
Total: 1234.50
Total: ₱1,234.50

toFixed(2) gives two decimals. toLocaleString adds thousands separators the way your audience expects. For proper currency, Intl.NumberFormat does the symbol too:

const peso = new Intl.NumberFormat("en-PH", { style: "currency", currency: "PHP" });
console.log(`Total: ${peso.format(1234.5)}`);

Total: ₱1,234.50

Templates and HTML

It's tempting to build HTML with template literals and put it on the page with innerHTML:

list.innerHTML = `<li>${item.name}</li>`;

const li = document.createElement("li");
li.textContent = item.name;
list.append(li);

Building HTML with templates is fine for text you wrote yourself. The moment outside data goes into it, switch to textContent.

Common mistakes

• Using quotes instead of backticks: "Hello ${name}" prints the ${name} literally. No error.
• Showing raw floats: ${0.1 + 0.2} shows 0.30000000000000004. Format it.
• Putting user data into HTML strings.

Find one string in your code built with three or more +. How does it look as a template literal, and did you find a missing space while converting it?