Template Literals

Backtick strings with embedded expressions, multiline text, and tagged templates — JavaScript's modern string syntax.

What it is, in plain English: A template literal is a string delimited by backticks (`) instead of quotes. It supports two things regular strings don't: embedded expressions with ${...} that are evaluated and inserted inline, and multiline text without escape characters. A tagged template is a function call where the function receives the string parts and expression values separately — used to build SQL queries, HTML sanitisers, CSS-in-JS, and more.

Where this bites you

Put an array inside ${} and JavaScript turns it into a string the same way String(array) does: the items joined with commas. So a list built with .map() inside a template comes out with a stray comma between every item. In a page those commas show up as visible text between your list items.

const fruits = ["mango", "guava", "papaya"];

const list = `<ul>${fruits.map(f => `<li>${f}</li>`)}</ul>`;
console.log(list);
// <ul><li>mango</li>,<li>guava</li>,<li>papaya</li></ul>

Backtick strings — the modern way to build strings

Before ES2015, building strings with variables required awkward concatenation with +. Template literals replace that with a cleaner syntax using backticks and ${}.

Basic interpolation

const city  = "Mumbai";
const temp  = 34;
const feels = "humid";

// Old way — hard to read:
const old = "It's " + temp + "°C in " + city + " and feels " + feels + ".";

// Template literal — much cleaner:
const msg = `It's ${temp}°C in ${city} and feels ${feels}.`;
console.log(msg);
// "It's 34°C in Mumbai and feels humid."

Any expression goes inside ${}

const a = 10, b = 3;

console.log(`${a} + ${b} = ${a + b}`);           // "10 + 3 = 13"
console.log(`${a} × ${b} = ${a * b}`);           // "10 × 3 = 30"
console.log(`Max: ${Math.max(a, b)}`);            // "Max: 10"
console.log(`${a > b ? "a wins" : "b wins"}`);   // "a wins"

// Function calls work too:
const name = "alice";
console.log(`Hello, ${name.toUpperCase()}!`);     // "Hello, ALICE!"
console.log(`Name has ${name.length} letters`);   // "Name has 5 letters"

Multiline strings — no \n needed

// Old way — escape characters:
const old = "Line 1\nLine 2\nLine 3";

// Template literal — just press Enter:
const poem = `
  Roses are red,
  Violets are blue,
  JavaScript is great,
  And template literals too.
`;
console.log(poem);

Building HTML and URLs

// Building HTML strings:
const user = { name: "Bob", score: 87 };
const card = `
  <div class="user-card">
    <h2>${user.name}</h2>
    <p>Score: <strong>${user.score}</strong></p>
  </div>
`;

// Building URLs:
const baseUrl = "https://api.example.com";
const userId  = 42;
const url = `${baseUrl}/users/${userId}/profile`;
console.log(url);  // "https://api.example.com/users/42/profile"

// Nesting template literals (loop inside template):
const fruits = ["mango", "guava", "papaya"];
const list = `
  <ul>
    ${fruits.map(f => `<li>${f}</li>`).join("\n    ")}
  </ul>
`;

That's why the nested example above ends the .map() with .join(...). .map() gives you an array, and .join() chooses what goes between the items. Use .join("") for nothing at all, or .join("\n") to put each item on its own line:

const fruits = ["mango", "guava", "papaya"];

const list = `<ul>${fruits.map(f => `<li>${f}</li>`).join("")}</ul>`;
console.log(list);
// <ul><li>mango</li><li>guava</li><li>papaya</li></ul>

Try It Yourself

// Basic template literal — backticks + ${expression}
const name  = "Alice";
const score = 95;
const grade = score >= 90 ? "A" : "B";

// Old way:
const old = "Hello " + name + ", you scored " + score + " (" + grade + ")";

// Template literal:
const msg = `Hello ${name}, you scored ${score} (${grade})`;
console.log(msg);
// "Hello Alice, you scored 95 (A)"

// Any expression works inside ${}:
console.log(`2 + 2 = ${2 + 2}`);
console.log(`Today is ${new Date().toDateString()}`);
console.log(`${name.toUpperCase()} has ${name.length} letters`);

// Multiline — no \n needed:
const card = `
  Name:  ${name}
  Score: ${score}
  Grade: ${grade}
`;
console.log(card);

// Nested template literals:
const items = ["apples", "bananas", "cherries"];
const list = `Items: ${items.map((item, i) => `${i+1}. ${item}`).join(", ")}`;
console.log(list);
// "Items: 1. apples, 2. bananas, 3. cherries"

// Tagged template — function processes the parts:
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) =>
    result + str + (values[i] !== undefined ? `[${values[i]}]` : ""), "");
}
console.log(highlight`Hello ${name}, score: ${score}`);
// "Hello [Alice], score: [95]"

