1
00:00:00,410 --> 00:00:04,790
So far you've created and work with
strings using single and double quotes.

2
00:00:04,790 --> 00:00:08,230
You've also combined multiple strings and
inserted dynamic information

3
00:00:08,230 --> 00:00:11,470
into them with variables using
the addition or plus operator.

4
00:00:12,610 --> 00:00:14,931
Alternating between single and
double quotes.

5
00:00:14,931 --> 00:00:16,809
Concatenating variables with strings.

6
00:00:16,809 --> 00:00:19,458
And creating multiline strings
might seem like a messy and

7
00:00:19,458 --> 00:00:22,070
hard to read process for
dealing with strings.

8
00:00:22,070 --> 00:00:26,540
You'll likely see similar techniques still
used in real life JavaScript code bases.

9
00:00:26,540 --> 00:00:30,050
But JavaScript now provides a more
intuitive way to work with strings,

10
00:00:30,050 --> 00:00:32,360
with a feature called template literals.

11
00:00:32,360 --> 00:00:35,060
Template literals not only
make your code more usable and

12
00:00:35,060 --> 00:00:38,840
readable, they also enhance all the ways
in which you can work with strings.

13
00:00:38,840 --> 00:00:39,660
Let's see how they work.

14
00:00:41,390 --> 00:00:46,715
In your workspace, open the file
named template-literals.js and

15
00:00:46,715 --> 00:00:52,884
update the script tag and index.html,
to point to template-literals.js.

16
00:00:55,758 --> 00:00:59,814
Writing template literals is almost the
same as writing strings with single and

17
00:00:59,814 --> 00:01:00,850
double quotes.

18
00:01:00,850 --> 00:01:05,030
The most significant differences that you
define template literals with backticks

19
00:01:05,030 --> 00:01:06,400
instead of quotes.

20
00:01:06,400 --> 00:01:10,030
The backtick character is in the upper
left hand corner of the keyboard and

21
00:01:10,030 --> 00:01:12,240
it shares a key with the tilde symbol.

22
00:01:12,240 --> 00:01:16,240
For example, all three of these
evaluate to the exact same string.

23
00:01:17,600 --> 00:01:21,850
Let's recreate the Hello message from
earlier using a template literal.

24
00:01:21,850 --> 00:01:26,790
The variable name still holds the value
of user types into the prompt dialog.

25
00:01:26,790 --> 00:01:31,070
Now, let's change the value of the message
variable to a template literal.

26
00:01:31,070 --> 00:01:32,110
Delete its value.

27
00:01:33,150 --> 00:01:38,320
Then type two back-ticks, and
place the word Hello inside them.

28
00:01:38,320 --> 00:01:42,290
There are a few additional bonuses and
features that come with these backticks.

29
00:01:42,290 --> 00:01:46,800
First, instead of using the plus operator
to combine one string with another

30
00:01:46,800 --> 00:01:48,720
string that's stored in a variable,

31
00:01:48,720 --> 00:01:53,980
you use a special placeholder syntax to
insert a value into a string dynamically.

32
00:01:53,980 --> 00:01:59,090
A dollar sign with curly braces marks
the dynamic values in a template literal.

33
00:01:59,090 --> 00:02:02,160
For example,
I'll insert the value of name like this.

34
00:02:03,430 --> 00:02:06,880
This syntax might seem odd at first.

35
00:02:06,880 --> 00:02:10,040
Once you get used to it, though,
it's a lot easier to read and

36
00:02:10,040 --> 00:02:12,620
work with than concatenated strings.

37
00:02:12,620 --> 00:02:15,380
I'll save the file and
run it in the browser.

38
00:02:18,560 --> 00:02:19,790
And it works just like before.

39
00:02:22,330 --> 00:02:28,030
Whatever's inside the curly braces gets
evaluated by the JavaScript engine and

40
00:02:28,030 --> 00:02:30,110
added to the string.

41
00:02:30,110 --> 00:02:32,820
This process is known as interpolation.

42
00:02:32,820 --> 00:02:36,960
You can put almost any JavaScript
statement inside the curly braces too.

43
00:02:36,960 --> 00:02:43,261
For example, I'll do some math inside
the template literal like this.

44
00:02:43,261 --> 00:02:49,115
It's dollar sign curly braces, inside the
curly braces I'll type 2 times 3 o'clock.

45
00:02:51,767 --> 00:02:52,860
And let's see the result.

46
00:02:56,830 --> 00:02:59,910
The console displays the message,
Hello, Guil.

47
00:02:59,910 --> 00:03:01,695
It's 6 o'clock.

48
00:03:01,695 --> 00:03:05,660
2 times 3 evaluates to 6, so
that's rendered inside the string.

49
00:03:08,853 --> 00:03:11,874
Another benefit of template
literals is that you don't need to

50
00:03:11,874 --> 00:03:16,170
worry about spaces between words,
like you usually do with concatenation.

51
00:03:16,170 --> 00:03:20,182
You also don't have to worry about
escaping single or double quotes or

52
00:03:20,182 --> 00:03:21,550
any characters at all.

53
00:03:21,550 --> 00:03:23,470
Now, the math was just an example.

54
00:03:23,470 --> 00:03:25,830
So I'll go ahead and
delete it from my code.

55
00:03:25,830 --> 00:03:28,860
Now, let's continue with
the rest of the message.

56
00:03:28,860 --> 00:03:33,790
Earlier, we used the addition assignment
operator to re-assign message to

57
00:03:33,790 --> 00:03:37,060
a longer and longer string value
until we had the final string.

58
00:03:37,060 --> 00:03:39,472
That seemed tricky and
a little hard to read,

59
00:03:39,472 --> 00:03:42,659
especially with all the string
concatenation we had to do.

60
00:03:42,659 --> 00:03:44,074
In a template literal,

61
00:03:44,074 --> 00:03:49,043
what's great is that you write the value
exactly as it's meant to be interpreted.

62
00:03:49,043 --> 00:03:53,344
Between the backticks,
I'll include Welcome to my music site,

63
00:03:55,908 --> 00:03:59,780
Period, then I'm happy
that you came by to visit.

64
00:04:04,538 --> 00:04:07,530
Comma, dollar sign, curly braces.

65
00:04:07,530 --> 00:04:11,260
Then between the curly braces
insert the value of name.

66
00:04:11,260 --> 00:04:12,420
I'll follow that with a period.

67
00:04:13,460 --> 00:04:15,909
Then type Please come again and
listen to more music.

68
00:04:24,446 --> 00:04:29,170
I'll save this, refresh the browser.

69
00:04:29,170 --> 00:04:32,350
Then enter Guil into the prompt dialog.

70
00:04:32,350 --> 00:04:33,150
And there's the message.

71
00:04:35,080 --> 00:04:40,010
Another great feature of template literals
is that they support multiline strings.

72
00:04:40,010 --> 00:04:44,467
You can include two or more lines between
the backticks without having to escape new

73
00:04:44,467 --> 00:04:46,577
lines with a backslash, for example.

74
00:04:55,633 --> 00:04:58,968
Notice, how the new lines
are also preserved in the output.

75
00:05:04,035 --> 00:05:05,420
And that's it.

76
00:05:05,420 --> 00:05:10,560
As you can see, template literals offer a
lot of conveniences when creating strings.

77
00:05:10,560 --> 00:05:13,160
They're easier to write and read.

78
00:05:13,160 --> 00:05:16,325
You're going to learn a whole lot more
about working with template literals

79
00:05:16,325 --> 00:05:18,420
in future courses, workshops, and projects.