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 Introducing Template Literals!
You have completed Introducing Template Literals!
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
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 back ticks.
0:29
The back tick character is in the upper
left hand corner of a QWERTY keyboard,
0:34
and 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, and
1:04
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
1:20
see that we're creating two strings
already and concatenating them together.
1:25
And then I'm going to un-comment 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,
And I'll use back tick characters.
1:57
So now that we have our template literal,
2:12
let's concatenate it onto the end and
save.
2:14
And then we should see our template
literal up here, our string,
2:17
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.
2:30
But what else can they do?
2:35
Well, they're very helpful
with multi-line strings.
2:37
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:49
And you can see in JavaScript in order to
break to the next line if you're creating
2:53
a multi-line string, you need to
add a plus at the end, and I could.
2:57
I'm just gonna change this a little bit,
because the JavaScript
3:02
interpreter disregards white space,
I can hit Enter here.
3:06
And bring these other lines in next to it,
and that'll be functionally the same,
3:11
but I just find it to be a little
more readable and manageable.
3:19
So let's un-comment this line, and
3:22
you can see that we're taking our
multi-line string, our unordered list,
3:25
and we're putting it inside
the div with a class of fruits.
3:30
So if I save this and
switch over to our browser,
3:34
and 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
3:50
declaration fruitList and paste it below.
3:55
And we'll change this fruit to vegetable.
4:00
And we'll put a potato in there.
4:05
And an onion.
4:11
And let's put broccoli in for
the last one.
4:14
So to create this as a template literal,
let's use back ticks.
4:19
And we just need to place back ticks
at the front and the end of this,
4:23
and then we can delete all
of these quotes and pluses.
4:29
Like so, now this is a lot cleaner than
the string, the multi-line string above.
4:38
And to even clean it up some more,
4:46
we could move this back
tick to the line above, and
4:49
we could put this on its own line as well,
and it looks just like HTML.
4:53
So it's a lot more readable, and
let's go ahead and put it on the page.
5:00
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:08
And then at the very end,
we'll put our new vegetableList 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,
5:30
just the same way that our
fruits is an unordered list.
5:34
So great, I want to show you one more
thing about template literals and
5:39
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