Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed JavaScript Basics!
You have completed JavaScript Basics!
Preview
JavaScript 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.
Code Snippet
const message = `Hello, ${name}. Welcome to my music site. I'm happy that you came by to visit, ${name}. Please come again and listen to more music!`;
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up