Preview
Video Player
00:00
00:00
Basic and Multiple Line Strings
5:48Template literals are very similar to string literals, but they use backticks (`) instead of single quotes (') or double quotes (").
[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