This course has been updated! We now recommend you take the JavaScript: The Recent Parts course.
Transcript from the "Template Strings" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Kyle Simpson: We're going to go back to our little side by side adventure here and do some more comparison. We're gonna talk about a simple really, little feature added in ES6, but it's one of those delightful features. It's not necessarily hugely groundbreaking or gonna radically change the way you approach your code or even express things.
[00:00:30] But it's more delightful in this sense and that does create less of the visual clutter that our readers need to deal with. So let's talk about a scenario like this, let's say that I have name= "Kyle"; and let's say orderNumber = "123"; and total =,
>> Kyle Simpson: 319.72, okay, let's make it 319.7.
[00:01:15] All right, so if I were going to make a string to print out some message. Say I was printing out a receipt, if you will, it's going to print out some message that included these values along with some text. That message might, for example, look like this message.
[00:01:34] Hello name, your order, and, at this point, I'm running out of line room. So I want to break onto the next line, so I'm gonna do, you might have seen before, the trick of breaking onto multiple lines by putting a backslash at the end of the line. Officially, that's called a line continuation.
[00:01:56] So I'm gonna break onto the next line and say your order and I'm going to say + orderNumber,
>> Kyle Simpson: was, and now I'm at the end of this line so instead of doing a line continuation I'm just gonna do a plus. Go to the next one and let's go ahead and put the dollar sign symbol in here for this matter.
[00:02:23] So your total, so I made this string, put some values in, making this stuff on the fly. Okay, so let's evaluate what's happening here. What's happening is that I am, what is called interpolating, these values into the bigger string. That word interpolating is not something I made up.
[00:02:51] That's a thing that other people have made up, it's an actual feature in certain languages. And we're doing so manually with strings and string concatenation because up to this point, JavaScript hasn't supported any way to do interpolation. So along comes ES6 and they decide to invent this feature that's going to allow us to do interpolation.
[00:03:16] But instead of calling it interpolation, they give it this other name which is really terrible and confusing. They call them template strings or template literals. Now the word template has a fairly strong meaning to most people. And I'm willing to bet that you listening to this. You're probably, when I say the word template, what comes to your mind is the idea that I have some sort of basic set of value that I can recreate every time and give it new values to be inputted into it.
[00:03:48] So I have this thing that I can remake over and over again with new data, every time. That's what most people think of when they think of a template. So when I show you this feature and I tell you that they called it template strings or template literals you're going to think, I'm creating this template that I can rerun during this and every time.
[00:04:04] And that's not what they mean by the word template. Okay, so before and after here, let's start out with the same vars. But now to create my message. What I'm gonna be able to do is interpolate these variable expressions directly into the string. In PHP, you might be familiar, if I'm recalling correctly, it's in double quotes if you do a dollar sign variable name instead of a double quote, it automatically replaces that with the value of that variable.
[00:04:36] That's automatic interpolation, so we're gonna do something of the sort here. But we can't just do that inside of double quote strings or even single quote strings in JavaScript because that would break existing code. So we had to come up with a new syntax for delimiting these special kind of, what are called template strings.
[00:04:55] And that new syntax is to use a back tick instead of a single quote or a double quote. And now we don't need to do any of that breaking out of the string to add it thing. So I'm gonna get rid of the adding. And what's interesting now is I don't need to escape the end of a line because these are automatically capable of bridging across lines.
[00:05:22] And I don't need this stuff.
>> Kyle Simpson: And I don't need that, and then I simply end it with another back tick. So there's my new message, now, if that was the way that it worked, that could also create some havoc because how would it know if you really wanted the variable name replaced or you wanted to say the word name.
[00:05:52] So we need to delimit these in some way. And the way JavaScript chose to delimit them is to wrap dollar sign curly brace around the expression that we want to be interpreted and interpolated. So we would say ${orderNumber} and ${total} notice those two dollar signs there the first dollar sign is left entirely alone.
[00:06:18] It's only going to pay attention to a dollar sign curly brace. So if you wanted to do a dollar sign curly brace that wasn't part of the delimiter, you just have to backslash the dollar sign. So now we have this string which I can break across multiple lines and I can automatically interpolate those expressions directly into my string literal.
[00:06:45] Now, the difference here is going to be subtle, but while we're talking about it, we should go ahead and talk about it. Have any of you ever heard before the notion of the phrase of a multi-line string? Okay this phrase is often used in programming, but it's used imprecisely.
[00:07:10] We're actually pretty famous about this as developers. We use these different words and people mean slightly different things by the term. And it propagates so much that actually it turns out that the word hardly means anything because it means so many different things to different people. So I just want to provide some clarity on this.
[00:07:27] There is such a thing as a string that is continued on to multiple lines. And there is such a thing as a multi-line string. And I'm going to assert that those two things are distinct concepts. So a string that continues across multiple lines would be like what we see here, which is that I do a string continuation or a line continuation at the end.
[00:07:49] And I come out over here, and if I were to run this code in the browser and print it out, let's look at what happens. If I run this over here in my console, and print out message. I get one string all in one line, everybody with me?
[00:08:08] But, people will call this a multi-line string. Well, there's not actually multiple lines in the string value. So it's not really a multi-line, string it's a string that continued to cross multiple lines. The nuance that I'm trying to get here will make more sense in just a moment when I talk to you about the template strings, the template literals.
[00:08:31] But it's important to know that this one does not include the new line because we are escaping the new line that we put there. So it's leaving it out of the string value, you with me. Now let's talk about template literals. If I were to take this code and come over here to my console and run it.
[00:08:57] And then ask for what's in msg. Did you notice anything different? Now I actually have a new line in that location, which is why it prints across two separate lines. So what I would argue is that a template literal or a template string is in fact, if you put it there, a multi-line string, a string that preserves those new lines.
[00:09:21] Whereas the old school JavaScript strings with line continuations are just simply strings that span multiple lines.
>> Kyle Simpson: We get a difference here, if you didn't want that string there, I mean, if you didn't want that new line, you'd have to escape it. In which case it's not gonna be present.
[00:09:41] But by themselves, without any doing of that escaping, you're gonna get a real multi-line string with a template literal, whereas, with regular strings you don't, yes?
>> Speaker 2: Do you know [COUGH] for the spec, does that insert a slash n or is it OS dependent?
>> Kyle Simpson: It's actually the back slash n.
[00:09:59]
>> Speaker 2: Okay, always?
>> Kyle Simpson: Yeah, the standardized one, all right so just a little nuance for you to pay attention to. If you're going to break your strings across multiple lines and not escape them you're gonna get actual multi-line strings which may or may not be what you want.
[00:10:15] You should be careful about that, okay? All right, so now let's talk about why this is bad to call this a template literal or a template string, why is this a bad name for it? Well, it implies that msg is a template, that can sort of be re-rendered with different data.
[00:10:37] But msg here is an actual legitimate real string value. The back tics here are a way to do a string literal that is evaluated immediately. And then it's done and it's never reevaluated ever again. It's kind of like an iffy, it just runs right away and then it's done.
[00:10:54] So the way most people think about templates with reuse as part of the definition. These are not reusable in that sense. You could wrap them in a function and call a function. And every time get back a new string from a new template literal. But now the function becomes the template not the string value, you with me?
[00:11:15] So I and several others have. Regularly called out, this is a bad name for these. Template literals, any usage of the word template here is going to be confusing and misleading. We brought these objections up a while back, but the spec was too far along and nobody seemed to care about actually changing anything.
[00:11:33] So it landed in the strut spec as template literals and template strings or something like that. So it's kind of annoying, but I prefer to call these what they really are, just interpolated string literals. Call me crazy, I like to call an apple an apple, right? That's what it is, it's an interpolated string literal.
[00:11:53] Interpolated string literal is a big ole mouthful. So one day about a year and a half ago I was tweeting with Brendan Eich, as I do, because he and I are best buddies. He's a cool guy, anyway I was tweeting with Brendan Eich about this and I was kind of, because I've been kind of tweet complaining about template literals and what a bad name that was.
[00:12:14] And surprisingly he kind of agreed with me that yeah there can be some confusion around that word template. So we kind of decided in that Twitter conversation, that if you wanna be a cool kid and you wanna use the right name but you want like a cool like hip sounding name for it.
[00:12:31] You don't wanna say interpolated string literal you can just call them interpoliterals. So I kinda like that, interpoliterals, it's kind of a cool word. Anyway maybe you don't think that's funny, maybe you haven't had enough coffee this afternoon, I don't know. Interpoliterals, interpolated string literals, whatever you want to call them.
[00:12:49] Okay, so these are nice like I said just in sort of a basic feature, it's kind of delightful to have a little bit easier syntax for dealing with our strings. Your error messages, your whatever. I'm not at all suggesting as some do, that you ought to do all your HTML structuring inside of your JavaScript.
[00:13:08] I am actually very anti that. There are a lot of times that we do string constructions of error messages and other things like that. Any time you're doing any kind of string construction a template literal. An interpoliteral is going to be more helpful for you, questions about those?
[00:13:32] A question in the chat was, can this be anything? Yeah, and actually I meant to say this, right now I'm using a variable name, it's any valid JavaScript expression. So you could put an entire JavaScript program inside of the expression if that's what you wanted. As a matter of fact, as crazy as this sounds, I have had a couple of occasions where I did an interpolated literal inside of the expression inside of another interpolated literal.
[00:13:57] So you can go, it's turtles all the way down you go down as far as you need to go. Okay but most of the time, probably 99% of the time, you're gonna see them just as regular JavaScript variables.