Template literals: strings that breathe

Old strings vs template literals

Pre-2015 JavaScript only had "double" and 'single' quotes:

const name = "Anna";
const greeting = "Hello, " + name + "!";

Modern JavaScript adds backtick strings:

const name = "Anna";
const greeting = \`Hello, ${name}!\`;

Backticks let you:

1. Embed expressions with ${ ... }. Any JavaScript expression works inside.
2. Span multiple lines without escapes — no \n glue.
3. Mix quote types freely inside without escaping.

When to use which

• "double" for strings without interpolation. Quickest to type, least friction.
• \backtick\ when you need interpolation or multiple lines.
• 'single' is a style choice — pick one and stay consistent within a file. ESLint can enforce it.

Common newbie trap

You CAN put any expression inside ${ } — math, function calls, conditionals. That doesn't mean you should:

// readable
const total = items.reduce((s, i) => s + i.price, 0);
const msg = \`Total: $${total}\`;

// hard to read
const msg = \`Total: $${items.reduce((s, i) => s + i.price, 0)}\`;

Split heavy work onto its own line. Template literals are for *gluing* values, not *computing* them.