Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

String Interpolation

4:08 with Joel Kraft

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.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Practice Template Literals

To help make what you learned stick, try this short practice workshop on template literals.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

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

You need to sign up for Treehouse in order to set up Workspace

Sign up