In ES6 the templated literals were added in Javascript. They are used to interpolate values in a string.
const name = 'Tom'const age = 20;const myString = `The name is ${name} and the age is ${age}.`;/* myString is now "The name is Tom and the age is 20."before ES6 the templated literals we had to write:myString = "The name is " + name + " and the age is " + age "."*/
So, this made things a bit more elegant when concatenating strings.
But we can do more than this. We can define tagged template literals. Basically, they are a combination of a tag function and a string template literal . What's returned from the tag function will determine the final format of the string.
Let's say we want to show a string like this one in the below picture.
The basic string literal will just alow use to write this:
const text = `${p.name} is ${p.age} years old.`;
However, with the tagged template literals we can say:
const text = setHighlightTags `${p.name} is ${p.age} years old.`;
We can name the tag function however we want. In our example the setHighlightTags
is defined as:
function setHighlightTags(strings, ...values) { let str = ''; strings.forEach((string, i) => { str += string; if(values[i]) str += `<span class='hl'>${values[i]} </span>`; }); return str;}
And the .hl
CSS class has just some simple rules:
.hl { background-color: yellow; padding: 2px 10px;}
And that's pretty much all we need. We can get more creative when we need it. There are libraries, like styled-components (React) or chalk (for colorful logs) that take this feature to the next level.
If you want you can read more about it here . Also, check out below the full codepen for this example:
I hope you have enjoyed this article and if you would like to get more articles about React and frontend development you can always sign up for my email list.