5.2 Template Literals

Hi folks. In this lesson we're going to look at another type of string. Template literals are a fairly new type of string literal which were introduced in ES2015. They support multiline strings and expression interpolation, which basically means replacing tokens within a string with values. Let's take a look. To create a template literal, we use backticks. So far, this is just like a regular string in every way. So, one thing we can do with template literals is include line breaks inside them, without using the new line character. So that is equally valid. In template literals, all characters, including white space, are significant. This isn't groundbreaking, but it does mean that we can create strings that include line breaks without having to use escape characters. The above code example is much more readable than the escaped alternatives, which would look something like this. Another feature of string literals is interpolation with data. We can evaluate expressions inside the string. The syntax for this is the dollar character, followed by the expression within curly brackets. The tokens inside the curly brackets are replaced when the template is evaluated at run time. Because template literals have access to variables and objects in our code, they should be handled carefully and must not be constructed by untrusted users. And let's just check the output in the browser. 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 literals are tagged template strings. These strings are tagged with a function name. And this allows the function to be called and passed all of the different parts of the string when it is interpolated, for full control of how the string is constructed. So first of all, let's define a new function. When the function is invoked, it will be passed an array of all of the regular string parts of the template literal, as the first argument. And then a series of additional arguments fit each of the tokens within the template. Notice how we use the spread operator, which we learned about earlier in the course, to collapse all of the remaining arguments after the first one, into a single array called values. So now we can tag a template literal with our function by prepending the name of the function to the template string. If we use a similar template string as the previous example, the tagging function will be passed an array containing four items as the first argument and an array of three items as the values parameter. In this case, we can just build the same string that we were building before. So the function that we defined, which we tagged the template literal 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 tokens and now lets check the output in our browser. This time, the order of the strings and tokens is completely different. So in this lesson, we learned about template literals. We saw that we need to use backticks instead of single or double quotes to define the template literal. And we saw that template literals are just another form of string literal with some extra powers. We saw that we can create multiline strings without explicit newline characters and that we can perform simple token substitution. We also saw that tagging template literals with a function is a powerful way to handle token substitution and gives us full control over the final form of the string. In the next lesson, we'll look at working with numbers in JavaScript. Thanks for watching.