Preview
Video Player
00:00
00:00
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 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, the user's name
0:05
can't be known ahead of time so program
would need to combine the stored text,
0:09
'"Hello nice to see you" with
the person's name when they log in.
0:13
Often this is done by
concatenating values on the 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 but
once you're used to it.
0:36
It's a lot easier to read and work with.
0:39
The $ sign with curly brackets,
0:43
are used to mark the dynamic
values in the template literal.
0:45
When the program runs the contents of
the curly brackets are evaluated and
0:49
placed or interpolated into the string.
0:55
Let's get a feel for
interpolation in the console.
0:58
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, so
1:32
if I open up interpolation you can see
that there's a function at the top call
1:36
like that except an argument and then it
returns 'I like' whatever you passed in.
1:42
And here we're saying I like apples and
1:47
we're concatenating that string
with two paragraph tags and
1:50
if I un-comment this last line we're
placing the paragraph element on the page.
1:54
So I'll save that and refresh, and
you can see we get I like apples.
2:01
Now instead of saying I like apples
let's say, I like apples but
2:08
I love oranges, and will use
interpolation so I'll copy this function.
2:12
Below and I'll rename it love.
2:20
And we'll use template literal here.
2:27
And we'll interpolate our variable
into the template literal.
2:32
So now the output is we're gonna say,
2:37
I like ('apples') +',
but' I love + ('oranges').
2:41
And we'll save that.
2:50
So if I refresh the browser.
2:53
Okay good.
2:55
We got that but we did have an issue,
this these two strings
2:56
are butting into each other, and that's
because I forgot to put a space here.
3:00
So I just wanted to show you that
cuz that is a common mistake that
3:05
is made with concatenating
strings together.
3:10
And if we use placeholders instead,
3:14
I'm just gonna replace these
function calls with placeholders.
3:16
They're just easier to see and reason
about and they're a little less cluttered.
3:22
So I'll place like back in here and
apples.
3:27
I like apples.
3:33
But I love oranges.
3:35
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 into these
3:47
curly brackets, and
that combined with the multi-line
3:51
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:06
I'll see you around.
4:07