 So I think most of us are used to using single or double quotes around string literals like this. But have you heard of temperate literals with Bactics? Today on Browser Native, we're going to talk about template literals. Bob, how about you show us an example? Absolutely. In fact, I'll admit that I got confused by this the first time I saw it. I was like, what the heck is this, right? Yeah, me too. I was coding kind of like the comment that says the old way, right? Where I would concatenate everything and just put all these plus signs in the middle. So hard to read. So hard to read. It is really hard to read. So once I figured it out, I discovered that template string literals, or they're technically called template literals, they're delimited with Bactics instead of single or double quotes. And then you can put a dollar sign and squigglies. And inside the squigglies, you can put, that's a technical term, right? Squiggly. It is. Absolutely. Inside there, you can put any JavaScript expression. Right. So if you look at my example here with the string template and without there, I'm just putting A and B in there, which is one and two. And here's the result. So you can see. And we'll put the URL of the sample in the comments so you can go check it out. But anyway, that is much more readable, I think. Yep. It almost reminds me of React. I don't know. What do you think? A little bit. Yeah, it does. It's very similar. It's not quite. No, no, but it's just so much easier to know, to read and to understand where the variables are going to be replaced. I mean, and for those of us who write C sharp, they have this sort of similar thing where you put the dollar sign. At the beginning of the quoted string, and then you can use the braces inside and replace what's inside of the braces. It's very similar. So this feels like a good transition. Like it just is nice and simple and clean to read. You know, it's not confusing. It's not like the C sharp C for the formatter function where you put the placeholders with like the 012. And then you have. Oh, that was really cryptic. That's the most. I'd rather do the concatenation, honestly. Me too. Agreed. Agreed. So yeah, I think this is super powerful. Of course, there's always a slippery slope. Yeah. And the slippery slope is now you have to escape. You have to have a way of escaping certain characters inside of the back tick thing. And if you used to like to use double quotes, so that you could put an apostrophe in your string. Well, you can put your apostrophes, but if you ever need a back tick, well, so it uses the backslash type. Notation. So backslash back tick. Say that three times fast or backslash dollar sign is another one that you suddenly need to escape. And of course backslash backslash and all those fun things. So you got to deal with that. Yeah, I'm fine with it though. I like it. Something I love though is the multi line. So you can actually hear at the bottom, I've got a multi line template string. And again, it starts feeling almost like react where I can put my mark up in there and put it kind of nice. And it's going to, it's going to just ignore the extra space so that it comes back, you know, the HTML in this case, it just kind of works, but right, which is the react like feel that it's actually the JSX TSX. Correct. It's not actually react itself. It's the JSX TSX that it's kind of similar to. Yeah, agreed. I think it's just an implementation of maybe. So these are awesome. But what if I wanted something really custom some custom way to format a string. You got anything that is a great question. And I'll tell you a good question is a question I know the answer to. And that you have a great question is a question I have a demo for. Nice. So here it is. So in this case, you know, I got to admit this is a cool feature, but I had to kind of contrive the example. So if you look at this example, I've made a shout function that just kind of yells at you. It makes some of the stuff into uppercase. And if you look down towards the bottom, I'm going to shout. And I put the word shout before the first back tick without any spaces or parentheses or anything. So I'm going to say shout. Did you know the mascot name is a blank mascot species? And so what you get back is, you know, did you know Parker is a porcupine? Right? It shouts at you. So, so that's what that is. But the important thing is the template function itself. So you can see shout there. And you get your template function gets called with the first argument is always an array, which is all the little pieces of strings that were between the templates. And then it gives you each one of the template arguments expression results as an argument. So you can see here I'm actually using a template string literal inside of my template function just because I can and I wanted to be extra difficult about it. So I'm just taking and returning those little string fragments and the name, but I'm shouting the name by turning it into uppercase. That's very cool. I actually saw a use of this. So I have mentioned several times on several different things that I've been exploring web components. And there is a, I'm going to call it a helper library. I don't want to really call a framework, but I'm going to call it a helper library called lit. And lit has a, it has a sub component that handles HTML string concatenation and the way that it works is to create a template function they named HTML. So you type HTML back tick and then your HTML with your strings replacing and you can replace function calls and click events and all that kind of stuff. And it's HTML template literal function manages the string concatenation for that. And it's super powerful and very cool. So I think there are use cases for it. It's just going to take some new imagination for where it's useful. Yeah, well, thanks for pointing that out. So I was going to ask I've, I've, I've found this out when I was researching the video, and I've never actually used it. So yeah, if people out there in YouTube land. I would love to know if you have ever used creative uses for creative uses like what uses have you found for template functions. We even know they existed. And what other topics would you like to see? I want to thank you for watching this video, by the way. Please, if you enjoyed the video, if you got something out of it, give us a like. And we'd love it if you subscribe to the Voitanos channel so that you'll get notified of all the new videos. And please check out the sample and we'll see you in the next one. Thanks. Bye.