Template Literals

JavaScript · Reference cheat sheet

📋 Overview

Template literals use backticks ` for strings with interpolation $\{expr\}, multi-line text, and tagged templates. They replace most string concatenation and enable DSLs (e.g. sanitizers, CSS-in-JS) via tag functions.

🔧 Core concepts

• Interpolate: `Hello $\{name\}` — any expression inside $\{\}.
• Multi-line: newlines are preserved as written.
• Escape: \``, $, \` as needed.
• Tagged: tag\...`callstag(strings, ...values)`.
• Raw: String.raw\C:\path\file`` — backslashes mostly literal.
• Nested: templates can nest inside $\{\}.

const name = "Ada";
const msg = `Hello, ${name}!`;
const block = `line1
line2`;

💡 Examples

const a = 3,
  b = 4;
`sum=${a + b}`; // "sum=7"

// Expressions
`User: ${user?.name ?? "guest"}`;
`Items: ${items.map((i) => i.id).join(", ")}`;

// HTML snippet (sanitize user input!)
const html = `<li class="item">${escapeHtml(text)}</li>`;

// Tagged template
function highlight(strings, ...values) {
  return strings.reduce(
    (out, str, i) => out + str + (values[i] != null ? `<b>${values[i]}</b>` : ""),
    "",
  );
}
highlight`Hello ${"world"}`; // "Hello <b>world</b>"

// String.raw
String.raw`\n`; // "\\n" (two chars: \ and n)

// Nested
const rows = people.map((p) => `<tr><td>${p.name}</td></tr>`).join("");
const table = `<table>${rows}</table>`;

// Dynamic property in message
const key = "count";
`Total ${key}=${data[key]}`;

⚠️ Pitfalls

• Interpolating untrusted HTML/SQL causes XSS/injection — escape or use safe APIs.
• $\{obj\} becomes obj.toString() — often "[object Object]"; format explicitly.
• Older engines / some tooling mishandle tagged templates — know your targets.
• Accidental nesting of quotes is fine with backticks, but $\{ inside needs care.
• Large templates rebuilt every render can allocate heavily — cache static parts.

🔗 Related

• strings.md — string methods
• f-string style — formatting
• optional_chaining.md — in interpolations
• regex.md — patterns vs templates
• encode.md — escaping