Explain the concept of tagged templates
TL;DR
Tagged templates in JavaScript allow you to parse template literals with a function. The function receives the literal strings and the values as arguments, enabling custom processing of the template. For example:
function tag(strings, ...values) {
return strings[0] + values[0] + strings[1] + values[1] + strings[2];
}
const result = tag`Hello ${'world'}! How are ${'you'}?`;
console.log(result); // "Hello world! How are you?"
Tagged templates
What are tagged templates?
Tagged templates are a feature in JavaScript that allows you to call a function (the "tag") with a template literal. The tag function can then process the template literal's parts (both the literal strings and the interpolated values) in a custom way.
Syntax
The syntax for tagged templates involves placing a function name before a template literal:
function tag(strings, ...values) {
// Custom processing
}
tag`template literal with ${values}`;
How it works
When a tagged template is invoked, the tag function receives:
- An array of literal strings (the parts of the template that are not interpolated)
- The interpolated values as additional arguments
For example:
function tag(strings, ...values) {
console.log(strings); // ["Hello ", "! How are ", "?"]
console.log(values); // ["world", "you"]
}
tag`Hello ${'world'}! How are ${'you'}?`;
Use cases
Tagged templates can be used for various purposes, such as:
- String escaping: Preventing XSS attacks by escaping user input
- Localization: Translating template literals into different languages
- Custom formatting: Applying custom formatting to the interpolated values
Example
Here is a simple example of a tagged template that escapes HTML:
function escapeHTML(strings, ...values) {
return strings.reduce((result, string, i) => {
const value = values[i - 1];
return (
result +
(value
? String(value)
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
: '') +
string
);
});
}
const userInput = '<script>alert("XSS")</script>';
const result = escapeHTML`User input: ${userInput}`;
console.log(result); // "User input: <script>alert("XSS")</script>"