Tagged Template Literals

The plain-language idea

A normal template literal builds a string immediately: `Hello ${name}` interpolates and you get back one finished string. A tagged template literal — tag`Hello ${name}` — doesn't build the string at all. Instead it calls tag as a function and hands it two things separately: an array of the literal text chunks, and the interpolated values, unjoined.

function tag(strings, ...values) {
  console.log(strings); // ["Hello ", "!"]
  console.log(values);  // ["Ada"]
}

tag`Hello ${"Ada"}!`;

strings is ["Hello ", "!"] — the static parts, split wherever an interpolation occurred. values is ["Ada"] — the interpolated parts, in order. The tag function decides what to do with them and returns whatever it wants: a string, an object, anything.

See it in a real thing: an escaping tag

The most concrete reason this exists: you can force every interpolated value through a safety function before it ever reaches the final string, and there's no way for a caller to bypass it.

function safeHTML(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const value = values[i - 1];
    const escaped = typeof value === "string"
      ? value.replace(/</g, "&lt;").replace(/>/g, "&gt;")
      : value;
    return result + escaped + str;
  });
}

const userInput = "<script>alert('hi')</script>";
const html = safeHTML`<p>Comment: ${userInput}</p>`;
// "<p>Comment: &lt;script&gt;alert('hi')&lt;/script&gt;</p>"

Every interpolated value passes through the escaping logic automatically — a developer can't accidentally write an unescaped interpolation because the tag function is the only thing that ever sees the raw pieces and does the joining.

This is exactly the mechanism styled-components uses. styled.div`color: ${props => props.color};` isn't string concatenation with extra steps — styled.div is a tag function that receives the CSS text chunks and a function value separately, and builds a component that re-evaluates the interpolated function against each render's props.

What people usually miss

Watch out

• The tag function runs BEFORE any string exists. There's no template string being built and then handed off — the tag receives raw pieces and decides for itself whether and how to join them. It could return a Promise, a DOM node, anything.
• strings always has one more element than values. For n interpolations there are n+1 literal chunks (the parts before, between, and after each ${}), which is why the escaping example above zips them with values[i - 1].
• The same literal tagged the same way is cached and reused as one array reference across calls with the same static structure — the engine treats identical tagged-template call sites as returning the same strings object each time, which is why library code can safely use strings itself as a cache key.

The genealogy: template literals with a function attached

Tagged templates are what plain template literals look like once you accept a function argument before evaluating the interpolations — the same ${} syntax you already know, just intercepted before it becomes a string instead of after. Anywhere this platform's code touches a DSL embedded in a string (styled-components' CSS-in-JS, GraphQL's gql tag, SQL query builders), this is the feature making it possible.