Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Ecma 1
  • Overview
  • Transcript

2.3 Templating

JavaScript now features native templating in the form of string literals that can contain expressions. We can also use a slightly more advanced template called a tagged template. Let's look at both of these features in this lesson.

2.3 Templating

Hi folks, in this lesson, we're going to look at the new string templating features of ES6. Template strings are a new type of string literal in ES6, which supports multiline strings and expression interpolation. Let's take a look. To create a template string, we use back ticks, instead of single or double quotation marks This is just like a regular string in almost every way. For example, typeof still reports a string. One thing we can do with template strings, however, is include line breaks inside them without using the new line character. In ES6, that's perfectly valid code. All characters, including white space, are significant. Perhaps a more useful feature is interpolation with data. We can evaluate expressions inside the template string. The syntax for this is the dollar character followed by the expression within curly braces. Let's look at a basic example. So we've got a couple of regular string variables there, A and B. So now let's logout a template string and interpolate those inside the string. So let's compile that down And let's take a look in the browser. And as you can see, it works in pretty much the way that we would expect by looking at the syntax. The tokens are simply replaced when the template string is evaluated. Because template strings have access to variables and objects in our code, they should be handled carefully, and must not be constructed by untrusted users. We aren't limited to simple variable substitution, either. We can use functions inside the tokens if we wish. One of the most powerful features of template strings, are tagged template strings. These strings are tagged with a function name and this allows the function to be called and passed the different parts of the string when it is interpolated. For full control of how the final string is constructed, let's take a quick look at this feature. First of all let's define a function. When the function is invoked it will be passed an array of all of the regular string parts of the template string as the first arguments, and then a series of arguments, one for each of the tokens within the template steam. For convenience, we can use the spread operator, which we learned about in the last lesson, to collapse all of the remaining arguments into a single array. We can tag the template stream with our function, by prepending the name of our function to the template stream. So the template string is now tagged with our STR function. The function we defined, and which the template string is tagged with, should return the value of the evaluated string. We can use the function to make any kind of transformation to the string that we want. For example, we could swap the order of the different parts of the string around. So let's compile that down. So it looks like I've messed up the order of the various parts of the string slightly. But that's not important. What's important is that you can see that the value of the string has been completely transformed with the tagging function. As a simple coding exercise, what I'd like you to do is have a play around with the final string and just see if you can get it to output something sensible, which is different than the previous strings that we logged. So in this lesson we learned about the new template strings feature of ES6. We saw that we need to use backticks instead of single or double quotes to define the string. We saw that we can create multi-line strings without explicit new line characters, and that we can perform simple token substitution within template strings. We also saw that tagging template strings with a function is a powerful way to get both the simple token substitution as well as full control over the final string form. Thanks for watching.

Back to the top