String Template Literals

[00:00:00]
>> WebDevSimplified: At the very beginning we had a question about back ticks for creating strings, and this is essentially where that comes in. You can use a back tick to define your string as well as a normal quote. Now this back tick is essentially the tilde key. It's directly above the tab key on your keyboard, and you can see instead of using quotes I can use a back tick to create my string. It works exactly the same as quotes if I just copy this into my application.

[00:00:23]
And we paste this down. You can see it prints out hi to my screen, and that works exactly the same as if I were using double quotes or single quotes to define my variable. So why in the world would we have a third way to create strings in JavaScript? Isn't 2 enough? Well, the reason for having this new way of creating strings is it allows you to embed variables directly into your string. Normally, if I wanted to combine together first name and last name, I would need to take my first name, followed by a plus, followed by a space character, followed by another plus and the last name.

[00:00:50]
This is a little bit difficult to read and hard to understand. So instead, string template literals make this much easier. Let's take a look at this code side by side. The first example is very similar, like we've already seen before. In the second example, we're using back ticks, and you'll notice inside those back ticks we're using a dollar sign followed by a curly brace, and then we have an ending curly brace.

[00:01:10]
Anything between those two curly braces will be executed as just normal JavaScript code. So we actually are taking this first name variable and it's essentially replacing this entire section, whose first name is. So in our case, it's replacing that with Kyle. It does the exact same thing with last name over here. It takes this entire section, replaces it with whatever is inside of it, which in our case is last name.

[00:01:30]
So this will print out Cook. So when we combine them together, it prints out Kyle Cook. This makes it much easier to deal with strings that have dynamic variables you want to inject in them because instead of having to keep doing this plus syntax and making sure you put spaces in the right spot, you can just write it directly all in line like this. And the interesting thing about this is it executes any JavaScript.

[00:01:49]
It doesn't just have to be a variable. For example, I could put 2 + 3 inside of here, and that's going to print out 5. You can see over here we have 5 being printed out, so it doesn't matter what you put in here if it's a variable, an array, an object, a function or anything, it'll just execute whatever's in there, whatever it returns, it'll replace this entire thing with that particular value. So this is again just a helpful way to be able to create strings that have variables or values directly inside of them.

[00:02:14]
Now this is also how you define multi line strings inside JavaScript. Normally we talked a little bit about how you can use essentially the symbol with the forward slash or I'm sorry, the backslash followed by an n to add in essentially a new line character which adds a space inside there. We can also just create essentially our strings, or not an array, a string by using these back ticks, and then whatever we put inside of here, let's just say hi.

[00:02:35]
We can just put an enter, and this allows us to still keep writing our string. We can write a bunch of stuff inside of the string, it doesn't really matter. If we get rid of these variables we're not using, we can see that when I log this out, it's actually logging that string and preserving all that different white space for all the different enters and so on that we have inside of our code. The important thing to understand about this if you use strings like this is sometimes you'll accidentally have like a tab in here somewhere because of the auto formatting or whatever.

[00:03:01]
If I save, that tab actually makes it into my final ending code. So you have to remember all the white space, not just the new line characters, any spaces, tabs, and so on that you have, they're all going to show up inside your code when you use these multi line strings. This isn't something I use all the time when it comes to multi line strings, but the ability to interject variables into my strings is something I use literally every single day when I'm writing out code.

[00:03:22]
So this back tick symbol is very, very common. So when it comes to using template literal strings, you can use them all the time if you want. Some people just only use the back tick symbol. Personally, I use them whenever I want to interject variables inside my code or if I need a multi-line string. Otherwise I just stick with the regular double or single quotes. But again, it's entirely personal preference and even in Prettier you can configure it to always use these back tick symbols if that's what you prefer.

[00:03:47]
It's mostly personal preference though. Now, the final thing I want to talk about in this advanced variable section is again another tricky topic, so if you're not paying attention, please come back. And that is the idea of the this and the new keyword. Now we could go incredibly deep into this topic. There's a lot of things, and I'm sure there's some other courses on Frontend Masters that go really deep in this, but I'm really only going to go through at the level that's important to understand for a more surface level before we dive into some of the more deep stuff.

[00:04:11]
So in this final section, I want to talk about this versus the new keyword, and these are really deep keywords. I mean, you can go incredibly deep in them, and there's probably different courses on Frontend Masters that will discuss the depth of them, but I want to go at a more surface level to really understand what they are and why they're useful and where you're going to see them in real world JavaScript.