1
00:00:01,110 --> 00:00:04,413
‫In this lecture, let's review template literals.

2
00:00:05,640 --> 00:00:09,390
‫So template literals are an ES6 JavaScript feature

3
00:00:09,390 --> 00:00:12,450
‫which allows us to very easily create strings

4
00:00:12,450 --> 00:00:15,270
‫that contain some JavaScript variables,

5
00:00:15,270 --> 00:00:19,170
‫or actually that contains any JavaScript expression,

6
00:00:19,170 --> 00:00:21,630
‫inside of a string.

7
00:00:21,630 --> 00:00:24,960
‫So let's illustrate that by using some of these variables

8
00:00:24,960 --> 00:00:27,110
‫that we have created here in the beginning,

9
00:00:28,050 --> 00:00:31,320
‫so like some of these here, about this book

10
00:00:31,320 --> 00:00:34,710
‫in order to create a summary string of the book.

11
00:00:34,710 --> 00:00:39,000
‫So creating a string that contains a summary

12
00:00:39,000 --> 00:00:40,533
‫of the current book object.

13
00:00:41,700 --> 00:00:44,730
‫So let's create summary,

14
00:00:44,730 --> 00:00:47,820
‫and here is where we will have our string.

15
00:00:47,820 --> 00:00:49,650
‫Now usually strings in JavaScript

16
00:00:49,650 --> 00:00:52,203
‫are defined with normal quotes,

17
00:00:53,190 --> 00:00:56,430
‫like this, or with double quotes.

18
00:00:56,430 --> 00:01:00,990
‫Right, however, template literals are with these back ticks.

19
00:01:00,990 --> 00:01:03,540
‫And, if you're using an English keyboard,

20
00:01:03,540 --> 00:01:05,460
‫they are just above the Tab key

21
00:01:05,460 --> 00:01:08,010
‫on the left side on the keyboard.

22
00:01:08,010 --> 00:01:10,440
‫So these back ticks indicate to JavaScript

23
00:01:10,440 --> 00:01:12,333
‫that this is a template literal.

24
00:01:14,490 --> 00:01:16,980
‫So, for now, let's just write anything here,

25
00:01:16,980 --> 00:01:20,640
‫and then I will immediately write it out here again

26
00:01:20,640 --> 00:01:25,080
‫so that Quokka can display the result of this variable here.

27
00:01:25,080 --> 00:01:28,020
‫And so, for now, we see that this is still a normal string

28
00:01:28,020 --> 00:01:31,290
‫as if it had been defined with the normal quote.

29
00:01:31,290 --> 00:01:33,120
‫But now let's actually add

30
00:01:33,120 --> 00:01:35,133
‫some JavaScript expression in here.

31
00:01:36,180 --> 00:01:38,520
‫So, for that, we use this dollar sign

32
00:01:38,520 --> 00:01:40,113
‫and then curly braces.

33
00:01:43,710 --> 00:01:46,470
‫So let's say title is a book,

34
00:01:46,470 --> 00:01:49,050
‫and indeed, this title right here,

35
00:01:49,050 --> 00:01:51,930
‫or in fact any JavaScript that is in here

36
00:01:51,930 --> 00:01:55,080
‫inside of this block is then replaced in the string

37
00:01:55,080 --> 00:01:58,320
‫with the value that this block basically returns.

38
00:01:58,320 --> 00:02:00,240
‫So the value that is created here.

39
00:02:00,240 --> 00:02:02,820
‫And so title is, of course, "Lord of the Rings."

40
00:02:02,820 --> 00:02:03,900
‫And so, then,

41
00:02:03,900 --> 00:02:06,650
‫in the string we see "The Lord of the Rings" is a book.

42
00:02:07,740 --> 00:02:10,140
‫So let's try something else here.

43
00:02:10,140 --> 00:02:13,200
‫So, as I was saying, any JavaScript expression works here.

44
00:02:13,200 --> 00:02:16,860
‫So we can do two plus four, or really whatever we want.

45
00:02:16,860 --> 00:02:18,690
‫We can call functions here.

46
00:02:18,690 --> 00:02:21,030
‫And really anything that is an expression,

47
00:02:21,030 --> 00:02:23,850
‫so anything that immediately produces a value,

48
00:02:23,850 --> 00:02:26,703
‫can be placed here inside this block.

