Tagged template literals in Javascript
source link: http://www.js-craft.io/blog/tagged-template-literals-in-javascript/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK