Tagged templates in JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2023-03-02 03:11:13

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:

```javascript
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:

```javascript
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

```javascript 
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

```javascript
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:

```javascript
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
<center>Happy coding</center>
---