What are tagged template literals?

Q: What are tagged template literals?

**Target Audience:** Engineers preparing for JavaScript fundamentals interviews. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . The real tag function's output and the raw-vs-cooked distinction below were actually run in Node. ## 1. Why This Even Matters — A Story First A normal template literal is like handing a finished, sealed envelope directly to the mail carrier — no inspection happens along the way. A tagged template literal is like handing that SAME letter to a customs inspector first: the inspector genuinely sees the plain text parts and the "inserted items" (interpolated values) as SEPARATE, individually-labeled pieces, before deciding what to actually do with them — seal them as-is, redact something, or repackage the whole thing entirely. ## 2. The Core Idea 📌 **Interview term:** a tagged template literal calls a function (the tag) with the literal's static text pieces a

The problem

Question presented to candidate: "What is a tagged template literal, and can you write one that automatically HTML-escapes every interpolated value, without escaping the literal string parts themselves?"

What a strong answer should cover:

📌 Interview term: tagged template literal — a template literal immediately preceded by a function reference (the "tag"), which is called with the literal's pieces split apart: the static string segments as one array, and the interpolated values as separate, individual arguments — instead of the literal being auto-assembled into one plain string.
📌 Interview term: strings and values — verified directly: the tag function's first parameter is a real array of the static text segments (one MORE element than the number of interpolations), and the remaining parameters (or a rest parameter) are the actual interpolated values, in order.
📌 Interview term: the real, direct answer to the prompt — verified directly: a real auto-escaping tag function correctly HTML-escaped a genuinely dangerous interpolated string (<script>alert(1)</script>) while leaving the literal template text completely untouched — the exact real mechanism behind libraries like styled-components and `html```` template tags used for XSS-safe templating.
📌 Interview term: strings.raw — verified directly: the strings array carries a .raw property holding the literal, unprocessed source text (a real backslash-n), distinct from the plain strings array itself, which holds the cooked, already-processed text (a real newline character) — a precise, verified distinction most candidates miss.
A precise answer names that a custom tag function can return anything, not just a string — a real, common pattern (used by libraries like styled-components and GraphQL's `gql````) returns a specialized object instead of a plain string, using the tagged template purely as a convenient syntax for structured input.

Clarifying questions expected:

None — this is a definitional/technical question; writing a real, working auto-escaping tag function is the strong signal, beyond reciting the syntax.

Code / implementation expected: Yes — a real, working custom tag function (ideally the auto-escaping one from the prompt) is the clearest, most convincing demonstration.

tagged-templates

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for JavaScript fundamentals interviews. Difficulty: Medium

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. The real tag function's output and the raw-vs-cooked distinction below were actually run in Node.

1. Why This Even Matters — A Story First

A normal template literal is like handing a finished, sealed envelope directly to the mail carrier — no inspection happens along the way. A tagged template literal is like handing that SAME letter to a customs inspector first: the inspector genuinely sees the plain text parts and the "inserted items" (interpolated values) as SEPARATE, individually-labeled pieces, before deciding what to actually do with them — seal them as-is, redact something, or repackage the whole thing entirely.

2. The Core Idea

📌 Interview term: a tag

The solution is hidden so you can try first

6 min read · 9 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal, working auto-escaping tag function, plus the exact real strings/values shape and the raw-vs-cooked distinction