What are tagged templates in JavaScript?

The short answer

Tagged templates let you process template literal strings with a function. Instead of just interpolating values, the function receives the string parts and the values separately, giving you full control over how the final string is built. Libraries like styled-components and GraphQL's gql use tagged templates.

How they work

A tagged template is a function call where the argument is a template literal:

function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    return (
      result +
      str +
      (values[i] !== undefined
        ? `<mark>${values[i]}</mark>`
        : '')
    );
  }, '');
}

const name = 'John';
const age = 30;

highlight`My name is ${name} and I am ${age} years old`;
// "My name is <mark>John</mark> and I am <mark>30</mark> years old"

The function receives:

• strings — an array of the static parts: ["My name is ", " and I am ", " years old"]
• ...values — the interpolated values: ["John", 30]

Real-world examples

styled-components:

const Button = styled.button`
  background: ${(props) =>
    props.primary ? 'blue' : 'white'};
  color: ${(props) => (props.primary ? 'white' : 'blue')};
  padding: 8px 16px;
`;

The styled.button tag function processes the CSS template, injects the dynamic values, and creates a React component.

GraphQL queries:

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      name
      email
    }
  }
`;

The gql tag function parses the GraphQL query string into an AST (Abstract Syntax Tree) that the GraphQL client can use.

HTML escaping for security:

function safeHtml(strings, ...values) {
  const escape = (str) =>
    String(str)
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;');

  return strings.reduce((result, str, i) => {
    return (
      result +
      str +
      (values[i] !== undefined ? escape(values[i]) : '')
    );
  }, '');
}

const userInput = '<script>alert("xss")</script>';
safeHtml`<p>${userInput}</p>`;
// "<p>&lt;script&gt;alert("xss")&lt;/script&gt;</p>"

Why interviewers ask this

This is an advanced JavaScript feature that many developers use (styled-components, GraphQL) without understanding how it works. Interviewers ask about it to see if you understand the underlying mechanism behind popular libraries.