Tagged Template Literals

Template literal strings are great for embedding (interpolating) variables and expressions inside JavaScript strings.
They also include a feature called tagged template literals that let you create a function which will give you granular control over all the strings and expressions inside the template string.

[bruhmoment]

Rewatching this video after 7 months. I love the pace.

[theartist]

i don't know why you and dcode has far less subscribers although you both are among the best ! Thank you for the effort you put into this. keep up the amazing work!

[dputra]

This is a great way to make html templates using vanilla js. It's what I've been using and it works 👍

Tips:

1. Replace null valued variables to empty strings. This will allows you to do conditional rendering similar to react using the && operator.

2. Join array variables automatically so you can render looping template (cards, table rows, etc.) cleanly.

3. Use "html" as your tagged template literal function name so vscode extensions will pick it up and format them as html.

[golcuk]

Clearest tagged template video ever, thanks Steve, u are the best.

[richardschloss]

Now (3 years after the video was posted) there's a pretty neat feature `String.raw`. It helps simplify the function at 10:25 to a one-liner:
```
const f = (strings, ...values) => String.raw({ raw: strings }, ...values.map(i => i.toUpperCase()))
```

[techlover]

I love your content. Your content has improved me a lot♥️♥️

[phanCAbe]

Hey Steve. You make some damn fine content, really really excellent.

[moooo]

trying to understand this on mdn was a nightmare, thanks Professor Steve!

[rebelmachine]

Had NO clue about this one. Very helpful video, thanks!

[ProjectXH]

Thanks for putting the effort to make this video.
This is the first time I know about tagged template literals.
Also, you sound a bit like a calmer RDJ 😁

[ariyaman]

Hey Steve! Thank you. That was very very understandable

[howiewang]

Thank you for this tutorial. It helped me.

[rohanbaikar]

Can you give more examples or provide a link or something inorder to have a more clear idea of how to implement this concept its sure interesting though

[techlover]

Thank you again. I have a question about the template literal..
When i am using template literal to print a object it is showing [object Object]..but when i am using the traditional way, it is showing the value of the object.
Please explain the reason of this behaviour.

[emmanuelyawson]

Thanks, steve how do i get the coordinates appear in real time(updated with little change in position)

[MrKelbessa]

Hey steve great contents. So here comes the weird suggestion. Have you ever thought about doing a voice over work or reading an audio book? I just think you should at least look in to it. You have a great voice. Any way i love your javascript lessons thank you for making videos.

[theoligarchist]

cool, looks like a boon for generated JS, generated from other Languages
:-)

[devkushwaha]

According to your Time there I think 4:00 am right now, brother you are making video at that time

[silentstorm]

im back again to ask look at this code (i couldnt understand how the keys and value of the objects are passed as parametres on the function)

this is the code:

const user = {
id: 101010,
name: "Derek",
};


function replace(key, value) {
if (typeof value == 'number') {
return undefined;
}
if (key == 'email') {
return ' remover for privacy';
}
return value;
};

//when i console this how does the keys and values from user object are used as parametres in replace
console.log(JSON.stringify(user, replace));