Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introducing Template Literals

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

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.

This video doesn't have any notes.

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

    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