Working with JavaScript Tagged Template Literals

There is one feature in JavaScript (ES6) that many developers are totally unaware of and one that can be very beneficial in your projects when you need a bit more control of your strings. If you are already familiar with ES6 string templates, then this will be an additional component to that mechanism and should make sense, and if you are not, then head over to this post to read a bit more about string literals and how they work before coming back here.

Tagged templates work with string literals in order to give you more access to the overall data is being templated.

What is a tag?

A tag, in this context, is simply a function that gets called with the string template's content passed in as arguments, but broken up into array items for easy retrieval. Essentially, the function will break apart a string template into all of its many components and give you access to each one. You can then use these data points however you wish. You can define a literal with a tag as such:

let name = 'thatsoftwaredude';
let timeofday = 'evening';
let str = tag`my name is ${name}. A pleasure on this ${timeofday}`;

In this example, tag would be a function defined somewhere on your page and would resemble the following.

function tag(literals, ...substitutions){

}

Let's go further into the parameter list. The first parameter defined above, literals , is defined as an array of strings, comprised of all of the individual literal strings in your string template. In the example above, the literal string was the following:

let str = tag`my name is ${name}. A pleasure on this ${timeofday}`;

In this particular case, the literals array would contain each of the individual pieces of text in between the placeholder templates:

1. "my name is "
2. ". A pleasure on this "

The second argument you see above uses the spread operator and it represents each of the interpreted values in the string template. In the example above, this would be defined as:

["thatsoftwaredude", "evening"]

So now you have access to all of the individual components of your original string template to do as you wish.

When to use them

As with most things with coding, it is always best to have as much control of the code and output as we can, so that we can achieve whatever effect it is that we are trying to accomplish.

The following example will piece together back the original string into a new one using the various literals and substitutions. This essentially mimics what the traditional behavior of string templates do, but should hopefully give you an idea as to how you now have control of each bit of data.

function pre(literals, ...substitutions)
{
	let result = "";	// run the loop only for the substitution count
	for (let i = 0; i < substitutions.length; i++)
	{		result += literals[i];
			result += substitutions[i];
	}
	
	// add the last literal
	result += literals[literals.length - 1];
	return result;
}

And there you have it. Tagged templates. This was just a quick post that I hope you found helpful on a feature that I rarely see get used but that can definitely help you in reducing the amount of overall clutter in your code.

Happy JavaScripting.