Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Template literals get their name from their ability to evaluate expressions. Think of a form letter template with blanks to hold names or numbers that can be filled in later: "Dear ______, Thank you for your business on ______! Sincerely, Management" Similarly, values can be filled, or interpolated, into template literals, to be evaluated when the program runs. Let's get a feel for how this works.
Practice Template Literals
To help make what you learned stick, try this short practice workshop on template literals.
In JavaScript, you will often need to
show a value that doesn't exist yet.
0:00
Let's say you wanna greet
a user when they log in.
0:05
The user's name can't
be known ahead of time.
0:08
So your program would need to combine
the stored text, hello, nice to see you,
0:10
with a person's name, when they log in.
0:15
Often this is done by
concatenating values onto strings,
0:18
which can be a little hard to read.
0:22
Other languages use placeholders inside
strings that can be evaluated later.
0:24
This is called interpolation.
0:29
Now, with template literals,
JavaScript can also interpolate.
0:32
The syntax might seem odd at first.
0:36
But once you're used to it,
it's a lot easier to read and work with.
0:38
The dollar sign with curly brackets
are used to mark the dynamic
0:43
values in the template literal.
0:47
When the program runs, the contents of
the curly brackets are evaluated and
0:49
placed, or interpolated, into the string.
0:54
Let's get a feel for
interpolation in the console.
0:59
I'll start by creating a variable name.
1:02
And I'll assign the string Gary to it.
1:04
Now, we can greet Gary, By interpolating
name into our template literal here.
1:08
And you can also enter any JavaScript
expression into the curly brackets.
1:16
So I'll do some math inside and
you can see what that looks like.
1:24
Let's go ahead and
use interpolation in our project.
1:32
So if I open up interpolation, you can see
that there's a function at the top, called
1:36
like, that accepts an argument and then it
returns I like, whatever you passed in.
1:42
And here we're saying, I like apples.
1:47
And we're concatenating that
string with two paragraph tags.
1:50
And if I uncomment this last line, we're
placing the paragraph element on the page.
1:54
So I'll save that and refresh.
2:01
And you can see we get, I like apples.
2:04
Now, instead of saying,
I like apples, let's say,
2:06
I like apples, but I love oranges.
2:10
And we'll use interpolation.
2:13
So I'll copy this function,
Below, and I'll rename it love.
2:15
And we'll use template literal here.
2:26
And we'll interpolate our variable
into the template literal.
2:32
So now to output it, we're gonna say,
2:37
I like apples, comma, but I love oranges.
2:42
And we'll save that.
2:50
So if I refresh the browser,
okay, good, we got that.
2:52
But we did have an issue, these two
strings are butting into each other.
2:57
And that's because I forgot
to put a space here.
3:02
So, I just wanted to show you that,
3:05
cuz that is a common mistake that is made
with concatenating strings together.
3:07
And if we use placeholders instead,
I'm just gonna replace these
3:14
function calls with placeholders,
they're just easier to see and
3:19
reason about, and
they're a little less cluttered.
3:24
So, I'll place like back in here and
apples.
3:27
I like apples, but I love oranges.
3:33
And if we save that, switch over,
You can see it's working.
3:40
So you can pass any kind of expression,
even a function expression,
3:47
into these curly brackets.
3:51
And that combined with the multiline
3:53
management of strings make template
literals a really powerful tool.
3:57
Give template literals a try in
some of your JavaScript projects.
4:02
Thanks for joining me.
4:05
I'll see you around
4:07
You need to sign up for Treehouse in order to download course files.
Sign up