Tagged Templates

[00:00:00]
>> Kyle Simpson: Also string literals, or these template literals, have another feature on them which allows you to more fully control that process, that pre-processing that I was talking about. They're called tagged literals. So here on this interval literal that I have, line 5 and line 6, immediately before it, I have this word formatCurrency.

[00:00:23]
Yes, it's on another line just to show you that white space doesn't matter here. But there's no operator between the two. And that should look strange to you, because you wouldn't be able to put a identifier immediately in front of a double or a single quote. That would be a JavaScript error, but here, it's allowed.

[00:00:41]
And what that's actually signifying, you are declarative tagging this string to say when it finishes i want it to before, i'm sorry before it finishes i want it to be processed with this function. So it's actually a function call it didn't really look like it but it's a special kind of function call, called a tagged template string, okay, or tagged template literal.

[00:01:05]
So what we're saying here basically in this particular case or this example is when we drop in that value 12.3, we don't wanna just say 12.3 and string form, we actually wanna format it as if it is US currency in this particular case. So we want it to look like 12.30.

[00:01:25]
And the way we do that is this formatCurrency function. This is just one I wrote for this example. You notice that it takes in some values, it takes in a strings array. And then, it takes in a values, and notice that data dot there. That's me gathering up all the individual values into an array.

[00:01:44]
So, strings is all ready an array, but the other values that come in, those are individual and then, I'm gathering them up into an array. So what's happening here is that JavaScript is gonna immediately invoked this function for you, and it's gonna pass to you, all of the little bits of literal strings in one array.

[00:02:02]
And then all the different values that you've chosen to interpolate in these individual positions that you can gather up in turn array. So in essentially of these two arrays of things, and then it's up to you to decide, how do I want to put those together? Or do I wanna put them together at all even, okay?

[00:02:21]
In the general sense you're almost always gonna use a tag function to produce another string, and you're generally just gonna loop over those strings like I'm doing here and interpolate them together. To make that process easy, JavaScript Guarantees that the strings array will always have one more value in it than the values array would have.

[00:02:42]
So in other words, if I had three interpolated values. Three expression in my literal, then it guarantees that I'm gonna have four string literals in the strings array. Even if the first, or the last, or both, have to be an empty string, it guarantees that those entries will be there.

[00:03:00]
And that means that if I've got four strings and three values, it's easy for me to interpolate them together. And that's really all this for loop is doing is looping over the strings array, and then dropping in both the strings and the values, alternating between them to produce this final string.

[00:03:16]
But there's one last little piece here, which is line six, where I actually do some formatting of the value as US currency in this particular case. And you'll notice that I'm actually using another template literal right inside with the US dollar sign. And then the values, and I'm using the two fixed method here to format it with two decimal places.

[00:03:39]
That produces a string for me, and if it's not one of those, if one of those is not a number, then line 9, I just drop it in as its regular value.
>> Kyle Simpson: Now I could have written this as a variety of different ways. But it's illustrative of the idea of what tag functions can do for you.

[00:03:58]
They're essentially a way to pre-process your string, do some sort of formatting on it, either of the strings or the values or both depending upon what you need. So let's think about some use cases for that. You could for example, have a tag function that did various internationalization.

[00:04:18]
Like swapping in different terminology. If you could detect that you are needing a Spanish word or a French word you could have it look up a value and pick it from a different dictionary. So you could have it automatically drop in the appropriate terminology there. You could imagine doing some sort of escaping of strings, if you were dropping in user provided content and you needed to protect it from having, cross site scripting, scripting characters embedded in it.

[00:04:47]
You can imagine having a tag function that automatically escaped out any of your HTML entities to prevent cross sites scripting. Really, the possibilities are almost endless. Any sort of preprocessing that you can imagine, so localization, like formatting of things, internationalization, escaping. All those sorts of preprocessing are really great use cases for tag functions.

[00:05:09]
And the great news is, you almost certainly don't even need to write your own tag function, because there are hundreds and hundreds of these tag functions all ready written in various different libraries at this point. So you just go looking on NPM or GetHub or wherever you look to find code.

[00:05:26]
Go looking, and you're gonna find tons of tag functions, almost certainly. Whatever kinda standard preprocessing or formatting you wanna do, there's a tag function for it. So just go find the tag function, use that library, put it in front of your string literals and then move on.