ES6 Tagged Template Literals.

Along with string interpolation, ES6 introduced Tagged Template Literals. As the name speaks, you will be tagging a template literal with a function. In ES6, a template literal is any string which is wrapped around ``and it might have an embedded expression in it.

`This is a template literal.`
`Template literal with an embedded ${exp}.`

In order to tag a template literal, you need a function with the below signature.

function myTag(strings, ...variables)

For now let’s skip the definition of myTag and focus just on the signature. myTag is just another function which takes two sets of arguments:

• strings : An array of all the string chunks.
• variables : A variadic argument which contains the values of all the expressions embedded in the template.

So what is tagging actually? A template literal is tagged when you place a function in front of it and don’t invoke the function with parentheses.

const l1 = "node"
const l2 = "go"
const t1 = myTag `Languages like ${l1} and ${l2} are my favorites.`

Here we have tagged the function myTag with a template literal . What happens nexts is the interesting part. The tagged function will automatically get invoked like below with the two set of arguments we defined earlier.

myTag(["Language like ", " and ", " are my favorites."], "node", "go")

• All the string chunks in the template literal, "Language like ", " and ", " are my favorites." will be passed as an array to the first argument, in our case strings.
• All the expressions in the template literal will first get evaluated. In our case to l1 asnode, and l2 as go and then they will be passed as the rest arguments.

Let’s do some examples.

Example 1:

function myTag(strings, ...variables) {
  console.log(strings)
  // => ["Languages like ", " and ", " are my favorites."]
  console.log(variables)
  // => ["node", "go"]
  return "I like other languages as well."
}
const l1 = "node"
const l2 = "go"
const t1 = myTag `Languages like ${l1} and ${l2} are my favorites.`
console.log(t1)
// => "I like other languages as well."

In this example, we returned a completely different string. This is just to see how the invoking happens.

Example 2:

function highlight(strings, ...rest) {
  let str = "";
  strings.forEach((string, i) => {
    if (rest[i] != undefined){
      str += `${string} <strong>${rest[i]}</strong>`;
    } else {
      str += `${string}`;
    }
  });
  return str;
}
const l1 = "node"
const l2 = "go"
const sentence = highlight `Languages like ${l1} and ${l2} are my favorites.`
console.log(sentence)
// => "Languages like <strong>node</strong> and <strong>go</strong> are my favorites."

In this example, we wrapped <strong></strong> around the variables embedded in the template literal. So the gist boils down to that you can do what ever you want inside the tagged function. There is no restriction to returning just strings. You can also return objects.

I got introduced to Tagged Template Literals when I was reading about Relay. Relay has a handly helper Relay.QL. It uses Tagged Template Literals to parse the graphql fragments defined inside a Relay component. It converts the fragments into a complex object which is later on used for querying. Some other popular projects which depend heavily on Tagged Template literals are styled-components and i18n-tag.