What a tag function receives
The same template site always passes the same frozen array; two identical-looking templates are two sites. \unicode is an invalid escape, so its cooked value is undefined (allowed in tags since ES2018).
Putting a function name right before a template literal, as in tagHi ${name}, calls that function with the literal's fixed text parts and its values separately, so it can escape, format or reshape them before building the result; String.raw is the built-in tag that keeps backslashes as written.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a tag highlight that wraps every substitution value in <mark> and </mark> (escaping is not needed for this task). Log ` highlightFound ${3} results for ${"tea"} `.
Use String.raw to build a regex that matches a Windows path starting with C:\Users\, and test it on C:\Users\asha.
Explain it without notes
What arguments does a tag function receive? How many strings and values are there?
What is the difference between strings[i] and strings.raw[i], and what does String.raw do?
How can a tagged template help prevent XSS or SQL injection?
Preview
Console
Nothing logged yet.Expected console output
[ 'Hi ', ', you are ', '!' ]
[ 'Asha', 12 ]
true
{ pieces: 3, values: 2 }
true
false
true
[ undefined, '\\unicode' ]