Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

5.2 Template Literals

JavaScript now features native templating in the form of template literals, which are a special type of string 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.

Syntax

  • ${}

1.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00:43


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.

Back to the top
View on GitHub