49
00:02:28,860 --> 00:02:30,630
‫Okay, but now let's create

50
00:02:30,630 --> 00:02:34,290
‫a little bit more of a nice looking string here.

51
00:02:34,290 --> 00:02:36,540
‫So let's say "The Lord of the Rings"

52
00:02:36,540 --> 00:02:38,793
‫is a book with a certain number of pages.

53
00:02:40,260 --> 00:02:42,210
‫So here we can use the pages variable,

54
00:02:42,210 --> 00:02:44,880
‫which remember, we took out of the books object

55
00:02:44,880 --> 00:02:46,320
‫using destructuring.

56
00:02:46,320 --> 00:02:49,110
‫And so now you start seeing why it is so helpful

57
00:02:49,110 --> 00:02:52,380
‫'cause, otherwise, we would have to write book.title,

58
00:02:52,380 --> 00:02:56,070
‫then here book.pages and so on

59
00:02:56,070 --> 00:02:58,980
‫for all these variables that we're going to use here.

60
00:02:58,980 --> 00:03:03,430
‫So we said 1,216-page long book

61
00:03:06,930 --> 00:03:09,090
‫was written by...

62
00:03:09,090 --> 00:03:10,653
‫Now, let's use the author here.

63
00:03:11,610 --> 00:03:14,613
‫And, again, we took that one out using destructuring.

64
00:03:17,550 --> 00:03:19,650
‫And published in...

65
00:03:19,650 --> 00:03:22,260
‫Now, here we can use our publish date

66
00:03:22,260 --> 00:03:24,753
‫or actually I think it's called publicationDate.

67
00:03:26,610 --> 00:03:28,260
‫Alright, so then, here,

68
00:03:28,260 --> 00:03:30,540
‫sometimes the string becomes a bit too long,

69
00:03:30,540 --> 00:03:33,480
‫and in that case, I'd just like to scroll down here

70
00:03:33,480 --> 00:03:35,550
‫and see the output right here,

71
00:03:35,550 --> 00:03:37,560
‫in this panel here on the bottom.

72
00:03:37,560 --> 00:03:38,393
‫And, by the way,

73
00:03:38,393 --> 00:03:42,360
‫in case that your Quokka didn't open up this panel,

74
00:03:42,360 --> 00:03:45,780
‫you can always open it up by opening the terminal,

75
00:03:45,780 --> 00:03:49,380
‫which should be right here.

76
00:03:49,380 --> 00:03:51,160
‫So you can do a new terminal

77
00:03:53,460 --> 00:03:54,330
‫like this,

78
00:03:54,330 --> 00:03:55,710
‫and then you see that

79
00:03:55,710 --> 00:03:58,710
‫here you have the PROBLEMS tab, the OUTPUT tab,

80
00:03:58,710 --> 00:04:01,593
‫and then here you can just select Quokka.

81
00:04:03,750 --> 00:04:07,440
‫Alright, so here we have this string now,

82
00:04:07,440 --> 00:04:10,050
‫and here we have the publication date.

83
00:04:10,050 --> 00:04:12,210
‫But here I just want the year.

84
00:04:12,210 --> 00:04:14,070
‫And so let's just take out the year.

85
00:04:14,070 --> 00:04:15,300
‫And so this is again to show you

86
00:04:15,300 --> 00:04:17,850
‫that we can write any JavaScript expression,

87
00:04:17,850 --> 00:04:20,073
‫here inside these curly braces.

88
00:04:22,470 --> 00:04:26,370
‫So let's say we want to split this string by this dash,

89
00:04:26,370 --> 00:04:28,170
‫which will result in an array.

90
00:04:28,170 --> 00:04:31,500
‫And then, from there, we just take the first element.

91
00:04:31,500 --> 00:04:34,230
‫So that's just standard JavaScript.

92
00:04:34,230 --> 00:04:38,370
‫And so now, indeed, here we get the string as we want it.

93
00:04:38,370 --> 00:04:40,770
‫Great, and that's actually all I had to tell you

94
00:04:40,770 --> 00:04:42,300
‫about template literals.

95
00:04:42,300 --> 00:04:44,910
‫That's just how easy and straightforward they are,

96
00:04:44,910 --> 00:04:47,613
‫but we use them really all the time in React.