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
[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