Tagged templates in JavaScript

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

Happy coding

---