Bummer! You have been redirected as the page you requested could not be found.
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 Introducing ES2015!
You have completed Introducing ES2015!
Preview
Concatenating strings in JavaScript has lead to a lot of confusion. With Template Strings we can safely construct strings with ease.
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
If you've been developing in JavaScript
for a while you probably know
0:00
all too well the pain of concatenating
strings and interpolating values.
0:03
We have relied on the plus operator to
add variable values and strings together.
0:07
It's not a very elegant solution.
0:12
Thankfully ES 2015 provides a really neat
syntax that lets us mix string literals,
0:14
variables, and expressions but
before we look at this new syntax
0:19
let's look at some of the ways
to create strings in ES5.
0:23
If you're following along, go ahead and
open the workspace for this video.
0:27
In the file simple-string.js,
I have a variable named str or
0:31
string and I simply log into the console.
0:36
The log method lets me concatenate
multiple expressions at runtime.
0:39
So when I run the file in the console
with node simple-string.js,
0:44
it shows me the string
my favorite number is 5.
0:50
That was a really simple one so now let's
take a look at the file complex-string.js.
0:52
In this file I have a simple string,
a date then a complex string
1:02
that merges the two together using the
replace method on the string prototype.
1:07
Now when I run this file in the console,
1:15
it outputs the message there
are 110 days until Halloween.
1:19
Well by looking at the JavaScript you can
probably tell that this could go wrong
1:23
quickly if our sentence had
more than one x character.
1:28
So for instance, if I change the string to
1:34
excited that there are x
days until Halloween.
1:38
Once I run this file in the console
we see the x in the word excited
1:43
replaced with the day count.
1:47
So over in the file,
extreme-string.js, we've got yet
1:52
another way of creating a string.
1:56
So this example creates a simple HTML
table and logs it to the console.
2:00
It's also using string concatenation
to display a follower count
2:06
via the follower count let variable.
2:11
So in the console when I run
the script node extreme-string.js
2:14
it shows the value of follower count 34.
2:21
And notice how the HTML
tags are all left aligned.
2:26
Next, go ahead and
open the file extreme-template-strong.js.
2:34
Now the first thing we notice
in this file is that the table
2:39
HTML variable has the same HTML content
2:43
as the extreme-string.js file we just
looked at but it's neatly formatted.
2:47
And the values for name and followerCount
are stored in the student object.
2:52
And the second thing we noticed is
the dollar sign and curly braces here.
2:59
This is how we can easily
interpolate values and
3:04
expressions in a string using ES2015.
3:06
Each variable that you'd like to
insert into a string is wrapped with
3:09
a $ sign in curly braces like this.
3:14
So for instance, to insert
the followerCount, into the table,
3:17
add $ sign curly braces and
say a student.followerCount.
3:23
Now the magic ingredient that
make template strings work,
3:30
is the back tick character.
3:34
A template string always starts and
ends with a back tick.
3:36
If you look closely you'll see that there
is a small little spec on line five and
3:40
again on line 19.
3:45
And you can find the back tick key to the
left of the number one on your keyboard.
3:46
So over in the console if I run
node extreme-template-string.js
3:51
notice how it outputs my neatly formatted
table along with the values for
3:58
student name and followerCount.
4:04
And if you need further processing of
your template strings you can tag them
4:06
which is a more advanced form
of using template strings.
4:11
Be sure to check the teacher's
notes of this video for
4:15
more information on tagging.
4:17
Template strings keep our code clean and
readable and
4:20
match features that have been available
in other languages for a long time.
4:22
In the next video it will cast
aside the old index of method and
4:26
look at new string search methods to
make our code easier to understand.
4:30
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