It's time for another ESX topic template string literals. Now the name that achma chose to attach to this new feature really doesn't describe what it is. Basically, it's just another way to enter strings. One once again, this f6 feature is supported by the latest versions of all modern browsers. So if you're doing something in modern browsers or something in node, this feature would be supported. Let's take a look at how it works.
I'm going to open the console. I've already entered a few lines of JavaScript here in the console. First, we declare a variable name and we assign it a value of Jas. Then we declare another variable and assign it a value of Hello concatenated with the name variable concatenated with an X, exclamation point, and then we log that. Let's go ahead and press return. Hello, James with an explanation point.
That's what we expected to see. By the way, just a note on this undefined that you've probably been noticing in the console whenever you enter anything, why does that show up. Basically, if you enter something in the console that does not have a return value function without a return value, undefined is displayed. So that's why that keeps showing up. Now let's look at how we would do this exact same statement. With a template string literal.
As I mentioned, it's another way of doing a string. So I'm going to press the up arrow, bring that statement back and I'm going to make a change. Going to, I'll just erase this whole line here and start over again. To begin entering a template string literal you must use a back tick. That is the character that's usually right below the tildy, which is in the upper left hand corner of your keyboard. That particular character indicates a template string literal.
Now we can start entering the text that we want to include. Now when we want to include a variable as a part of it, we have to use $1 sign, and then enclose that variable inside of curly braces. So inside of that I will enter a name, then we can continue with the text. Notice what we're able to avoid is the concatenation characters and opening and closing each string with quotes. Finally, I have to close this template string literal with another backtick. Okay, so the purpose of this is just to make it easier or allow you to enter a lot of text, including variables and whatnot using fewer characters.
You can really Choose whichever method you want. Let me go ahead and press return. And as you can see, the same results are shown. Hello James. exclamation point, I put a space before the exclamation point. So it's not exactly the same, but you get the idea.
So wanted to make you familiar with this. You will probably see it at some point if you don't choose to use it on your own. Once again, it is an ESX feature. So make sure it's supported with whatever browsers or what ever environment you choose to put your JavaScript in.