1

00:00:01,020 --> 00:00:04,840

2
00:00:04,840 --> 00:00:07,350
And so let's now learn about an easy way

3
00:00:07,350 --> 00:00:08,930
to build strings,

4
00:00:08,930 --> 00:00:11,603
using something called template literals.

5
00:00:12,980 --> 00:00:14,480
And let's start by creating

6
00:00:14,480 --> 00:00:17,630
some new variables here about a person,

7
00:00:17,630 --> 00:00:19,593
and in this case, about me,

8
00:00:20,620 --> 00:00:23,228
so that we can then concatenate them

9
00:00:23,228 --> 00:00:25,536
into one big string.

10
00:00:25,536 --> 00:00:27,619
(typing)

11
00:00:32,700 --> 00:00:33,653
And the,

12
00:00:35,140 --> 00:00:36,080
birth year.

13
00:00:39,410 --> 00:00:41,460
Okay, and so let's now use

14
00:00:41,460 --> 00:00:44,080
these variables to build a string,

15
00:00:44,080 --> 00:00:46,230
something like, I'm Jonas,
16
00:00:46,230 --> 00:00:49,930
a 40 or 30 year old teacher.

17
00:00:49,930 --> 00:00:52,380
So we're going to then use this birth year

18
00:00:52,380 --> 00:00:54,433
to calculate the age of course.

19
00:00:56,020 --> 00:00:57,780
So let's call that one,

20
00:00:57,780 --> 00:00:59,580
simply, Jonas.

21
00:00:59,580 --> 00:01:00,900
And as we already learned

22
00:01:00,900 --> 00:01:02,920
in one of the previous lectures,

23
00:01:02,920 --> 00:01:04,330
we can use the plus sign

24
00:01:04,330 --> 00:01:06,110
to concatenate strings.

25
00:01:06,110 --> 00:01:08,940
And so let's now start by doing that.

26
00:01:08,940 --> 00:01:10,180
So, I want to write,

27
00:01:10,180 --> 00:01:12,944
I'm, and here I'm seeing a problem.

28
00:01:12,944 --> 00:01:15,710
So when I want to use this single quote here

29
00:01:15,710 --> 00:01:19,100
for writing something like I'm, or isn't,

30
00:01:19,100 --> 00:01:21,950
so basically when I need this symbol here

31
00:01:22,910 --> 00:01:25,320
then I need to write the string itself,

32
00:01:25,320 --> 00:01:27,830
using double quotes, okay,

33
00:01:27,830 --> 00:01:29,900
because otherwise the single quote

34
00:01:29,900 --> 00:01:32,933
that I'm using here for I'm will finish the string.

35
00:01:33,890 --> 00:01:37,400
So, I'm, and then I need a space,

36
00:01:37,400 --> 00:01:38,233
then the plus.

37
00:01:39,080 --> 00:01:41,273
And so here I'm saying, I'm Jonas,

38
00:01:44,350 --> 00:01:47,130
and now I can actually use the single quotes.

39
00:01:47,130 --> 00:01:49,390
So what matters is that in each string,

40
00:01:49,390 --> 00:01:53,780
we start and finish with the same symbol,

41
00:01:53,780 --> 00:01:54,613
right.

42
00:01:54,613 --> 00:01:57,003
But both just create strings, the same way.

43
00:01:57,880 --> 00:02:02,290
So right now we have, I'm Jonas, comma, A,

44
00:02:02,290 --> 00:02:03,700
and now we want the age,

45
00:02:03,700 --> 00:02:06,870
so let's say, a 30 year old teacher.

46
00:02:06,870 --> 00:02:08,370
So we need another space here,

47
00:02:10,820 --> 00:02:13,210
and then let's actually calculate the age.

48
00:02:13,210 --> 00:02:15,450
So that's the current year

49
00:02:15,450 --> 00:02:17,053
so let's put that here as well,

50
00:02:18,770 --> 00:02:23,373
and let's again say that the year is 2037.

51
00:02:24,480 --> 00:02:26,890
So plus year,

52
00:02:26,890 --> 00:02:30,410
minus the birth year.

53
00:02:30,410 --> 00:02:32,380
Now in order to make this work,

54
00:02:32,380 --> 00:02:34,760
we actually need to put this operation

55
00:02:34,760 --> 00:02:36,063
between parenthesis.

56
00:02:38,450 --> 00:02:39,350
Like this.

57
00:02:39,350 --> 00:02:41,350
And so it will do the calculation first,

58
00:02:41,350 --> 00:02:43,260
and then the concatenation.

59
00:02:43,260 --> 00:02:44,640
But you might be wondering,
60
00:02:44,640 --> 00:02:48,100
well the result of this is going to be a number.

61
00:02:48,100 --> 00:02:49,070
Right?

