Preview
Video Player
00:00
00:00
String Interpolation
4:08Template 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.
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