Magic of Tagged Templates Literals in JavaScript?
Once in a while you come across a JavaScript syntax that looks strange in nature. However, that’s not quite true, let’s phrase it differently, all the time we come across a JavaScript syntax that looks strange. :) Well, Tagged Template Literals are one of those strange ones among many. Let’s dive deep into the concepts and usage of tagged template literals.
What is Tagged Template Literals?
Tagged template literals were introduced in the ES6 version of JavaScript. I’m safely assuming that most of you are hopefully aware of template strings, where you can interpolate dynamic content inside a string.
The code sample above will render “Hi my name is Techsith and I am 35” as expected. In this template string, “ my name is “ and “ and I am ” are static content and greetings, name, and age are dynamic content. There are use cases where you want to take the user provided template string and perform some transformation to the dynamic content based on some logic. Tagged template literals let you extract all the dynamic values, which…
