Тёмный

Tagged Template Literals 

Steve Griffith - Prof3ssorSt3v3
Подписаться 102 тыс.
Просмотров 11 тыс.
50% 1

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.
Code from video: gist.github.co...
Array reduce method video: • JavaScript Array reduc...

Опубликовано:

 

29 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 44   
@bruhmoment3731
@bruhmoment3731 2 года назад
Rewatching this video after 7 months. I love the pace.
@techlover1219
@techlover1219 4 года назад
I love your content. Your content has improved me a lot♥️♥️
@rebelmachine88
@rebelmachine88 4 года назад
Had NO clue about this one. Very helpful video, thanks!
@theartist8835
@theartist8835 4 года назад
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!
@phanCAbe
@phanCAbe 4 года назад
Hey Steve. You make some damn fine content, really really excellent.
@richardschloss6410
@richardschloss6410 4 месяца назад
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())) ```
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 месяца назад
I should add String.raw to my video todo list and talk about what it can and can't do.
@dputra
@dputra 8 месяцев назад
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.
@LokeshTulsani
@LokeshTulsani 2 года назад
Very good Explaination. Thanks
@paulofernandoee
@paulofernandoee Год назад
Great video! Thanks.
@joshperry8032
@joshperry8032 Год назад
Great video, thanks :)
@youngluck66
@youngluck66 Год назад
Very clear. Thank you.
@hyeonseongnoh7742
@hyeonseongnoh7742 Год назад
Thank you!!! Kind video
@rohanbaikar
@rohanbaikar 4 года назад
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
@joaovaz3473
@joaovaz3473 4 года назад
Check out MDN (Mozilla Developers Network) page on tagged template literals, it always has cool examples on its documentation
@bruhmoment3731
@bruhmoment3731 2 года назад
Gosh you have a great voice!
@demiancoorey2394
@demiancoorey2394 11 месяцев назад
Excellent explanation
@mostafagh3573
@mostafagh3573 2 года назад
great content thank u
@golcuk2076
@golcuk2076 2 года назад
Clearest tagged template video ever, thanks Steve, u are the best.
@silentstorm8470
@silentstorm8470 4 года назад
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", email: "derek@awesome.com" }; 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 function??????? console.log(JSON.stringify(user, replace));
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 4 года назад
This video is about tagged template literal functions, not JSON.stringify. They are different things. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-0k4NwimfszA.html - here is my video on stringify.
@silentstorm8470
@silentstorm8470 4 года назад
@@SteveGriffith-Prof3ssorSt3v3 srry i just asked here, i didnt know where to ask adn i didnt know that you have a video about stringify thanks
@MrKelbessa
@MrKelbessa 4 года назад
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.
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 4 года назад
I have considered it and discussed it with another voice actor I know. Just a matter of having the time to do it.
@MrKelbessa
@MrKelbessa 4 года назад
Steve Griffith Good luck Sir, I’m rooting for you
@khgriffi
@khgriffi 3 года назад
Very helpful. Thank you!!
@ProjectXH
@ProjectXH 3 года назад
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 😁
@moooo1743
@moooo1743 2 года назад
trying to understand this on mdn was a nightmare, thanks Professor Steve!
@theoligarchist1503
@theoligarchist1503 3 года назад
cool, looks like a boon for generated JS , generated from other Languages :-)
@howiewang4238
@howiewang4238 3 года назад
Thank you for this tutorial. It helped me.
@ariyaman90
@ariyaman90 2 года назад
Hey Steve! Thank you. That was very very understandable
@chesterxp508
@chesterxp508 2 года назад
Another very cool tutorial!
@Lior621
@Lior621 2 года назад
Such a clear explanation! thank you 😍
@chyldstudios
@chyldstudios 2 года назад
Clear and to the point!
@techlover1219
@techlover1219 4 года назад
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.
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 4 года назад
You must embed a specific object property ${myObj.prop}. If you just try to embed the whole object ${myObj} then you will always get [object Object] because it just does a conversion to String. The String equivalent of EVERY object is [object Object]. This is why you can't use Objects as a keys inside other objects. Every object key must be a String or a Symbol.
@devkushwaha6682
@devkushwaha6682 4 года назад
According to your Time there I think 4:00 am right now, brother you are making video at that time
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 4 года назад
I schedule the release of my videos. Many of them at 4am UTC.
@emmanuelyawson1622
@emmanuelyawson1622 4 года назад
Thanks, steve how do i get the coordinates appear in real time(updated with little change in position)
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 4 года назад
What coordinates? I'm talking about template strings and functions here.
@khgriffi
@khgriffi 3 года назад
@@SteveGriffith-Prof3ssorSt3v3 lol
Далее
JavaScript ES6 Reflect Object
8:25
Просмотров 11 тыс.
TypeScript Wizardry: Recursive Template Literals
14:47
JS Code Structure Moving Beyond Beginner
21:31
Просмотров 13 тыс.
The Hidden World of requestAnimationFrame
9:22
Просмотров 32 тыс.
Tagged Template Literals JavaScript
10:48
Просмотров 9 тыс.
ES6 Iterator & Generator Fundamentals
18:18
Просмотров 31 тыс.
Template Literals (ES6) - Beau teaches JavaScript
9:43
Tagged Template Literals
15:32
Просмотров 3,2 тыс.
Template Literals & Tags in JavaScript
8:20
Просмотров 1,1 тыс.
JavaScript Callback Functions
11:56
Просмотров 33 тыс.