What is a tagged template literal, and what are its practical uses?
Understanding how a function can intercept and process the parts of a template literal.
A tagged template is a function invoked with a template literal, where the function receives the literal's static string parts and its interpolated values separately: the first argument is an array of the string segments (with a .raw property holding un-escaped versions), and the remaining arguments are the evaluated expressions. This lets the tag transform or sanitize the interpolations rather than blindly concatenating — the key safety and power difference from a plain template string. Practical uses: escaping/sanitizing to prevent injection (auto-escaping HTML or SQL interpolations), CSS-in-JS (styled-components' styled.div`...` is a tag), internationalization/formatting, GraphQL's gql`...` for parsing queries, and String.raw for keeping backslashes literal (useful in regex/paths). The mental model: `tag`x${y}z`` calls tag(['x','z'], y). Reach for it when you need to process interpolated values consistently at the boundary — anywhere raw string concatenation would be unsafe or repetitive.
Auto-escaping user input in HTML/SQL, CSS-in-JS, embedded DSLs (GraphQL), and String.raw for literal backslashes.