Tagged Templates Literals in Javascript

javascript
Published on February 8, 2019

Tagged templates can be thought of as an advanced form of template literals, where the placeholders (${variable}) and text are passed through a function.

In reality placeholders and text in any template literal are always passed through a function. If no function is explicitly given, then the default function is used. This default function simply returns a concatenated string. In tagged templates, we don't use the default function, and provide a function explicitly.

The function name or tag is prefixed to the template literal, hence the name tagged template.

Defining a Tagged template

In a tagged template, the template literal is passed through a function. So obviously this function needs to be defined. There will be at least 2 parameters for this function.

The first parameter in this function is always an array of strings that is passed to it. The other parameters are expressions (${expression}), with each expression passed one after the other. The parameters will be explained in detail later.

Here is a simple example of a tagged template.

var name = "javascript";

function myFunc(str, exp) {
	var tmp = exp.replace("javascript", "JavaScript");
	return str[0] + tmp;
}

var output = myFunc`The language here is ${name}`;

// The language here is JavaScript
console.log(output);

The name of the function is followed by the template literal enclosed within back-ticks ``.

The First Parameter of the Tag Function

Like told earlier, the first parameter is an array of strings. Consider the following line from the above snippet :

var output = myFunc`The language here is ${name}`;

When the template literal is passed to a function, it can be thought that the string is being splited with the expressions (${variable}) as separators. Since the expression in this template literal is at the end, the str parameter of function myFunc will have only one element as shown below.

// str[0] = "The language here is ";

Again consider the following line :

var output = myFunc`The language here is ${name} and ${anotherName}`;

In this case the str parameter will contain 2 elements as the string here contains 2 expressions.

// str[0] = "The language here is ";
// str[1] = " and ";

The Second Parameter of the Tag Function (and after that)

From the second parameter, all expressions (${variable}) are passed one by one. For example, the below function will have one 2 parameters because there is only a single expression in the template literal.

var name = "javascript";

function myFunc(str, exp) {
	// javascript
	console.log(exp);
}

var output = myFunc`The language here is ${name}`;

This one will have 3 parameters :

var name = "javascript";
var anotherName = "PHP";

function myFunc(str, exp1, exp2) {
	// javascript
	console.log(exp1);

	// PHP
	console.log(exp2);
}

var output = myFunc`The language here is ${name} and ${anotherName}`;

Return Value of the Tag Function

Tag functions need not return only strings, they can be set to return anything. If the situation demands, you can return an array or object also.

Useful Resources

In this Tutorial