What is template literal tag

A template literal tag is a function that takes in a template literal as its argument.

const tag = (strings, ...values) => {
  // ...
};

const result = tag`template_literal`;

It is used to control the behavior of the template literal being passed to a function.

function highlight(strings, ...values) {
  return 'cool';
}

const result = highlight`template_literal`;

console.log(result); // 'cool'

As you can see in above example, the highlight function is called with a template literal as its argument.

Regardless of the template literal, the highlight function will always return 'cool'.

If the highlight function is defined differently, the behavior of the template literal will be different.

highlight`This is a ${value} example.`;

function highlight(strings, ...values) {
  let result = '';
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];
    if (i < values.length) {
      result += values[i];
    }
  }
  return result;
}