Tagged Template literals — Its more than you think

“Expand” your front end knowledge with tagged template literals

Refreshing the memory

• The ES6 template literal syntax is simply `` (Template literals are enclosed by the back-tick (` `) (grave accent) character instead of double or single quotes).
• Template literals can contain placeholders. These are indicated by the dollar sign and curly braces (${expression}).

Definition

If there is an expression(custom handler function) preceding the template literal then it is called a "tagged template".

Definitions are tough without context. Lets explore some different use cases to help understand what this means.

One feature that comes along with template literals, or template strings, is the ability to tag them, which are currently ignored by majority of the developers.

Basically we can run a template string through a function, and rather than have the browser immediately assign that value to a variable, we can have control over how this actual string is made, which is pretty cool and handy.

I’m going to share you some examples of when that would actually be useful in your code but first, let’s look at the working of it.

Example #1 — Basic

Here, we get an array of strings strings in pieces(first function parameter),

1. (Empty string)
2. by
3. (Empty string)

After the array of all the strings, the subsequent arguments will be the values that are being interpolated. So the … rest of the values that are passed to that argument, and put them into an array for us values. This would be something like

highlight([’’,’by’,’’], 'I have...etc’,’Thomas A. etc’)

I believe that the above gives you a picture of what’s going on. Note that strings length is always greater than the number of arguments by one. Since the strings array is always going to be one larger than the values array, when we hit that last iteration , it’s only going to be a string and values[i] will have no value undefined. You could check if values of [i]is undefined and, if it is, then don’t put it on , a little trick you can do here is ${values[i] || ''}

Use cases

1. Escaping HTML tags

I suspect HTML escape was one of the first use cases that the designers of this feature had in mind. The following code is vulnerable to XSS attack, if name or aboutme are not sanitized:

If it is not sanitized the onload will execute the javascript code after the image has been loaded, which is not desired right. So using tagged template literal we now can purify it with much cleaner code. Do checkout common-tag a popular library making use of tagged template literals extensively.

2. Language translation and internationalization

A handy library called es2015-i18n-tag uses tagged template literals to translate and localize texts. It allows you to write code that looks like this:

console.log(i18n`Hello ${ name }, you have ${ amount }:c in your bank account.`)
// Hallo Steffen, Sie haben US$ 1,250.33 auf Ihrem Bankkonto.

What’s great here is that it automatically localizes currencies and date formats. Notice the :c after ${amount} in the above literal automatically adds the dollar sign. You can also specify explicitly if the global currency is different.

3. Writing CSS in JXS

Javascript developers are familiar with weird syntax for inline style (written as an object) in react, blah blah. Following is a react jsx snippet.

A library called styled-components aims to fix inline style in React using tagged template literals. Here’s what their code looks like for the above snippet, more cleaner

Checkout their Getting Started page, it has a ton of code examples and live playground to write your own styled components.

Bonus Points

As of ES2016, tagged templates conform to the rules of the following escape sequences:

• Unicode escapes started by “\u”, for example \u00A9
• Unicode code point escapes indicated by “\u{}”, for example \u{2F804}
• Hexadecimal escapes started by “\x”, for example \xA9
• Octal literal escapes started by “\” and (a) digit(s), for example \251

This means that a tagged template like the following is problematic, because, per ECMAScript grammar, a parser looks for valid Unicode escape sequences, but finds malformed syntax: tag`\unicode` For more details regarding this do checkout the ECMAScript proposal.

Final Thoughts

For a long time I felt that these tagged template literals had no, but as I found more libraries that use them I’m starting to change my mind. I believe you too would after reading this article. If you have other ideas or uses for tagged template literals, do share by leaving a comment.

Will it remain an esoteric feature for some library authors or will we see it going mainstream? Still hard to tell. Happy hacking.

Thanks for reading. If you liked this article please consider by recommending it to others. 👏