62
00:02:49,070 --> 00:02:50,140
But the rest of the things

63
00:02:50,140 --> 00:02:52,150
that we're adding here are strings.

64
00:02:52,150 --> 00:02:53,990
So how is this gonna work?

65
00:02:53,990 --> 00:02:55,600
Well, this has to do with something

66
00:02:55,600 --> 00:02:56,996
called type coercion,

67
00:02:56,996 --> 00:02:58,330
which is something that we're going

68
00:02:58,330 --> 00:03:01,170
to talk about a little bit later in the section.

69
00:03:01,170 --> 00:03:03,210
But basically JavaScript will simply

70
00:03:03,210 --> 00:03:05,530
convert this number to a string,

71
00:03:05,530 --> 00:03:07,600
so that it can concatenate them

72
00:03:07,600 --> 00:03:08,980
so that it can join them

73
00:03:08,980 --> 00:03:10,760
with the rest of the strings.

74
00:03:10,760 --> 00:03:12,080
So you will see that it's going
75
00:03:12,080 --> 00:03:13,203
to work just fine.

76
00:03:16,160 --> 00:03:18,273
Okay, years old.

77
00:03:20,150 --> 00:03:20,983
And then,

78
00:03:20,983 --> 00:03:22,193
the job.

79
00:03:24,490 --> 00:03:26,610
Then we can finish with

80
00:03:26,610 --> 00:03:29,593
an exclamation mark or something like that.

81
00:03:30,650 --> 00:03:32,220
Now right, and then,

82
00:03:32,220 --> 00:03:34,607
let's also log this to the console

83
00:03:34,607 --> 00:03:37,053
so we can take a look at it.

84
00:03:39,090 --> 00:03:40,660
Okay,

85
00:03:40,660 --> 00:03:45,100
so, I'm Jonas a 46 years old teacher,

86
00:03:45,100 --> 00:03:46,913
and we're missing some spaces here.

87
00:03:47,870 --> 00:03:49,623
So that's around the years old,

88
00:03:50,970 --> 00:03:52,870
and you see that this is kind of a pain

89
00:03:52,870 --> 00:03:54,450
to manage these spaces

90
00:03:54,450 --> 00:03:58,500
and what to keep track kind of,

91
00:03:58,500 --> 00:04:00,563
of how the sentence is structured.

92
00:04:02,140 --> 00:04:04,940
And so we will see a great solution to that in a second.

93
00:04:05,890 --> 00:04:07,400
So now it works.

94
00:04:07,400 --> 00:04:10,720
And, yeah, just as expected.

95
00:04:10,720 --> 00:04:11,960
So as I was saying,

96
00:04:11,960 --> 00:04:14,490
for a complex string like this one,

97
00:04:14,490 --> 00:04:16,230
this can be kind of a pain.

98
00:04:16,230 --> 00:04:18,510
And so that's why starting with ESXi,

99
00:04:18,510 --> 00:04:20,140
we have a much better tool

100
00:04:20,140 --> 00:04:22,140
for doing this kind of stuff now,

101
00:04:22,140 --> 00:04:24,930
which is called, Template literals.

102
00:04:24,930 --> 00:04:26,230
So with template literals,

103
00:04:26,230 --> 00:04:29,140
we can write a string in a more normal way,

104
00:04:29,140 --> 00:04:31,840
and then basically insert the variables

105
00:04:31,840 --> 00:04:33,540
directly into the string

106
00:04:33,540 --> 00:04:36,320
and then they will simply be replaced.

107
00:04:36,320 --> 00:04:38,470
So basically a template literal

108
00:04:38,470 --> 00:04:42,710
can assemble multiple pieces into one final string.

109
00:04:42,710 --> 00:04:44,410
So let me show you how that works.

110
00:04:47,110 --> 00:04:48,350
So let's call this one,

111
00:04:48,350 --> 00:04:49,950
Jonas

112
00:04:49,950 --> 00:04:50,783
new.

113
00:04:53,340 --> 00:04:55,280
And now to write a template literal,

114
00:04:55,280 --> 00:04:57,550
we need to use backticks.

115
00:04:57,550 --> 00:04:59,900
So that's this symbol here.

116
00:04:59,900 --> 00:05:01,080
And on the English keyboard,

117
00:05:01,080 --> 00:05:03,403
you will find this one above the tab key.

118
00:05:06,340 --> 00:05:09,650
So again, we really need to use these backticks
119
00:05:09,650 --> 00:05:12,880
to tell JavaScript that we're writing a template string,

120
00:05:12,880 --> 00:05:15,860
the single quotes or double quotes won't work

121
00:05:15,860 --> 00:05:17,760
for what we're going to do now.

122
00:05:17,760 --> 00:05:20,640
So now, as I said, we simply write a string

