What are Tagged Template Literals in ES6?

Tagged literals are template literals that get parsed through by a function. It comes immediately after function. You don’t need parentheses() to invoke the function. This is a special type of function called tag function.

function memberShip(){
  // some codes
}

memberShip`Your membership status`;

Here is a example of tagged template literals.  memberShip is a tag function and `Your membership status` is template literals.

Before we discuss what it is used for, let’s first understand how tagged literals works.

const age = 21;
const status = 'full';

function memberShip(strings,age,full){
  console.log(strings);
}

memberShip`Your age is ${age} and you have ${status} membership`;

Output:

[ 'Your age is ', 'and you have', 'membership' ]

Here the first parameter strings of tag function(memberShip) is an array of template strings separated at each template expressions(${ }).

Remaining parameters are placeholder for values of template expressions in the strings. In our code example, they are age and status.

const age = 21;
const status = 'full';

function memberShip(strings, age, status){
  console.log(age);
  console.log(status);
}

memberShip`Your age is ${age} and you have ${status} membership`;

Output:

21

full

Here in our code example we know how many arguments we are passing. We are passing two values age and status but if you are unsure of how many arguments will be passed you can collect  indefinite number of arguments in an array with rest operator. It is represented by three dots.

const age = 21;
const status = 'full';

function memberShip(strings, …values){
  console.log(strings);
  console.log(values);
  console.log(age);
  console.log(status);
}

memberShip`Your age is ${age} and you have ${status} membership`;

Output:

[ ‘Your age is ‘, ‘ and you have ‘, ‘ membership’ ]

[ 21, ‘full’ ]

21

full

As explained above strings is going to be an array of literal strings and …values is going to gather indefinite number of arguments in an array when memberShip function is called. So you get two arrays.

Why would we use tagged literals?

Tagged literals allows to create strings output based on template expression(interpolated value).

Strings output can be same or different from the strings passed to tag function.

let age = 18;

let status = 'full';

function memberShip(strings, …values){
  if(age < 21){
   status = 'junior';
   return `Age is ${age}. Membership is ${status.toUpperCase()}` ;
  }else{
    return `Age is ${age}. Membership is ${status.toUpperCase()}`;
  }
}

memberShip`Your age is ${age} and you have ${status} membership`;

Output:

Age is 18. Membership is JUNIOR

Here in our code example we have variable age and status. Based on the value of age we change the value of status. If age is less than 21 we set status to ‘junior’ and if age is greater than 21 we assign ‘full’ value to status.

So here we our outputting dynamically generated template literals based on conditional logic we implemented.

We can also say that we modified the strings that was passed to tag function before outputting the final strings.

Note that the output does not have to be strings. It can be object as well. Tagged template does not have to return strings.

let age = 18;

let status = 'full';

function memberShip(strings, …values){
  if(age < 21){
  status = 'junior';
  return{
    age: age,
    status:status
   }
  }else{
    return{
      age: age,
      status:status
    }
  }
}

memberShip`Your age is ${age} and you have ${status} membership`;
Output:

{

age: 18,
status: 'junior'

}

So here we have a tag function that converts strings `Your age is ${age} and you have ${status} membership` to a object.