"Node.js Basics 2017" was retired on September 1, 2022. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Getting Started With ES2015!
You have completed Getting Started With ES2015!
Preview
Template literals are very similar to string literals, but they use backticks (`) instead of single quotes (') or double quotes (").
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
[SOUND] Hi, I'm Joel, a JavaScript
developer and teacher at Treehouse.
0:04
I wanna show you how to
use template literals.
0:09
Template literals create
strings in JavaScript.
0:12
But unlike the quoted
strings you're used to using,
0:15
template literals have some great
features worth knowing about.
0:18
Let's take a look now.
0:22
You know how to create string literals
using single quotes and double quotes.
0:24
And writing template literals is
almost the same, just with backticks.
0:29
The backtick character is in the upper
left-hand corner of a QWERTY keyboard, and
0:34
it shares a key with the tilde.
0:39
All three of the expressions you see here
will evaluate to the exact same string.
0:42
Let's make some template literals.
0:47
Launch a workspace on this page, or
0:49
download the project files to
work on your local machine.
0:51
Open index.html.
0:55
This is an HTML page with several areas
where we'll be using template literals.
0:57
At the bottom here, you see there's three
JavaScript files that we're loading.
1:04
And you can see them listed
out here on the left.
1:09
Let's preview this page in the browser.
1:12
Here are the areas.
1:16
We'll start with the Basic
area up at the top.
1:18
So I'll open basic.js, and
you can see that we're creating
1:22
two strings already and
concatenating them together.
1:26
And then I'm going to uncomment this, and
1:31
you can see we're placing the result
inside of a div with the class basic.
1:34
If I save this, and
switch over to our browser and refresh,
1:39
you can see our two strings
are being placed inside.
1:44
So, let's go back and
create a template literal.
1:49
So I'm gonna copy this and
just paste it below.
1:53
And I'll change this to templateLiteral.
1:57
And I'll use backtick characters.
2:02
So now that we have our template literal,
let's concatenate it onto the end and
2:11
save, and then we should see our
template literal appear, our string,
2:16
template literal string.
2:21
And if we inspect it, we'll see it was a
paragraph element just like these others.
2:23
So great, template literals work just
like strings, but what else can they do?
2:30
Well, they're very helpful
with multi-line strings.
2:36
Let's switch back to the code editor and
2:40
open up multiline.js, and
I'll show you what I mean.
2:43
So here we're creating
an unordered list of fruits.
2:48
And you can see in JavaScript,
in order to break to the next line,
2:52
if you're creating a multi-line string,
you need to add a plus at the end.
2:56
And I'm just gonna change
this a little bit.
3:01
Because the JavaScript interpreter
disregards white space,
3:04
I can hit enter here and
bring these other lines in next to it.
3:11
And that'll be functionally the same, but
3:17
I just find it to be a little
more readable and manageable.
3:19
So let's uncomment this line, and
3:23
you can see that we're taking our
multi-line string, our unordered list, and
3:26
we're putting it inside the div
with the class of fruits.
3:31
So if I save this and
switch over to our browser and
3:35
refresh, you can see our list made it in.
3:39
Now let's use a template literal to
place a list of vegetables in this div.
3:44
So back in multiLine.js,
I'm gonna copy our constant declaration
3:51
fruit list and paste it below and
we'll change this fruit to vegetable.
3:57
And we'll put a potato in there.
4:05
And an onion, and
let's put broccoli in for the last one.
4:11
So to create this as a template literal,
let's use backticks.
4:19
And we just need to place
backticks at the front and the end
4:23
of this, and then we can delete
all of these quotes and pluses.
4:29
Like so,
now this is a lot cleaner than the string,
4:39
the multi-line string above.
4:44
And to even clean it up some more, we can
move this backtick to the line above,
4:47
and we could put this on
its own line as well.
4:53
And really it looks just like HTML,
so it's a lot more readable.
4:57
And let's go ahead and put it on a page.
5:02
So I'm gonna copy this line,
paste it below, and
5:05
we'll select the correct div,
which is gonna be vegetables.
5:09
And then at the very end we'll put
our new vegetable list in there.
5:15
So if I save it, switch over and refresh,
we see that our list made it in.
5:22
And if I inspect, it is indeed
an unordered list just the same
5:30
way that our fruits is an unordered list.
5:35
So great, I wanna show you one more
thing about template literals and
5:40
I'll do that in the next video.
5:45
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up