String Interpolation

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