Original subtitles

1 1

Strings are a very important part of programming. 2

2

And so let's now learn about an easy way 3

3

to build strings, 4

4

using something called template literals. 5

5

And let's start by creating 6

6

some new variables here about a person, 7

7

and in this case, about me, 8

8

so that we can then concatenate them 9

9

into one big string. 10

10

(typing) 11

11

And the, 12

12

birth year. 13

13

Okay, and so let's now use 14

14

these variables to build a string, 15

15

something like, I'm Jonas, 16

16

a 40 or 30 year old teacher. 17

17

So we're going to then use this birth year 18

18

to calculate the age of course. 19

19

So let's call that one, 20

20

simply, Jonas. 21

21

And as we already learned 22

22

in one of the previous lectures, 23

23

we can use the plus sign 24

24

to concatenate strings. 25

25

And so let's now start by doing that. 26

26

So, I want to write, 27

27

I'm, and here I'm seeing a problem. 28

28

So when I want to use this single quote here 29

29

for writing something like I'm, or isn't, 30

30

so basically when I need this symbol here 31

31

then I need to write the string itself, 32

32

using double quotes, okay, 33

33

because otherwise the single quote 34

34

that I'm using here for I'm will finish the string. 35

35

So, I'm, and then I need a space, 36

36

then the plus. 37

37

And so here I'm saying, I'm Jonas, 38

38

and now I can actually use the single quotes. 39

39

So what matters is that in each string, 40

40

we start and finish with the same symbol, 41

41

right. 42

42

But both just create strings, the same way. 43

43

So right now we have, I'm Jonas, comma, A, 44

44

and now we want the age, 45

45

so let's say, a 30 year old teacher. 46

46

So we need another space here, 47

47

and then let's actually calculate the age. 48

48

So that's the current year 49

49

so let's put that here as well, 50

50

and let's again say that the year is 2037. 51

51

So plus year, 52

52

minus the birth year. 53

53

Now in order to make this work, 54

54

we actually need to put this operation 55

55

between parenthesis. 56

56

Like this. 57

57

And so it will do the calculation first, 58

58

and then the concatenation. 59

59

But you might be wondering, 60

60

well the result of this is going to be a number. 61

61

Right? 62

62

But the rest of the things 63

63

that we're adding here are strings. 64

64

So how is this gonna work? 65

65

Well, this has to do with something 66

66

called type coercion, 67

67

which is something that we're going 68

68

to talk about a little bit later in the section. 69

69

But basically JavaScript will simply 70

70

convert this number to a string, 71

71

so that it can concatenate them 72

72

so that it can join them 73

73

with the rest of the strings. 74

74

So you will see that it's going 75

75

to work just fine. 76

76

Okay, years old. 77

77

And then, 78

78

the job. 79

79

Then we can finish with 80

80

an exclamation mark or something like that. 81

81

Now right, and then, 82

82

let's also log this to the console 83

83

so we can take a look at it. 84

84

Okay, 85

85

so, I'm Jonas a 46 years old teacher, 86

86

and we're missing some spaces here. 87

87

So that's around the years old, 88

88

and you see that this is kind of a pain 89

89

to manage these spaces 90

90

and what to keep track kind of, 91

91

of how the sentence is structured. 92

92

And so we will see a great solution to that in a second. 93

93

So now it works. 94

94

And, yeah, just as expected. 95

95

So as I was saying, 96

96

for a complex string like this one, 97

97

this can be kind of a pain. 98

98

And so that's why starting with ESXi, 99

99

we have a much better tool 100

100

for doing this kind of stuff now, 101

101

which is called, Template literals. 102

102

So with template literals, 103

103

we can write a string in a more normal way, 104

104

and then basically insert the variables 105

105

directly into the string 106

106

and then they will simply be replaced. 107

107

So basically a template literal 108

108

can assemble multiple pieces into one final string. 109

109

So let me show you how that works. 110

110

So let's call this one, 111

111

Jonas 112

112

new. 113

113

And now to write a template literal, 114

114

we need to use backticks. 115

115

So that's this symbol here. 116

116

And on the English keyboard, 117

117

you will find this one above the tab key. 118

118

So again, we really need to use these backticks 119

119

to tell JavaScript that we're writing a template string, 120

120

the single quotes or double quotes won't work 121

121

for what we're going to do now. 122

122

So now, as I said, we simply write a string 123

123

and insert the variables in there. 124

124

