Tagged templates in JavaScript
MR.H
Posted on March 2, 2023
JavaScript tagged templates are a powerful feature that allow's developers to create custom template literals that can be used to manipulate and transform data in a more flexible and expressive way.
Template literals
Template literals were introduced in ECMAScript 6 as a new way to create strings in JavaScript. They use backticks (`) instead of quotes (' or ") and allow for easy interpolation of variables using ${}. For example:
const name = "Jhon";
console.log(`Hello ${name}!!`) //Hello Jhon!!
Tagged templates
Tagged templates is also a template literal followed by a function block. For example:
const person = "Mike";
const age = 28;
function myTag(strings, ...values) {
const str0 = strings[0]; // "That "
const str1 = strings[1]; // " is a "
const str2 = strings[2]; // "."
const userName = values[0] // Mike
const age = values[1] // 28
const ageStr = age > 99 ? "centenarian" : "youngster";
// We can even return a string built using a template literal
return `${str0}${userName}${str1}${ageStr}${str2}`;
}
const output = myTag`That ${person} is a ${age}.`;
console.log(output);
// That Mike is a youngster.
How do tagged templates work?
In the above example myTag is called with a parsed template with array for strings as first argument and values as subsequent arguments
myTag`That ${person} is a ${age}.`
Parsed into
strings = ['That ',' is a ','.']
values = ['Mike',28]
The strings array contains static parts of the message and values contain the dynamic parts of the text, myTag function is used to manipulate the text.
Use cases for tagged templates
1) Localize strings
function localize(strings, ...values) {
// Use an i18n library to translate the static parts of the string
const translatedStrings = strings.map(s => i18n.translate(s,'es'));
// Combine the translated strings and dynamic values to create the localized string
let result = translatedStrings[0];
for (let i = 0; i < values.length; i++) {
result += values[i] + translatedStrings[i + 1];
}
return result;
}
const name = "John";
const message = localize`Hello, ${name}! How are you?`;
console.log(message); // "Hola John Cómo estás"
In this example, the localize function uses an i18n library to translate the static parts of the string and then combines the translated strings and dynamic values to create the localized string.
2) Styled templates:
function format(strings,...values){
let result = strings[0];
for (let i = 0; i < values.length; i++){
result+=`<b>${values[i]}</b>strings[i+1]`
}
return result
}
const name = "Mike",
age=35;
console.log(format`My name is ${name}. I am ${age} years old`)
//My name is <b>Mike</b>. I am <b>35</b> years old
Conclusion
Tagged templates are a powerful feature of JavaScript that can be used for a variety of purposes. They allow developers to create custom template literals that can be used to manipulate and transform data in a flexible and expressive way.
If you have read until the end, leave a like and share your thoughts in the comment section
Posted on March 2, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
