Tagged Templates ?!

Template Literals was introduced in ES2015 for making string interpolation and compilation easier and more readable to the programmer

Along with this a very niche and wierd syntax of Tagged Templates was introduced as a supplementary to the former. Let’s see its syntax and explore why and when might we need it in and come across in the projects.

Template Literals

Template Literals are used for binding and injecting some dynamic content in our strings.

It makes uses of (``) Back ticks for marking the start of a template string and dynamic code and values can be inserted by evaluating the expression between (’${}‘)

To acknowledge its simplicity and usefulness let us compare it with traditional way of interpolating dynamic values using string concatenation ( + )

The above code snippet logs -

Hello My name = Bishwajit Jha. And I am 20 years old to the console !

But as you can guess , its very difficult to parse and read this code and makes formatting very cumbersome as we would manually have to take care of whitespaces between the dynamically injected part

This is where Template literals comes to our rescue!

As we can easily make out from the above code snippet, how the above syntax makes the injection of dynamic content in the string so easy as well as maintains the readability and accessibilty of the code and provides us an elegant way of formatting strings.

Note that, here not only we can inject a value but any expression that evaluates to a string or can be represented in the equivalent string format.

Tagged Templates

We just saw how we can dynamically inject some data into a string.

Tagged Templates allow us to do exactly the opposite, that is, it allows us to extract the data dynamically from a template string

The way the tag template works is you simply make a function, and you take the name of the function that you want to run against the string, and you just put the name right in front of the template

Let’s deconstruct this above mechanics one by one in the code snippet given below

As we can see this tags it with a function name. What will happen is the browser will run this function, it will provide it with all the information about the string, all the pieces that the person typed, as well as the variables that get passed in.

Whatever we return from this function is what sentence actually is going to be.

OUTPUT:

Here we can infer that how the interpolated data was extracted from the tagged string and how it was splitted to segregate the static part of the string from the dynamic one

Now based on this data we can manipulate the string that was passed as a tagged template to our function and returned value of function is then our modified string.

The core logic behind this is to manipulate some dynamic data from the user entered string and carry out that transformation / manipulation logic in the function tagged with the template string

Thus, Here we created a custom dynamic description for a product based on the price that we extracted from the template literal

Where do we see it in use ?

If you have prior experience of working with ReactJs you might have come across Styled components for writing custom css for our components

It makes use of Tagged Templates for manipulating the css styles we pass as Template string and generate the Stylesheet object based on it !

So what are you waiting for , Just start exploring more about Tagged Templates and make use of this fantastic Next-gen ES6 feature in your next project 🤔🙌🏻.

Follow me on twitter for getting updates about new Topics and Posts and feel free to share feedbacks and suggestions !