So I'm. 125

125

And then we use the dollar sign, curly braces, 126

126

and then the variable name. 127

127

So, I'm, first name, 128

128

and just to see if this actually works 129

129

let's log it to a console. 130

130

So that's Jonas new. 131

131

And indeed, I'm Jonas. 132

132

So you see that this is much easier, 133

133

because all we have is this one string, 134

134

and then here we used this syntax 135

135

to insert the first name variable. 136

136

And now we can continue this 137

137

and it's going to be a lot easier. 138

138

A, 139

139

and then again, a variable. 140

140

Now in this case, we actually need a calculation, 141

141

and that's no problem at all. 142

142

We can basically write any JavaScript here 143

143

inside of these curly braces. 144

144

All right. 145

145

Technically, we can write any expressions, 146

146

but more about expressions in one of the later lectures. 147

147

So year, minus birth year, 148

148

just as we did above, 149

149

year 150

150

old, 151

151

and then, teacher. 152

152

So no plus signs. 153

153

No, thinking where we should put the spaces 154

154

like we did here. 155

155

And so this is a lot easier, 156

156

let's reload. 157

157

Oh, and indeed there is a bug here 158

158

so of course that's not teacher. 159

159

That's actually the value of the variable, job, 160

160

that we're interested in here. 161

161

But once again, we found this bug, 162

162

because we simply read the error message. 163

163

So get into this habit of always reading 164

164

the error message to try to figure out 165

165

where you are wrong. All right. 166

166

And now of course it works 167

167

and I hope that you can see 168

168

that this is a way easier way of writing this string. 169

169

This really kind of assembles the string 170

170

using the pieces that we give it. 171

171

For example this variable here 172

172

or this value that is produced by the minus operator. 173

173

Great. 174

174

So now you know how template strings work in JavaScript, 175

175

and in particular in ESXi. 176

176

And actually it's one of the most used ESXi features 177

177

it's really amazing and really useful in many situations. 178

178

Now I just wanted to let you know 179

179

that we can actually also use backticks 180

180

to write all strings. 181

181

So strings, where we do not, 182

182

insert any of these kind of placeholders here, like this. 183

183

So, we just demonstrated to you. 184

184

So we can use backticks for any irregular string. 185

185

So, you see that it works here just the same. 186

186

And many developers actually started using backticks 187

187

for all strings, 188

188

because then you don't have to think 189

189

about which quotation marks you should use, 190

190

you just use backticks, always. 191

191

And then in case you need to insert a variable, 192

192

then it's much easier than to go back 193

193

and switch out the regular quotes. 194

194

So that's a choice that you can make. 195

195

I actually don't do that myself, 196

196

but I can see that it actually makes sense. 197

197

All right. 198

198

Now another great use case of template literals 199

199

is to create multiline strings. 200

200

So that's something that, 201

201

before template strings was a bit cumbersome to write. 202

202

So let me just show that to you. 203

203

So if you wanted a multiline string before ESXi, 204

204

you would have to write, string, with, 205

205

and then you needed this backslash, n, 206

206

which in many programming languages means new line. 207

207

All right. 208

208

So basically this is like a special character in 209

209

programming, which in strings, 210

210

always means that a new line should be created. 211

211

And then in JavaScript, 212

212

we would need another backslash like this, 213

213

and then we could move to the next line and continue here. 214

214

Multiple, let's create a new one, 215

215

and then the lines. 216

216

And this actually only works because of a bug, 217

217

that's in the language. 218

218

But let's see. 219

219

So we get string with multiple lines, 220

220

and you see that it's all the same string 221

221

but yeah, spread across multiple lines. 222

222

But indeed now with template strings, 223

223

there is an easier way of doing this. 224

224

So all we have to do is simply hit return, 225

225

and it will create a new line for us. 226

226

And this is actually going to be immensely useful 227

227

later when we start building HTML from JavaScript. 228

228

So by then we will be able to use these backticks 229

229

to create multiline HTML elements 230

230

to insert them onto a page, dynamically. 231

231

So that's going to be a lot of fun. 232

232

Let's just see if this works, 233

233

and indeed it does. 234

234

So whenever you need a multiline string, 235

235

you always make sure to use this template literal 236

236

because it's a lot cleaner. 237

237

Alright, and that's actually it about template literals. 238

238

In the next lecture, 239

239

we will finally start to make or code, 240

240

a lot more fun 241

241

and take it to the next level by taking decisions.