123
00:05:20,640 --> 00:05:23,170
and insert the variables in there.

124
00:05:23,170 --> 00:05:24,570
So I'm.

125
00:05:24,570 --> 00:05:28,370
And then we use the dollar sign, curly braces,

126
00:05:28,370 --> 00:05:31,490
and then the variable name.

127
00:05:31,490 --> 00:05:33,890
So, I'm, first name,

128
00:05:33,890 --> 00:05:36,550
and just to see if this actually works

129
00:05:36,550 --> 00:05:38,393
let's log it to a console.

130
00:05:40,960 --> 00:05:42,453
So that's Jonas new.

131
00:05:45,480 --> 00:05:47,523
And indeed, I'm Jonas.

132
00:05:48,360 --> 00:05:50,290
So you see that this is much easier,

133
00:05:50,290 --> 00:05:52,407
because all we have is this one string,
134
00:05:52,407 --> 00:05:55,210
and then here we used this syntax

135
00:05:55,210 --> 00:05:57,820
to insert the first name variable.

136
00:05:57,820 --> 00:05:59,260
And now we can continue this

137
00:05:59,260 --> 00:06:01,570
and it's going to be a lot easier.

138
00:06:01,570 --> 00:06:02,403
A,

139
00:06:04,050 --> 00:06:06,210
and then again, a variable.

140
00:06:06,210 --> 00:06:08,860
Now in this case, we actually need a calculation,

141
00:06:08,860 --> 00:06:10,490
and that's no problem at all.

142
00:06:10,490 --> 00:06:13,530
We can basically write any JavaScript here

143
00:06:13,530 --> 00:06:15,780
inside of these curly braces.

144
00:06:15,780 --> 00:06:17,040
All right.

145
00:06:17,040 --> 00:06:19,230
Technically, we can write any expressions,

146
00:06:19,230 --> 00:06:22,673
but more about expressions in one of the later lectures.

147
00:06:23,990 --> 00:06:26,820
So year, minus birth year,

148
00:06:26,820 --> 00:06:28,950
just as we did above,

149
00:06:28,950 --> 00:06:30,610
year

150
00:06:30,610 --> 00:06:31,443
old,

151
00:06:33,860 --> 00:06:36,023
and then, teacher.

152
00:06:37,370 --> 00:06:38,870
So no plus signs.

153
00:06:38,870 --> 00:06:41,970
No, thinking where we should put the spaces

154
00:06:41,970 --> 00:06:42,973
like we did here.

155
00:06:44,550 --> 00:06:47,000
And so this is a lot easier,

156
00:06:47,000 --> 00:06:47,893
let's reload.

157
00:06:48,890 --> 00:06:51,440
Oh, and indeed there is a bug here

158
00:06:51,440 --> 00:06:54,120
so of course that's not teacher.

159
00:06:54,120 --> 00:06:57,200
That's actually the value of the variable, job,

160
00:06:57,200 --> 00:06:58,850
that we're interested in here.

161
00:06:58,850 --> 00:07:01,710
But once again, we found this bug,

162
00:07:01,710 --> 00:07:04,780
because we simply read the error message.

163
00:07:04,780 --> 00:07:07,520
So get into this habit of always reading

164
00:07:07,520 --> 00:07:09,560
the error message to try to figure out

165
00:07:09,560 --> 00:07:11,623
where you are wrong. All right.

166
00:07:12,580 --> 00:07:14,310
And now of course it works

167
00:07:14,310 --> 00:07:16,250
and I hope that you can see

168
00:07:16,250 --> 00:07:20,280
that this is a way easier way of writing this string.

169
00:07:20,280 --> 00:07:22,860
This really kind of assembles the string

170
00:07:22,860 --> 00:07:25,480
using the pieces that we give it.

171
00:07:25,480 --> 00:07:28,120
For example this variable here

172
00:07:28,120 --> 00:07:31,673
or this value that is produced by the minus operator.

173
00:07:32,520 --> 00:07:33,353
Great.

174
00:07:33,353 --> 00:07:37,070
So now you know how template strings work in JavaScript,

175
00:07:37,070 --> 00:07:39,230
and in particular in ESXi.

176
00:07:39,230 --> 00:07:42,910
And actually it's one of the most used ESXi features

177
00:07:42,910 --> 00:07:47,330
it's really amazing and really useful in many situations.
178
00:07:47,330 --> 00:07:49,380
Now I just wanted to let you know

179
00:07:49,380 --> 00:07:51,910
that we can actually also use backticks

180
00:07:51,910 --> 00:07:53,650
to write all strings.

181
00:07:53,650 --> 00:07:55,760
So strings, where we do not,

182
00:07:55,760 --> 00:07:59,703
insert any of these kind of placeholders here, like this.

183
00:08:01,220 --> 00:08:03,743
So, we just demonstrated to you.

