What are tagged template literals?

Answer

Tagged template literals allow processing a template literal with a function, giving full control over how the template is assembled. Syntax: tag`template string \${expr}`. The tag function receives: an array of string parts, followed by the interpolated values as separate arguments. function highlight(strings, ...values) { return strings.reduce((result, str, i) => result + str + (values[i] !== undefined ? `<mark>\${values[i]}</mark>` : ""), ""); }. Use: highlight`Hello \${name}, you have \${count} messages`. Real-world uses: SQL queries (automatic parameterization to prevent injection): sql`SELECT * FROM users WHERE id = \${userId}`. styled-components (CSS in JS): styled.div`color: \${props => props.color}`. GraphQL queries: gql`query { users { name } }`. i18n (internationalization with automatic translation). String.raw is a built-in tag that returns the raw string with escape sequences preserved: String.raw`\n` gives the two-character string \n instead of a newline.