JS Tagged Templates
In this page:
function tag(strings, ...values) {
// build and return a result
}
tag`text ${value} text`;What Is a Tagged Template
A tagged template is a template literal preceded by a function name; instead of producing a string directly, JavaScript calls that function with the literal's pieces for custom processing.
Example: What Is a Tagged Template
// Define the function `tag` taking `strings`, `value`
// Define the function `tag` taking `strings`, `value`
function tag(strings, value) {
// Print `strings, value` to the console
// Print `strings, value` to the console
console.log(strings, value);
}
// Declare the constant `name`, set to "Sam"
// Declare the constant `name`, set to "Sam"
const name = "Sam";
tag`Hello ${name}`;Tag Function Arguments
The tag function receives an array of the literal's string segments as its first argument, followed by each interpolated ${} value as separate additional arguments, giving it full access to both the fixed text and the dynamic pieces.
Example: Tag Function Arguments
// Define the function `tag` taking `strings`, `...values`
// Define the function `tag` taking `strings`, `...values`
function tag(strings, ...values) {
// Print `strings` to the console
// Print `strings` to the console
console.log(strings);
// Print `values` to the console
// Print `values` to the console
console.log(values);
}
tag`A ${1} B ${2}`;Formatting with Tags
Because you control how the pieces are combined, a tag function can escape HTML, format currency, highlight substitutions, or apply any custom transformation before producing the final string.
Example: Formatting with Tags
// Define the function `highlight` taking `strings`, `...values`
// Define the function `highlight` taking `strings`, `...values`
function highlight(strings, ...values) {
// Return `strings.reduce((out, str, i) => `${out}${str}${values[i] ? `[${values[i]}]` : ""}`, "")` from this function
// Return `strings.reduce((out, str, i) => `${out}${str}${values[i] ? `[${values[i]}]` : ""}`, "")` from this function
return strings.reduce((out, str, i) => `${out}${str}${values[i] ? `[${values[i]}]` : ""}`, "");
}
// Print `highlight`Score: ${95}`` to the console
// Print `highlight`Score: ${95}`` to the console
console.log(highlight`Score: ${95}`);Reusable Tag Functions
A tag function is just a normal function, so you can write one once and reuse it across many template literals wherever that particular formatting or escaping behavior is needed.
Example: Reusable Tag Functions
// Define the function `upper` taking `strings`, `...values`
// Define the function `upper` taking `strings`, `...values`
function upper(strings, ...values) {
// Return `strings.reduce((out, str, i) => out + str + (values[i] ?? "").toString().toUpperCase(), "")` from this function
// Return `strings.reduce((out, str, i) => out + str + (values[i] ?? "").toString().toUpperCase(), "")` from this function
return strings.reduce((out, str, i) => out + str + (values[i] ?? "").toString().toUpperCase(), "");
}
// Print `upper`Hello ${"world"}`` to the console
// Print `upper`Hello ${"world"}`` to the console
console.log(upper`Hello ${"world"}`);
// Print `upper`Bye ${"friend"}`` to the console
// Print `upper`Bye ${"friend"}`` to the console
console.log(upper`Bye ${"friend"}`);Tagged Template Use Cases
Tagged templates power real libraries you may already use, like styled-components' CSS-in-JS syntax and SQL-templating libraries that safely escape interpolated values.
Example: Tagged Template Use Cases
// Real-world tagged templates (illustrative):
// styled.div`color: ${theme.color};`
// sql`SELECT * FROM users WHERE id = ${userId}`
console.log("Tagged templates power CSS-in-JS and safe SQL templating.");- Forgetting that the tag function receives an array of strings first and the values after, so the argument order is wrong.
- Writing
tag("text")with parentheses when you meant `tagtext - Returning nothing from the tag function, so the result is
undefined.
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: