Tagged Template Literals

  Рет қаралды 10,748

Steve Griffith - Prof3ssorSt3v3

Steve Griffith - Prof3ssorSt3v3

4 жыл бұрын

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.com/prof3ssorSt3v...
Array reduce method video: • JavaScript Array reduc...

Пікірлер: 44
@theartist8835
@theartist8835 3 жыл бұрын
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!
@richardschloss6410
@richardschloss6410 Ай бұрын
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 11 күн бұрын
I should add String.raw to my video todo list and talk about what it can and can't do.
@dputra
@dputra 5 ай бұрын
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.
@bruhmoment3731
@bruhmoment3731 Жыл бұрын
Rewatching this video after 7 months. I love the pace.
@golcuk2076
@golcuk2076 2 жыл бұрын
Clearest tagged template video ever, thanks Steve, u are the best.
@rebelmachine88
@rebelmachine88 4 жыл бұрын
Had NO clue about this one. Very helpful video, thanks!
@phanCAbe
@phanCAbe 4 жыл бұрын
Hey Steve. You make some damn fine content, really really excellent.
@techlover1219
@techlover1219 4 жыл бұрын
I love your content. Your content has improved me a lot♥️♥️
@Lior621
@Lior621 2 жыл бұрын
Such a clear explanation! thank you 😍
@LokeshTulsani
@LokeshTulsani 2 жыл бұрын
Very good Explaination. Thanks
@chesterxp508
@chesterxp508 2 жыл бұрын
Another very cool tutorial!
@howiewang4238
@howiewang4238 2 жыл бұрын
Thank you for this tutorial. It helped me.
@ProjectXH
@ProjectXH 2 жыл бұрын
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 😁
@ariyaman90
@ariyaman90 2 жыл бұрын
Hey Steve! Thank you. That was very very understandable
@demiancoorey2394
@demiancoorey2394 8 ай бұрын
Excellent explanation
@chyldstudios
@chyldstudios 2 жыл бұрын
Clear and to the point!
@youngluck66
@youngluck66 Жыл бұрын
Very clear. Thank you.
@khgriffi
@khgriffi 3 жыл бұрын
Very helpful. Thank you!!
@paulofernandoee
@paulofernandoee Жыл бұрын
Great video! Thanks.
@moooo1743
@moooo1743 2 жыл бұрын
trying to understand this on mdn was a nightmare, thanks Professor Steve!
@joshperry8032
@joshperry8032 Жыл бұрын
Great video, thanks :)
@hyeonseongnoh7742
@hyeonseongnoh7742 Жыл бұрын
Thank you!!! Kind video
@bruhmoment3731
@bruhmoment3731 2 жыл бұрын
Gosh you have a great voice!
@mostafagh3573
@mostafagh3573 2 жыл бұрын
great content thank u
@theoligarchist1503
@theoligarchist1503 3 жыл бұрын
cool, looks like a boon for generated JS , generated from other Languages :-)
@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
@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.
@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
@emmanuelyawson1622
@emmanuelyawson1622 3 жыл бұрын
Thanks, steve how do i get the coordinates appear in real time(updated with little change in position)
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 жыл бұрын
What coordinates? I'm talking about template strings and functions here.
@khgriffi
@khgriffi 3 жыл бұрын
@@SteveGriffith-Prof3ssorSt3v3 lol
@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.
@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. kzfaq.info/get/bejne/ZtFkgdqa0szXqnU.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
JavaScript ES6 Reflect Object
8:25
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 11 М.
Managing User Permissions with Bitwise Operators
16:17
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 7 М.
3M❤️ #thankyou #shorts
00:16
ウエスP -Mr Uekusa- Wes-P
Рет қаралды 11 МЛН
ОДИН ДЕНЬ ИЗ ДЕТСТВА❤️ #shorts
00:59
BATEK_OFFICIAL
Рет қаралды 8 МЛН
The day of the sea 🌊 🤣❤️ #demariki
00:22
Demariki
Рет қаралды 99 МЛН
Smart Sigma Kid #funny #sigma #comedy
00:25
CRAZY GREAPA
Рет қаралды 11 МЛН
TypeScript Wizardry: Recursive Template Literals
14:47
Tech Talks with Simon
Рет қаралды 36 М.
JavaScript Callback Functions
11:56
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 33 М.
Tagged Template Literals JavaScript
10:48
techsith
Рет қаралды 9 М.
The Hidden World of requestAnimationFrame
9:22
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 31 М.
JavaScript ES6 Template Literal Strings in FIVE Minutes
6:40
James Q Quick
Рет қаралды 13 М.
Tagged Template Literals
15:32
Kent C. Dodds
Рет қаралды 3,2 М.
Use Arc Instead of Vec
15:21
Logan Smith
Рет қаралды 137 М.
Sorting Complex Objects in JavaScript
10:29
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 21 М.
Template Literals (ES6) - Beau teaches JavaScript
9:43
freeCodeCamp.org
Рет қаралды 23 М.
3M❤️ #thankyou #shorts
00:16
ウエスP -Mr Uekusa- Wes-P
Рет қаралды 11 МЛН