Tagged templates literal in js.

What is template literal? 😶

Template literals allow us to concatenate or embed variables inside a string. It was introduced in ES6.

Template literals are enclosed by the backtick.

Example:

 const age = 12; const title =`My age is ${age} years.` 

What is Tagged templates literal? 😬

Here tag refers to a function which performs parsing of the given template literal.

styled components is a famous library that uses the tagged template literal.

Example:

 const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; 

How it works? 😯

Step 1) Create a function.

const appendStyle = (array,val1,val2) => { //do something and return a value. return "testing"; } 

can be also written as

const appendStyle = (array,...values) => { //do something and return a value. return "testing"; } 

In the array we will get the split strings.
means if the template literal is My name is ${name} and my age is ${age}

then, the array will be

array = ['My name is','and my age is']

and in the values we will get all the arguments.

Step2) attach the function in front of the template literal, without the ()

 const name = 'gilbish'; const age = '23'; const text = appendStyle`My name is ${name} and my age is ${age}`; console.log(text); // output: testing 

Step3) finish the Function.

In the appendStyle function , we gonna make the color of each arguments to blue or whatever color you prefer. 😄

const appendStyle = (array,...values) => { let color = "blue" let text = ''; array.map((item,index) => text += `${item} <span style="color:${color}">${values[index] || ''}</span> `); return text; } 

our tagged template literal appendStyle is ready to use 🎊

Example:

 const name = 'gilbish'; const age = '23'; const text = appendStyle`My name is ${name} and my age is ${age}`; document.body.innerHTML = text; 

Output:

Thanks for reading the post 🙏