ProgrammingJavascriptCareerProductivityGadgetsASP.NETWeb Design

Working with JavaScript Tagged Template Literals

Written by
Published on
Modified on
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.

Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.

Comments

No messages posted yet

Developer Poll

Q:

Stay up to date

Sign up for my FREE newsletter. Get informed of the latest happenings in the programming world.

Add a comment

Keep me up to date on the latest programming news
Add Comment

Stay up to date

Get informed of the latest happenings in the programming world.

No thanks