Template literals & tagged templates

Strings that can think before they print

A template literal is a string written with backtick characters instead of quote characters. Backticks unlock three powers: blanks you can fill with expressions, real multi-line text, and a way to send the template through a function before the final string exists.

You already know the basics from the Strings lesson: a backtick string can contain a blank like ${name}. This lesson turns that feature into a reliable tool. We will predict exactly what values become strings, where whitespace comes from, how tags receive their arguments, and why String.raw keeps backslashes untouched.

Backticks clash with this site’s inline-code marker, so longer examples appear in code blocks. When you copy them, copy the backtick characters from the code block exactly.

Interpolation means “put a value into a larger piece of text.” In a template literal, JavaScript runs each expression inside ${...} from left to right. The expression can be as small as a variable or as rich as a ternary decision.

1const name = "Ada";Run2const items = ["tea","cake"];3const paid = true;4const line = `${name} ordered ${items.length} ${items.length === 1 ? "item" : "items"}: ${items.join(", ")}`;5const status = `${line} — ${paid ? "paid" : "needs payment"}`;6console.log(status);

Notice that line 4 does not merely paste variables. It counts an array, chooses singular or plural, and calls join. Template literals are readable because the code sits where the result belongs. That makes them perfect for receipts, labels, logs, and messages.

1const obj = { name: "Ada" };2const custom = { toString() { return "custom object"; } };3console.log(`${obj}`);4console.log(`${custom}`);5console.log(`${["a", "b", "c"]}`);

The placeholder conversion uses the same “string” hint you met in the Object to primitive conversion lesson. A plain object becomes [object Object] unless it customizes toString. An array becomes a comma-joined list. If you want a better result, call the method you mean, such as items.join(", ") or JSON.stringify(data).

Quote-delimited strings can include a newline by writing \n. Template literals can include the real newline itself. That is wonderful for messages, SQL-like text, small snippets, and test fixtures. It also means accidental indentation is real output.

1const messy = `Dear team,Run2  Ship date: Friday3    Bring snacks`;4const cleaned = messy5  .split("\n")6  .map((line) => line.trim())7  .join("\n");8console.log(messy);9console.log("---");10console.log(cleaned);

The trim-and-join fix in the experiment is intentionally simple: it removes spaces from both ends of every line. In production you may want a small dedent helper that removes only the shared indentation, so intentional spaces inside the message survive.

A tagged template puts a function name before the template. JavaScript does not build the final string first. Instead it calls the tag function with two kinds of information: the literal string pieces and the evaluated placeholder values.

1function highlight(strings, ...values) {2  console.log(strings.length);3  console.log(values.length);4  console.log(strings.raw[0]);5  return strings.reduce((text, part, index) => text + part + (index < values.length ? "[" + values[index] + "]" : ""), "");6}7const price = 12;8const qty = 3;9console.log(highlight`Total: ${price} for ${qty} items`);

1function highlight(strings, ...values) {2  console.log(strings.length);3  console.log(values.length);4  console.log(strings.raw[0]);5  return strings.reduce((text, part, index) => text + part + (index < values.length ? "[" + values[index] + "]" : ""), "");6}7const price = 12;8const qty = 3;9console.log(highlight`Total: ${price} for ${qty} items`);Run

The important rule is precise: for n placeholders, the tag receives n + 1 string pieces. There is a piece before the first placeholder, between each pair, and after the last one. Empty pieces still count.

1function highlight(strings, ...values) {2  return strings.reduce((text, part, index) =>3    text + part + (index < values.length ? "[" + values[index] + "]" : ""), "");4}5function currency(strings, ...values) {6  return strings.reduce((text, part, index) => {7    const value = values[index];8    const money = typeof value === "number" ? "₹" + value.toFixed(2) : String(value ?? "");9    return text + part + (index < values.length ? money : "");10  }, "");11}12function safeHtml(strings, ...values) {13  return strings.reduce((text, part, index) =>14    text + part + (index < values.length ? escapeHtmlValue(values[index]) : ""), "");15}

The HTML-escaping example is deliberately small: it escapes only interpolated values, replacing &, <, >, double quotes, and apostrophes. The fixed string pieces are code you wrote. User input belongs in values. The deeper lesson XSS & safe DOM updates will cover the security model in more detail.

Template strings are normally cooked: escape sequences like \n and \t become a newline and a tab. String.raw is a built-in tag that reads the raw template pieces instead. Think of it as a photocopy that preserves every backslash.

1const normal = `C:\new\table`;Run2const raw = String.raw`C:\new\table`;3console.log(normal);4console.log(raw);5console.log(String.raw`\d+\sitems`);

Use String.raw when the source text itself contains many backslashes: Windows paths, regular-expression sources, and examples where you want learners to see the exact escape sequence. One caveat: a JavaScript template literal cannot end with a single unescaped backslash before the closing backtick, because that backslash would try to escape the backtick.

Template literals show up anywhere a program has to explain itself to a person: UI labels, analytics logs, errors, receipts, generated file paths, and test data. Tags are less common, but powerful when a team wants one consistent rule for a whole family of strings.

1const user = "Ada";2const unread = 4;3const label = `${user} has ${unread} unread messages`;4 5const lines = ["first", "second"];6const report = `Report:7${lines.join("\n")}`;8 9const folder = "invoices";10const filename = "april.csv";11const path = String.raw`C:\exports\${folder}\${filename}`;12 13const unsafeName = "<Ada>";14const html = safeHtml`<strong>${unsafeName}</strong>`;

• “Quotes interpolate too.” They do not. The string "Hello ${name}" prints the dollar sign, braces, and name literally.
• “The braces are optional.” The dollar sign and both braces make the placeholder. $name is just text.
• “Objects print like the console preview.” String conversion is not inspection. Plain objects become [object Object] unless customized.
• “Tags receive one finished string.” Tags receive the literal pieces and values separately. That separation is their power.
• “String.raw makes everything raw.” It preserves raw literal pieces, but placeholder expressions still run normally.

1const name = "Ada";2console.log("Hello ${name}");3 4const item = { title: "Tea" };5console.log(`Item: ${item}`);6 7const folder = "new";8console.log(`C:${folder}	able`);

Key takeaways

• Backticks create template literals; quotes create normal strings.
• Each placeholder evaluates a real expression, then string conversion inserts the result.
• Real newlines and indentation inside template literals are part of the string.
• Tagged templates call a function with string pieces and values before joining.
• String.raw keeps escape backslashes in literal pieces.

A template literal is a string form whose blanks can run JavaScript before the final text is produced.

Up next: Unicode & string internals.