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.

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
Line 2
Line 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("
    ")}
  </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:
	` → "C:
	"  (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
line2`;
// strings[0] = "line1
line2" (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.