1
00:00:00,760 --> 00:00:05,240
In JavaScript, you will often need to
show a value that doesn't exist yet.

2
00:00:05,240 --> 00:00:08,050
Let's say you wanna greet
a user when they log in.

3
00:00:08,050 --> 00:00:10,650
The user's name can't
be known ahead of time.

4
00:00:10,650 --> 00:00:15,307
So your program would need to combine
the stored text, hello, nice to see you,

5
00:00:15,307 --> 00:00:18,680
with a person's name, when they log in.

6
00:00:18,680 --> 00:00:22,220
Often this is done by
concatenating values onto strings,

7
00:00:22,220 --> 00:00:24,540
which can be a little hard to read.

8
00:00:24,540 --> 00:00:29,620
Other languages use placeholders inside
strings that can be evaluated later.

9
00:00:29,620 --> 00:00:32,130
This is called interpolation.

10
00:00:32,130 --> 00:00:36,000
Now, with template literals,
JavaScript can also interpolate.

11
00:00:36,000 --> 00:00:38,810
The syntax might seem odd at first.

12
00:00:38,810 --> 00:00:42,180
But once you're used to it,
it's a lot easier to read and work with.

13
00:00:43,200 --> 00:00:47,050
The dollar sign with curly brackets
are used to mark the dynamic

14
00:00:47,050 --> 00:00:48,770
values in the template literal.

15
00:00:49,810 --> 00:00:54,830
When the program runs, the contents of
the curly brackets are evaluated and

16
00:00:54,830 --> 00:00:57,510
placed, or interpolated, into the string.

17
00:00:59,040 --> 00:01:02,270
Let's get a feel for
interpolation in the console.

18
00:01:02,270 --> 00:01:04,910
I'll start by creating a variable name.

19
00:01:04,910 --> 00:01:06,780
And I'll assign the string Gary to it.

20
00:01:08,180 --> 00:01:15,230
Now, we can greet Gary, By interpolating
name into our template literal here.

21
00:01:16,500 --> 00:01:21,000
And you can also enter any JavaScript
expression into the curly brackets.

22
00:01:24,240 --> 00:01:27,880
So I'll do some math inside and
you can see what that looks like.

23
00:01:32,560 --> 00:01:36,450
Let's go ahead and
use interpolation in our project.

24
00:01:36,450 --> 00:01:42,186
So if I open up interpolation, you can see
that there's a function at the top, called

25
00:01:42,186 --> 00:01:47,860
like, that accepts an argument and then it
returns I like, whatever you passed in.

26
00:01:47,860 --> 00:01:50,530
And here we're saying, I like apples.

27
00:01:50,530 --> 00:01:54,980
And we're concatenating that
string with two paragraph tags.

28
00:01:54,980 --> 00:01:59,950
And if I uncomment this last line, we're
placing the paragraph element on the page.

29
00:02:01,010 --> 00:02:04,161
So I'll save that and refresh.

30
00:02:04,161 --> 00:02:06,821
And you can see we get, I like apples.

31
00:02:06,821 --> 00:02:10,927
Now, instead of saying,
I like apples, let's say,

32
00:02:10,927 --> 00:02:13,621
I like apples, but I love oranges.

33
00:02:13,621 --> 00:02:15,881
And we'll use interpolation.

34
00:02:15,881 --> 00:02:24,201
So I'll copy this function,
Below, and I'll rename it love.

35
00:02:26,861 --> 00:02:31,120
And we'll use template literal here.

36
00:02:32,770 --> 00:02:36,220
And we'll interpolate our variable
into the template literal.

37
00:02:37,560 --> 00:02:42,500
So now to output it, we're gonna say,

38
00:02:42,500 --> 00:02:48,054
I like apples, comma, but I love oranges.

39
00:02:50,434 --> 00:02:52,874
And we'll save that.

40
00:02:52,874 --> 00:02:57,370
So if I refresh the browser,
okay, good, we got that.

41
00:02:57,370 --> 00:03:02,810
But we did have an issue, these two
strings are butting into each other.

42
00:03:02,810 --> 00:03:05,740
And that's because I forgot
to put a space here.

43
00:03:05,740 --> 00:03:07,300
So, I just wanted to show you that,

44
00:03:07,300 --> 00:03:14,020
cuz that is a common mistake that is made
with concatenating strings together.

45
00:03:14,020 --> 00:03:19,290
And if we use placeholders instead,
I'm just gonna replace these

46
00:03:19,290 --> 00:03:24,270
function calls with placeholders,
they're just easier to see and

47
00:03:24,270 --> 00:03:26,310
reason about, and
they're a little less cluttered.

48
00:03:27,410 --> 00:03:33,050
So, I'll place like back in here and
apples.

49
00:03:33,050 --> 00:03:38,400
I like apples, but I love oranges.

50
00:03:40,320 --> 00:03:45,850
And if we save that, switch over,
You can see it's working.

51
00:03:47,470 --> 00:03:51,140
So you can pass any kind of expression,
even a function expression,

52
00:03:51,140 --> 00:03:53,910
into these curly brackets.

53
00:03:53,910 --> 00:03:57,080
And that combined with the multiline

54
00:03:57,080 --> 00:04:02,580
management of strings make template
literals a really powerful tool.

55
00:04:02,580 --> 00:04:05,654
Give template literals a try in
some of your JavaScript projects.

56
00:04:05,654 --> 00:04:07,420
Thanks for joining me.

57
00:04:07,420 --> 00:04:08,200
I'll see you around