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:
stringsandvalues— 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.rawproperty 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.