Template Strings

[00:00:00]
>> Kyle Simpson: So lets take a look at template strings. And I'll be completely honest with you, when ES6 came out with this feature, I sort of overlooked it. Not over looked it I did learn about it and understand it, but I didn't really get that it would be that critical, that important, and then in a slow burn basically.

[00:00:21]
Not overnight but in a slow burn little by little, by little, this is moved it's way up my list to become one of my favorite features that landed in the language. And it turns out that I'm using it on a daily basis, hundreds of times a day almost.

[00:00:36]
So it's a really interesting little feature and it goes by the name Template Strings. But I don't think that's a very good name for this because the word template implies this idea that it is something that could be repeated over and over again. Most developers have this conception in their mind that a template is something that you could re-render with different data over and over again.

[00:01:00]
And these are not that at all, they're like a one time, they're almost like an iffy function, it's a one time shot, it's done, it's a string that's fully baked. So I like to think of these as interpolated literals, and I know that's a big mouth phrase. So if you're looking for like a short kind of fancy sounding name to make yourself sound smart, start referring to these as interpoliterals.

[00:01:21]
Or just keep calling them template strings like everybody else does. So what problem are template strings trying to solve? Certainly many of you, if not all of you, have had on a regular basis occasion to have to have to concatenate strings together. Not just strings with strings, but strings with data values.

[00:01:40]
In this case, the data values are strings, but a lot of times, they're other things, like numbers, or Booleans, or other sorts of representations of values, and so this idea of stringing values together to produce one larger string. I didn't know for many, many years, until in fact ES6, I didn't know this had a term.

[00:02:01]
I just did it, I was like is just string concatenating with data. I didn't know that there was an official term for this called interpolation. And I also didn't realize that this was a feature that had already been supported in a variety of other languages prior to JavaScript.

[00:02:17]
I didn't even realize that I had encountered it once before years earlier in a different language which was PHP. Prior even to PHP, my background was more C programming that's where I got a lot of my start in programming was in, I did a lot of C and C++ programming.

[00:02:34]
And for whatever reason, I got used to double quotes around my strings. I know that many people are more familiar or more used to using the single quotes, but I just got into the habit of using the double quotes. So of course, I was using double quotes in PHP and everything seemed to be going fine.

[00:02:51]
And then one day, one of my strings started printing values inside of it that were entirely not what I was expecting. And I was like, what is happening? And I dug into this, and searched, and Googled it and asked people. And then I found out that double quoted strings in PHP behave differently than single quoted string.

[00:03:15]
And nobody had ever told me this, I've been developing [LAUGH] PHP for five years. Nobody told me that in double quoted strings, if you have a dollar sign, they use the dollar sign in variables, if you have a dollar sign and then a word immediately after it, and that happens to match one of the variable names that's in scope, it will automatically replace that reference with the actual value of that variable.

[00:03:37]
And I had no idea [LAUGH] that that was happening. And I learned about this idea that they'll go ahead and drop it in, but I didn't even know that that had a name and that feature is called interpolation. And I wish I had that perspective to say, that what we need and I would've been advocating for JavaScript to have this a lot earlier than it did.

[00:03:57]
Because this, quite frankly, works we've all done that kind of approach to our code, but it's not ideal at all. This is a perfect example of that very imperative approach to code. Because to figure out the final string, you have to essentially mentally execute this code. You gotta pick the bits and pieces, and figure out where the concatenation operators are.

[00:04:19]
And so a much better way of doing this would be to declare what our final string would be and have placeholders for where we want values to be dropped in. And that's what we get with this new template strings feature. Unfortunately, they can't just change the string literal like the double or the single quote cuz they would break somebody's code.

[00:04:40]
No matter what pattern you used to delimit a value in your string, there's a guarantee that somebody out there is already got that in their strings and they don't want their code to break like mine did one day. They don't want their code to break and so we had to add a whole new kind of string literal to support that automatic interpolation.

[00:05:01]
And they chose to use the backtick operator to indicate this is a different kind of string, wherein inside of the string there will be these expressions that will be replaced, at that moment they will be replaced with whatever their value is. And you'll note here that the expression that you use to delimit is a dollar sign and then the curly braces surround it.

[00:05:28]
Inside of the curly braces is essentially any expression that you wanna do. It's often gonna be a variable, but it could be a whole JavaScript expression, a whole JavaScript program for that matter. Can be a function call, it can even be a template literal inside of that expression if you need it to be.

[00:05:46]
And I've done that on some occasions. So you'll typically see this used with the variables because that's the most common use cases to drop in the value of a variable. Why I said that we shouldn't be calling these template strings is actually, literally, the first time I tried to learn about this feature, with the word template string in my head.

[00:06:08]
I tried to figure out okay, how do I get access to the template of this so that I can re-render it with different variables every time? And I spent more than half a day messing around, trying to figure it out, trying to experiment with it. And then finally somebody on Twitter corrected me and they're like no, it's not a template, it's already the string.

[00:06:29]
It's not really appropriate to think of it as a thing that will produce a string, it is the string itself. It's just the fact that there's a bit of pre-processing that goes in as that string is happening. So really the best mental model is it kind of like an iffy, an immediately invoke function expression.

[00:06:47]
You describe what string you want and it immediately goes and construct and builds that string and drops it in. So, if you were to ask what is the type of message here? It's not some object or template, it's an actual primitive string. That's the result of that backtick delimiter.

[00:07:05]
Just a quick note on the backticks by the way, this is just a personal rant. I understand why they chose that operator because it certainly has a nice visual similarity to single quotes and double quotes. But that particular choice of backtick is a bit frustrating for some of us who like to write about JavaScript and we do so in Markdown format, like I've written all of my books in Markdown format.

[00:07:32]
And Markdown uses the backtick as the way you indicate code, like inline code or code blocks. So if you are trying to do an inline code reference and include a single backtick, I'm not lying that actually takes five backticks to show one backtick and inline code. Five backticks and two paces.

[00:07:54]
You have to do backtick, backtick, space, and then the backtick you wanna show and then another space and then two backticks on it. They didn't have something sensible like backslash or whatever, so you had to do this crazy other thing. Anyway, it's more difficult to write about in Markdown, but nonetheless, it's a great feature.

[00:08:11]
And again, I started using this in a few little places, like when I was printing messages to a page or whatever. But where I really started using this is in my console messages, console.log messages. And I started using this all over the place and now it's probably one of the most predominant features in the code base.

[00:08:29]
Another note about these template strings is that you'll see on the end of line 5, it's not just for saving space in the slides, I actually broke across a line without having to do a backslash at the end of the line. With regular strings, that is the classic, double or single-quoted string, if you want to continue a string onto another line, that's called string continuation.

[00:08:53]
If you wanna continue onto another line, you have to put a backslash at the end of the line, which is fine, but it's kind of annoying. And these template strings, or these interpoliterals, they automatically allow you to break strings across lines. Which can be quite helpful if you need to write out a string across multiple lines maybe for readability.

[00:09:12]
Just be aware that that content, the new line that you put in there, if you tab, indent, all of that content is in the string. That's not magically having that white space removed, it's in the string. So there is the downside if you don't want that white space there you can use that feature.

[00:09:31]
So this is part of that narrative that I was talking about in the intro to the course, which is that this is a more declarative approach. We're saying I just wanna string, and JavaScript please go figure out how to put these values in to my string where I need them.