Preview
Video Player
00:00
00:00
Template Strings
4:34Concatenating strings in JavaScript has lead to a lot of confusion. With Template Strings we can safely construct strings with ease.
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