184
00:08:05,290 --> 00:08:08,473
So we can use backticks for any irregular string.

185
00:08:13,430 --> 00:08:16,773
So, you see that it works here just the same.

186
00:08:18,180 --> 00:08:21,440
And many developers actually started using backticks

187
00:08:21,440 --> 00:08:22,690
for all strings,

188
00:08:22,690 --> 00:08:24,340
because then you don't have to think

189
00:08:24,340 --> 00:08:27,000
about which quotation marks you should use,

190
00:08:27,000 --> 00:08:29,460
you just use backticks, always.

191
00:08:29,460 --> 00:08:31,783
And then in case you need to insert a variable,

192
00:08:31,783 --> 00:08:34,289
then it's much easier than to go back
193
00:08:34,289 --> 00:08:36,950
and switch out the regular quotes.

194
00:08:36,950 --> 00:08:38,710
So that's a choice that you can make.

195
00:08:38,710 --> 00:08:41,097
I actually don't do that myself,

196
00:08:41,097 --> 00:08:44,063
but I can see that it actually makes sense.

197
00:08:45,200 --> 00:08:46,033
All right.

198
00:08:46,033 --> 00:08:49,180
Now another great use case of template literals

199
00:08:49,180 --> 00:08:51,670
is to create multiline strings.

200
00:08:51,670 --> 00:08:53,100
So that's something that,

201
00:08:53,100 --> 00:08:56,660
before template strings was a bit cumbersome to write.

202
00:08:56,660 --> 00:08:59,596
So let me just show that to you.

203
00:08:59,596 --> 00:09:04,280
So if you wanted a multiline string before ESXi,

204
00:09:04,280 --> 00:09:08,317
you would have to write, string, with,

205
00:09:08,317 --> 00:09:11,280
and then you needed this backslash, n,

206
00:09:11,280 --> 00:09:14,690
which in many programming languages means new line.

207
00:09:14,690 --> 00:09:15,523
All right.

208
00:09:15,523 --> 00:09:18,710
So basically this is like a special character in

209
00:09:18,710 --> 00:09:20,780
programming, which in strings,

210
00:09:20,780 --> 00:09:23,890
always means that a new line should be created.

211
00:09:23,890 --> 00:09:24,970
And then in JavaScript,

212
00:09:24,970 --> 00:09:28,140
we would need another backslash like this,

213
00:09:28,140 --> 00:09:31,883
and then we could move to the next line and continue here.

214
00:09:33,380 --> 00:09:36,563
Multiple, let's create a new one,

215
00:09:37,800 --> 00:09:39,083
and then the lines.

216
00:09:40,430 --> 00:09:43,460
And this actually only works because of a bug,

217
00:09:43,460 --> 00:09:44,633
that's in the language.

218
00:09:45,600 --> 00:09:46,593
But let's see.

219
00:09:48,050 --> 00:09:50,560
So we get string with multiple lines,

220
00:09:50,560 --> 00:09:52,830
and you see that it's all the same string

221
00:09:53,730 --> 00:09:57,120
but yeah, spread across multiple lines.

222
00:09:57,120 --> 00:09:59,639
But indeed now with template strings,

223
00:09:59,639 --> 00:10:02,070
there is an easier way of doing this.

224
00:10:02,070 --> 00:10:06,360
So all we have to do is simply hit return,

225
00:10:06,360 --> 00:10:09,653
and it will create a new line for us.

226
00:10:11,470 --> 00:10:13,920
And this is actually going to be immensely useful

227
00:10:13,920 --> 00:10:18,220
later when we start building HTML from JavaScript.

228
00:10:18,220 --> 00:10:21,300
So by then we will be able to use these backticks

229
00:10:21,300 --> 00:10:23,800
to create multiline HTML elements

230
00:10:23,800 --> 00:10:27,060
to insert them onto a page, dynamically.

231
00:10:27,060 --> 00:10:28,810
So that's going to be a lot of fun.

232
00:10:30,930 --> 00:10:32,470
Let's just see if this works,

233
00:10:32,470 --> 00:10:34,990
and indeed it does.

234
00:10:34,990 --> 00:10:37,170
So whenever you need a multiline string,

235
00:10:37,170 --> 00:10:41,170
you always make sure to use this template literal

236
00:10:41,170 --> 00:10:43,590
because it's a lot cleaner.
237
00:10:43,590 --> 00:10:47,660
Alright, and that's actually it about template literals.

238
00:10:47,660 --> 00:10:48,493
In the next lecture,

239
00:10:48,493 --> 00:10:50,540
we will finally start to make or code,

240
00:10:50,540 --> 00:10:52,220
a lot more fun

241
00:10:52,220 --> 00:10:55,593
and take it to the next level by taking decisions.