- Introducing Strings 6:43
- Transform and Manipulate Strings 6:04
- Introducing Strings Review 5 questions
- Capture Input 4:05
- Combine Strings 8:28
- Combine and Manipulate Strings 3 objectives
- Template Literals 5:19
- Display the Value of a String on a Page 7:55
- Variables and Strings Challenge 2:57
- Variables and Strings Challenge Solution 5:32
- Combine Strings and Template Literals Review 6 questions
- Write a Template Literal 1 objective
Preview
Video Player
00:00
00:00
Template Literals
5:19JavaScript provides a more intuitive way to work with strings with a feature called "template literals." Template literals not only make your code more usable and readable, but they also enhance how you work with strings.
So far you've created and work with
strings using single and double quotes.
0:00
You've also combined multiple strings and
inserted dynamic information
0:04
into them with variables using
the addition or plus operator.
0:08
Alternating between single and
double quotes.
0:12
Concatenating variables with strings.
0:14
And creating multiline strings
might seem like a messy and
0:16
hard to read process for
dealing with strings.
0:19
You'll likely see similar techniques still
used in real life JavaScript code bases.
0:22
But JavaScript now provides a more
intuitive way to work with strings,
0:26
with a feature called template literals.
0:30
Template literals not only
make your code more usable and
0:32
readable, they also enhance all the ways
in which you can work with strings.
0:35
Let's see how they work.
0:38
In your workspace, open the file
named template-literals.js and
0:41
update the script tag and index.html,
to point to template-literals.js.
0:46
Writing template literals is almost the
same as writing strings with single and
0:55
double quotes.
0:59
The most significant differences that you
define template literals with backticks
1:00
instead of quotes.
1:05
The backtick character is in the upper
left hand corner of the keyboard and
1:06
it shares a key with the tilde symbol.
1:10
For example, all three of these
evaluate to the exact same string.
1:12
Let's recreate the Hello message from
earlier using a template literal.
1:17
The variable name still holds the value
of user types into the prompt dialog.
1:21
Now, let's change the value of the message
variable to a template literal.
1:26
Delete its value.
1:31
Then type two back-ticks, and
place the word Hello inside them.
1:33
There are a few additional bonuses and
features that come with these backticks.
1:38
First, instead of using the plus operator
to combine one string with another
1:42
string that's stored in a variable,
1:46
you use a special placeholder syntax to
insert a value into a string dynamically.
1:48
A dollar sign with curly braces marks
the dynamic values in a template literal.
1:53
For example,
I'll insert the value of name like this.
1:59
This syntax might seem odd at first.
2:03
Once you get used to it, though,
it's a lot easier to read and
2:06
work with than concatenated strings.
2:10
I'll save the file and
run it in the browser.
2:12
And it works just like before.
2:18
Whatever's inside the curly braces gets
evaluated by the JavaScript engine and
2:22
added to the string.
2:28
This process is known as interpolation.
2:30
You can put almost any JavaScript
statement inside the curly braces too.
2:32
For example, I'll do some math inside
the template literal like this.
2:36
It's dollar sign curly braces, inside the
curly braces I'll type 2 times 3 o'clock.
2:43
And let's see the result.
2:51
The console displays the message,
Hello, Guil.
2:56
It's 6 o'clock.
2:59
2 times 3 evaluates to 6, so
that's rendered inside the string.
3:01
Another benefit of template
literals is that you don't need to
3:08
worry about spaces between words,
like you usually do with concatenation.
3:11
You also don't have to worry about
escaping single or double quotes or
3:16
any characters at all.
3:20
Now, the math was just an example.
3:21
So I'll go ahead and
delete it from my code.
3:23
Now, let's continue with
the rest of the message.
3:25
Earlier, we used the addition assignment
operator to re-assign message to
3:28
a longer and longer string value
until we had the final string.
3:33
That seemed tricky and
a little hard to read,
3:37
especially with all the string
concatenation we had to do.
3:39
In a template literal,
3:42
what's great is that you write the value
exactly as it's meant to be interpreted.
3:44
Between the backticks,
I'll include Welcome to my music site,
3:49
Period, then I'm happy
that you came by to visit.
3:55
Comma, dollar sign, curly braces.
4:04
Then between the curly braces
insert the value of name.
4:07
I'll follow that with a period.
4:11
Then type Please come again and
listen to more music.
4:13
I'll save this, refresh the browser.
4:24
Then enter Guil into the prompt dialog.
4:29
And there's the message.
4:32
Another great feature of template literals
is that they support multiline strings.
4:35
You can include two or more lines between
the backticks without having to escape new
4:40
lines with a backslash, for example.
4:44
Notice, how the new lines
are also preserved in the output.
4:55
And that's it.
5:04
As you can see, template literals offer a
lot of conveniences when creating strings.
5:05
They're easier to write and read.
5:10
You're going to learn a whole lot more
about working with template literals
5:13
in future courses, workshops, and projects.
5:16