2.2 Concatenation and Interpolation - Video Tutorials & Practice Problems

<v Instructor>Two of the most</v> important string operations are concatenation which involves putting strings together, and interpolation which involves putting variable content into a string. So let's take a look at these examples to understand how that works. Let's get back to node. We'll start off by combining two strings using the plus operator. foo and bar here by the way. Sometimes go by the fancy name of medicine tactic names or medicine tactic variables. They're the things that you use when you can't think of anything else to use. So you can look at the reference in the text for those. I'm also going to add in a comment. This is the kind of thing that is in the text. Oops, let me put that here, semicolon. We can add in a comment. So JavaScript comments start with this double slash and then extend to the end of the line. I won't generally put these in because in the screencast, I can just explain what's going on. But in the text, sometimes I add these little comments to make things clearer. So I just wanna explain what that means. So this does what you might expect. It just puts them together. This is kind of a strange notation if you really think about it, because plus is usually commutative. So foo plus bar is bar plus foo in mathematics, but it's clearly not here. It's bar plus, in fact, we can mix them here. I'll do single quotes just to show, it doesn't matter. So this is barfoo. Some languages actually use something other than a plus sign. So for example, PHPs has a dot, which actually makes a little more sense. But this is actually very common notation, not just in JavaScript but in lots of other languages. And so it's good to get used to it. So this is concatenation, just taking two strings and putting them together. Let's combine this idea with a really important concept in programming called variables. You've probably encountered this before in another context. But if you haven't, let's talk about it now. There's also some JavaScript specific things involved. So a variable is essentially a way to give a name to some piece of data. In this case, a string. So for example, let's define a first name and a last name for a potential user. I'll just use my name. And in JavaScript, the current cutting edge standard way to do this is using a keyword. This is something that's specific to the JavaScript language called let. let firstName, and then we'll use the assignment operator which is equals, and then lets put my first name. And I'll do let lastName to be my last name, like that. Now the convention in JavaScript for variable names is to use what's called camel case. Sometimes read like this Camel. So named because it looks like the humps on a two humped Bactrian camel. The convention for variable names is for the first letter to be lowercase, and then subsequent word separators are uppercase. So you would say something like thisIsAVariableName, like that. By the way, there is another very common way of assigning variables. We can say something like this var. This is a little older, but it's still an extremely common use as of this recording. So it's really important to know that it's basically equivalent. It's not exactly equivalent to let and you can Google around to find the distinction. It's really not that important at this level. It's rarely important, which is why people often use them interchangeably. But you can use something like var x equals foo like this. So that's the same thing, basically. But anyway, I'm gonna use let throughout this tutorial, because that is the current modern way to do things. And we can evaluate these like this. We can just ask the REPL, what is firstName like that. Just evaluates like as the string that it is. And we can concatenate them like this. You can just do this, firstName plus lastName. And of course, it's better to have a space in there. So we can do plus space plus lastName. You can see how this might be the kind of thing you might want on a web application to display the name of the user. Now that we have the variables firstName and lastName, let's take a look at the second way of building up strings other than concatenation called interpolation. This syntax I'm gonna be showing you is relatively new as JavaScript goes. It's called the backtick syntax, also called template literals. This was part of a big update to JavaScript known as ES6. ES is short for ECMAScript, which is the technical name for the JavaScript standard. There's some more information about this in chapter one of the text. But for our purposes, what's important to know is that there was this big update and there's this new feature that we can now use in our programs. And it's really nice. So suppose I wanted to say firstName is my first name, like this. You could say firstName plus, and then add in a space like that. Well, there's a way to do this that puts everything kind of on an equal footing. Instead of having firstName and then plus, you can do backtick. And there's a special syntax, it's dollar sign and then curly braces. A dollar sign, open curly brace, close curly brace, and then everything is inside backticks like this. firstName is my first name. So this really captures the way I think about this. And I think that once you get used to it, it feels a lot more natural than concatenation. Because really, what I want to say is firstName is my first name, where you just substitute in whatever this is. So here it is, Michael is my first name. So this template literal syntax is really useful. And we can use it to build up the firstName, lastName we saw before. Go up arrow. So firstName plus blank string plus lastName. Or we can do this, firstName space. So this just takes the values Michael and Hartl and put them into the string like that. So these two are equivalent, but I find the second to be a lot more natural.