1
00:00:00,470 --> 00:00:03,690
If you've been developing in JavaScript
for a while you probably know

2
00:00:03,690 --> 00:00:07,492
all too well the pain of concatenating
strings and interpolating values.

3
00:00:07,492 --> 00:00:12,130
We have relied on the plus operator to
add variable values and strings together.

4
00:00:12,130 --> 00:00:14,200
It's not a very elegant solution.

5
00:00:14,200 --> 00:00:19,510
Thankfully ES 2015 provides a really neat
syntax that lets us mix string literals,

6
00:00:19,510 --> 00:00:23,030
variables, and expressions but
before we look at this new syntax

7
00:00:23,030 --> 00:00:27,820
let's look at some of the ways
to create strings in ES5.

8
00:00:27,820 --> 00:00:31,460
If you're following along, go ahead and
open the workspace for this video.

9
00:00:31,460 --> 00:00:36,830
In the file simple-string.js,
I have a variable named str or

10
00:00:36,830 --> 00:00:39,900
string and I simply log into the console.

11
00:00:39,900 --> 00:00:44,280
The log method lets me concatenate
multiple expressions at runtime.

12
00:00:44,280 --> 00:00:50,040
So when I run the file in the console
with node simple-string.js,

13
00:00:50,040 --> 00:00:52,740
it shows me the string
my favorite number is 5.

14
00:00:52,740 --> 00:00:58,850
That was a really simple one so now let's
take a look at the file complex-string.js.

15
00:01:02,634 --> 00:01:07,852
In this file I have a simple string,
a date then a complex string

16
00:01:07,852 --> 00:01:15,100
that merges the two together using the
replace method on the string prototype.

17
00:01:15,100 --> 00:01:19,670
Now when I run this file in the console,

18
00:01:19,670 --> 00:01:23,870
it outputs the message there
are 110 days until Halloween.

19
00:01:23,870 --> 00:01:28,424
Well by looking at the JavaScript you can
probably tell that this could go wrong

20
00:01:28,424 --> 00:01:31,598
quickly if our sentence had
more than one x character.

21
00:01:34,480 --> 00:01:38,228
So for instance, if I change the string to

22
00:01:38,228 --> 00:01:43,110
excited that there are x
days until Halloween.

23
00:01:43,110 --> 00:01:47,880
Once I run this file in the console
we see the x in the word excited

24
00:01:47,880 --> 00:01:50,141
replaced with the day count.

25
00:01:52,267 --> 00:01:56,332
So over in the file,
extreme-string.js, we've got yet

26
00:01:56,332 --> 00:01:58,700
another way of creating a string.

27
00:02:00,320 --> 00:02:06,270
So this example creates a simple HTML
table and logs it to the console.

28
00:02:06,270 --> 00:02:11,420
It's also using string concatenation
to display a follower count

29
00:02:11,420 --> 00:02:14,940
via the follower count let variable.

30
00:02:14,940 --> 00:02:21,798
So in the console when I run
the script node extreme-string.js

31
00:02:21,798 --> 00:02:26,371
it shows the value of follower count 34.

32
00:02:26,371 --> 00:02:30,364
And notice how the HTML
tags are all left aligned.

33
00:02:34,393 --> 00:02:39,470
Next, go ahead and
open the file extreme-template-strong.js.

34
00:02:39,470 --> 00:02:43,770
Now the first thing we notice
in this file is that the table

35
00:02:43,770 --> 00:02:47,060
HTML variable has the same HTML content

36
00:02:47,060 --> 00:02:52,200
as the extreme-string.js file we just
looked at but it's neatly formatted.

37
00:02:52,200 --> 00:02:58,120
And the values for name and followerCount
are stored in the student object.

38
00:02:59,140 --> 00:03:04,410
And the second thing we noticed is
the dollar sign and curly braces here.

39
00:03:04,410 --> 00:03:06,820
This is how we can easily
interpolate values and

40
00:03:06,820 --> 00:03:08,590
expressions in a string using ES2015.

41
00:03:09,980 --> 00:03:14,610
Each variable that you'd like to
insert into a string is wrapped with

42
00:03:14,610 --> 00:03:17,606
a $ sign in curly braces like this.

43
00:03:17,606 --> 00:03:23,170
So for instance, to insert
the followerCount, into the table,

44
00:03:23,170 --> 00:03:29,225
add $ sign curly braces and
say a student.followerCount.

45
00:03:30,830 --> 00:03:34,390
Now the magic ingredient that
make template strings work,

46
00:03:34,390 --> 00:03:36,280
is the back tick character.

47
00:03:36,280 --> 00:03:40,760
A template string always starts and
ends with a back tick.

48
00:03:40,760 --> 00:03:45,050
If you look closely you'll see that there
is a small little spec on line five and

49
00:03:45,050 --> 00:03:46,980
again on line 19.

50
00:03:46,980 --> 00:03:51,930
And you can find the back tick key to the
left of the number one on your keyboard.

51
00:03:51,930 --> 00:03:58,880
So over in the console if I run
node extreme-template-string.js

52
00:03:58,880 --> 00:04:04,100
notice how it outputs my neatly formatted
table along with the values for

53
00:04:04,100 --> 00:04:06,880
student name and followerCount.

54
00:04:06,880 --> 00:04:11,580
And if you need further processing of
your template strings you can tag them

55
00:04:11,580 --> 00:04:15,020
which is a more advanced form
of using template strings.

56
00:04:15,020 --> 00:04:17,280
Be sure to check the teacher's
notes of this video for

57
00:04:17,280 --> 00:04:18,530
more information on tagging.

58
00:04:20,460 --> 00:04:22,910
Template strings keep our code clean and
readable and

59
00:04:22,910 --> 00:04:26,950
match features that have been available
in other languages for a long time.

60
00:04:26,950 --> 00:04:30,330
In the next video it will cast
aside the old index of method and

61
00:04:30,330 --> 00:04:33,600
look at new string search methods to
make our code easier to understand.