Check out a free preview of the full Introduction to JavaScript course
The "Template Strings" Lesson is part of the full, Introduction to JavaScript course featured in this preview video. Here's what you'd learn in this lesson:
Brian explains how to display JavaScript variables in strings using backticks instead of single or double quotes.
Transcript from the "Template Strings" Lesson
[00:00:00]
>> Brian Holt: So we just did the sentence here. Hello plus first name, plus last name. This is quite burdensome, right to actually have to go and concatenate all the spaces together. It'd be better if there was a better way to do this, right? There is, there's a better way to do this.
[00:00:14]
>> Speaker 2: [LAUGH]
>> Brian Holt: So, thanks to recent revisions in JavaScript. There's now an easier way to do this, and it's with those backticks I was talking about. So make sure everyone can find the backtick. Again, if you're on an American keyboard, that is to the left of the one.
[00:00:33]
Not the tilde, right, that's what happens when you hit shift that. It's just that without shift, you get little backticks here, right. Now I can say hello. And then there's this curious thing you can do with dollar sign, curly brace. So curly braces are there next above the square braces, you have to hit Shift one which is next to p.
[00:00:58]
Again, on the American keyboard, and now I can put hello first name.
>> Brian Holt: So, we'll just start with that for just now and then we'll get to the other part of it.
>> Brian Holt: So let's talk about this for a second, dollar sign curly brace, and then inside of there, this can be bits of JavaScript, right?
[00:01:26]
So whatever the value of this inside of here is going to be outputted into that string, right. So if I say this refresh, now it says hello Brian. So this is just an easier way for us to make these big strings out of other strings work a little bit easier, right, rather than having to do plus this, plus space, plus that, right.
[00:01:46]
You can just do the dollar sign curly brace. And they're just relying on that being so unique that you would never accidentally put that into your strings, right? Even if you do, you can actually do a backslash right there and then it'll just,
>> Brian Holt: Right now if I go in here those say, hello first name, literally, right?
[00:02:09]
>> Brian Holt: So, now I can put a space in here, dollar sign curly brace last name,
>> Brian Holt: How are you? Let's make this a little bit bigger over here. So you can see here the, it's almost more like writing normal English. And here, again you can see hello Brian Holt, how are you?
[00:02:35]
And this is nice cuz I can come up here and say, like I can put my wife's name in there, Niki Holt. It says, hello Niki Holt, how are you? She'll be mortified to know that I was talking about her. No one tell her, please. [LAUGH]
>> Brian Holt: Questions about that?
[00:02:55]
So these are called template strings, and they're pretty new, from 2015 which is relatively new for JavaScript, which is a 25 year old language. So, I use them all the time, they're quite convenient, any questions?
>> Speaker 3: In this case, where does this space come from?
>> Brian Holt: So the space between Niki Holt, is that what you're asking?
[00:03:24]
>> Speaker 3: Yeah.
>> Brian Holt: Good question. Notice here that I literally just put a space here.
>> Speaker 3: Okay, so that's working?
>> Brian Holt: Yeah, so if I delete that, notice that NikiHolt becomes one word. Does that answer your question?
>> Speaker 3: Yeah.
>> Brian Holt: Cool.
>> Speaker 4: And then I'm just wondering how often new identifiers are added, like the dollar sign to JavaScript?
[00:03:47]
Is it updated regularly? How often do you have to go and learn these new tags and stuff?
>> Brian Holt: We're talking in too much of a history lesson, it used to happen very infrequently, and now it happens every year.
>> Speaker 4: Okay.
>> Brian Holt: So, there is a new revision of JavaScript every year that has, I'm gonna say one to ten features in it.
[00:04:06]
So, ES2015 or ES6 as it was previously called, which came out in 2015, had a lot of stuff in it. And now we get two or three features a year. So, this was obviously possible before, doing the old way that I showed you, right? This just makes it a ton easier to do it.
[00:04:27]
Very infrequently do we get new paradigms. The only one I can really think of that was totally new was generators. Everything else has been which we're not talking about generators today. That's above my pay grade. Does that answer your question?
>> Speaker 4: Yes, I do.
>> Brian Holt: Cool, anyone else?
[00:04:46]
Good questions, yeah.
>> Speaker 5: So for part of the sentence I put I am, and then dollar sign without a space, and bracket and then my age is one of the variables I did, and it does have a space between the M and my age. So, does the dollar sign, etc, automatically put in the space?
[00:05:09]
>> Brian Holt: Did you put a space between the two things?
>> Speaker 5: No, so if you put some text in between, those two, yeah, that. Is there any space that gets?
>> Brian Holt: Notice that it's all shoved together there.
>> Brian Holt: It's not going to automatically insert anything for you. It's gonna do exactly what you tell it to do.
[00:05:35]
One more thing about template strings. So if I wanna put a hard return in here. So if I hit enter a couple times, this is actually valid with templet strings. So now if I save this and run it again, notice that there's a lot of space in here.
[00:05:53]
You can't do this with single quotes or double quotes. So if I change this from a backtick to a,
>> Brian Holt: This is not valid because it doesn't know what to do about that. So, with backticks, you can also put hard returns in there.
>> Brian Holt: Great,
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops