Tagged Template Literals in JavaScript ES6
In my previous article, I briefly explained template literals and why they were useful. You can read my previous article here in case you missed it. ECMAScript 2015 introduced us to another concept, tagged template literals. As a student myself, I like to know why exactly something is useful before I dedicate my time to learning whatever it may be so let’s start with that. To put it short and sweet, tagged template literals allow us to parse our template literals using a function. These functions are called tag functions. As developers, we want to have complete control over our code and tagged template literals help us achieve exactly that. You have a lot more control over how you want a certain string to be parsed. Okay, but how?
How to use tagged template literals?
It’ll be easier to show you the code right away. Later, we’ll break down the code into pieces to explain what’s going on.
This can be quite overwhelming to look at. There’s a lot going on. Let’s start with the way we’re calling our tag function because it does look a little bit odd, doesn’t it?
tagFunction`My name is ${firstName} and I love ${topic}.`Wait, is that a typo? Why aren’t there any parenthesis? Well, no. This is how you call tag functions. This is the main difference between a regular function and a tag function. We defined a tag function, we called it “tagFunction”, it takes our template literal as a parameter and simply returns a string, “awesome.” That’s a bit dull though. Why are we even passing a value to our tag function if we aren’t going to use it? Well, let’s work on that now.
Okay, now we’re passing 3 values to our tag function. We’ll use them later on but wait… We only have 2 variables, what even is strings ? It’s an array of strings. How do I know what’s in the array? Well, strings are pushed into the array until they’re interrupted by a variable. So as it stands right now, we have 3 elements in our array. These are:
My name isand I love.
Easy enough, right? Then we pass the 2 values we’re going to use in our tag function but wait. What about scalability? What if I wanted to add 10 more values later on, do I need to type every value one by one? That’s where ES6 rest operator comes to our rescue! Let’s refactor our code for scalability.
I can add as many values as I want and it won’t be a problem anymore. Now let’s focus on actually making our tagFunction perform an operation.
Okay, so I used let instead of const . We’re going to concatenate multiple strings, thus resulting in us altering our variable. Therefore, use of const is out of the question. Next, I used a forEach loop to iterate through our strings array and concatenated each string and value. Finally, I returned the new str variable. However, if you check the console you’ll encounter an odd error.
Why is that? Well, let’s modify our code a little bit to print our strings array and our values array.
And let’s check our console.
Well that’s odd, isn’t it? Not really, let’s remind ourselves what we said earlier. Tag functions push the largest string they can before being interrupted by a variable. In this case, our function pushes an empty string into the array, gets interrupted by our variable, pushes another empty string, gets interrupted by our second variable, and pushes another empty string before eventually reaching the end of our string. So what does that mean? That means our tag function creates an empty string twice even if we simply just print a single variable, once before the variable is encountered and once after. That means our strings array will always be bigger than our values array. So how do we fix this problem? Well, there’s a simple work-around using our good old friend ternary operators.
We’re simply checking if the value is declared and printing the value if it is. If it’s not declared, we’re simply printing an empty string, so nothing gets printed. Okay, that’s pretty cool and all but what really is the big deal? This is pretty much just a fancier template literal at this point. Let’s look at how this can be useful.
This is a pretty basic example of how we can make use of tagged template literals. By using our Button tag function we can create a button without leaving our JS file and style it to our heart’s content. Obviously, the code I’ve written for this example is less than ideal and this truly shines if you’re using a JavaScript based front-end library such as React but this is the main idea behind it. There’s actually a pretty famous library utilizing this feature called styled-components, you should definitely check it out here. Please do keep in mind you don’t always need to return a string from tagged template literals. Thanks for reading!
Got any questions or would you like to add something I missed? Leave a comment down below! My next article will be on arrow functions.
References and further reading
Thanks to this awesome article by Rafael Leitão, I was able to understand tagged template literals a bit better.