Tagged templates — the advanced superpower

A tagged template lets a function intercept and process a template literal. The tag function receives the string parts as an array and the interpolated values separately — giving you complete control over the output. This is how CSS-in-JS libraries, SQL query builders, and HTML sanitisers work.

// A tag function receives: (strings, ...values)
// strings = array of the literal string parts
// values  = the evaluated ${} expressions

function tag(strings, ...values) {
  console.log(strings);  // ["Hello ", ", you scored ", "!"]
  console.log(values);   // ["Alice", 95]
  // Reconstruct manually:
  return strings.reduce((out, str, i) =>
    out + str + (i < values.length ? values[i] : ""), "");
}

const name  = "Alice";
const score = 95;
tag`Hello ${name}, you scored ${score}!`;

Real use 1 — HTML escaping (XSS prevention)

function html(strings, ...values) {
  const escape = v => String(v)
    .replace(/&/g, "&amp;").replace(/</g, "&lt;")
    .replace(/>/g, "&gt;").replace(/"/g, "&quot;");
  return strings.reduce((out, str, i) =>
    out + str + (i < values.length ? escape(values[i]) : ""), "");
}

const userInput = '<script>alert("XSS")</script>';
console.log(html`<p>User said: ${userInput}</p>`);
// <p>User said: &lt;script&gt;alert("XSS")&lt;/script&gt;</p>
// ↑ Safely escaped — no XSS possible

Real use 2 — SQL query builders

// Like the 'sql' tag from packages like 'postgres' or 'drizzle':
function sql(strings, ...values) {
  const query  = strings.reduce((q, s, i) => q + s + (i < values.length ? `$${i+1}` : ""), "");
  return { query, params: values };
}

const userId = 42;
const limit  = 10;
const { query, params } = sql`
  SELECT * FROM users
  WHERE id = ${userId}
  LIMIT ${limit}
`;
console.log(query);
// SELECT * FROM users WHERE id = $1 LIMIT $2
console.log(params);  // [42, 10]
// → Safe parameterised query, no SQL injection possible

String.raw — escape sequences as-is

// String.raw is a built-in tag that preserves backslashes:
// (using forward slashes here to avoid escape confusion)
console.log(String.raw`C:/Users/Alice/Documents`);
// "C:/Users/Alice/Documents"  (no escape processing)

// On Windows, raw strings preserve backslashes literally:
// String.raw`C:\n\t` → "C:\n\t"  (not a newline/tab — literal backslash+n)

// Useful for regex patterns and Windows paths:

Template literal internals and the spec

Template literal parsing (ECMA-262 §12.9)

The parser produces a Template token sequence. A template with N interpolations produces N+1 cooked/raw string pairs. The "cooked" value processes escape sequences normally; the "raw" value preserves the source text verbatim (accessed via strings.raw in tag functions).

The strings array is frozen and cached

// The template strings array is frozen:
function check(strings) {
  console.log(Object.isFrozen(strings));  // true
  console.log(strings.raw);  // the raw (unprocessed) string parts
}
check`line1\nline2`;
// strings[0] = "line1\nline2" (cooked — newline processed)
// strings.raw[0] = "line1\nline2" (raw — backslash preserved)

// The same template literal always produces the SAME strings array object
// (cached by the engine) — enabling tag functions to use WeakMap for memoisation:
const cache = new WeakMap();
function memo(strings, ...vals) {
  if (cache.has(strings)) return cache.get(strings)(vals);
  const compiled = /* compile once */ (v) => strings.join("" + v);
  cache.set(strings, compiled);
  return compiled(vals);
}

Invalid escape sequences in tagged templates (ES2018)

// Before ES2018, invalid escapes in tagged templates threw SyntaxError.
// ES2018 allows them — cooked value is undefined, raw is preserved:
function latex(strings) {
  return strings.raw[0];
}
latex`\u0041`;  // raw: "\u0041" — cooked would be "A", raw preserves the backslash

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.