Original subtitles

1 1

Over the next few lectures, 2

2

we will learn how to work with strings 3

3

and so we're gonna be taking a look 4

4

at a couple of useful string methods. 5

5

Now I could have divided this part about strings 6

6

into many more lectures 7

7

and go really deep into some topics 8

8

but I think it's best to just quickly introduce you 9

9

to all the topics here 10

10

and then keep using them in future projects 11

11

because we work with strings all the time in JavaScript 12

12

and so you will see these methods being used 13

13

all the time throughout the rest of the course. 14

14

Anyway, this is gonna be really fun 15

15

so let's get started. 16

16

And in this part of the section, 17

17

we're gonna leave the restaurant theme behind 18

18

and work on stuff related to airplanes and airlines. 19

19

So that's something that I really like. 20

20

So let's now start by creating an airline variable here 21

21

and I'm using TAP Air Portugal. 22

22

All right, and if you want, you can use some other one 23

23

from your country maybe, 24

24

but then you might have to adapt the examples. 25

25

So as a plane, 26

26

I'm using a string A320. 27

27

Okay. 28

28

And now let's do some stuff with this. 29

29

So just like in arrays, 30

30

we can get the character of a string at a certain position. 31

31

So for example, plane at position zero 32

32

should be A, right? 33

33

So let's load this here. 34

34

And indeed we got A 35

35

and the same of course for all the other letters, 36

36

one, two for example. 37

37

And so indeed you now get three and two here 38

38

but both of them are still strings. 39

39

So if we wanted them to be numbers, 40

40

we would have to convert them and we can do the same 41

41

directly on a string. 42

42

So we can just write a string and let's write B727 now, 43

43

which is a Boeing and so this works the same. 44

44

Okay so now we got to the B, 45

45

we can also read the length property of strings, 46

46

just like we can in arrays. 47

47

So let's say airline.length. 48

48

And again we can also do that directly on the string. 49

49

Okay. 50

50

There you go. 51

51

Next up let's talk about methods. 52

52

So again comparing strings to arrays here, 53

53

strings also have methods 54

54

and some of them are quite similar to the array methods. 55

55

So one of them is the index off. 56

56

So I believe we talked about this one 57

57

when we talked about a array. 58

58

And so this one works the same way, 59

59

so we can get the position in which a certain letter 60

60

is in the string. 61

61

So let's use r here. 62

62

And so here we now get to position number six. 63

63

And so let's see zero, one, two, three, four, five and six. 64

64

Okay and that's where the six here comes from. 65

65

So you'll see that strings are also zero-based right? 66

66

And we could observe that already up here. 67

67

Now this here will only give us the first occurrence 68

68

but sometimes we might need the last one. 69

69

And so then we can use lastIndexOf, 70

70

lastIndexOf and so that is 10. 71

71

So this one was six then seven, 72

72

because the space of course also counts as a character, 73

73

then eight, nine, and this is position 10. 74

74

Alright and we can also search for entire words. 75

75

For example, for the occurrence of Portugal, 76

76

and so that is at position eight, 77

77

and this one is actually case sensitive. 78

78

So if I search with lowercase, 79

79

then we get minus one, 80

80

because this can now not be found 81

81

in this airline's string. 82

82

All right now, what can we actually do with these indexes? 83

83

Why are they useful? 84

84

Well, one good use case is to extract part 85

85

of a string using the slice method 86

86

and a slice method needs indexes as arguments. 87

87

And so therefore sometimes it can be very useful 88

88

to first figure out the index of part of a string 89

89

to then extract that. 90

90

So let's see how the slice method works. 91

91

So airline and then dot slice, 92

92

and let's write four and see the result here. 93

93

All right so the result is Air Portugal. 94

94

And the reason for that is that this here 95

95

is the begin parameter. 96

96

So basically it's the position at which 97

97

the extraction will start. 98

98

And remember that this is zero based. 99

99

So zero, one, two, three, and four. 100

100

So four happens to be this A. 101

101

And so this is where the slice method starts to extract. 102

102

And this result that we get here, 103

103

so just this here is called a substring 104

104

because it's just a part of the original string. 105

105

Now this does not change the underlying string okay? 106

106

Just keep that in mind. 107

107

That's because it's actually impossible to mutate strings. 108

108

They are primitives, right? 109

109

So if we wanted to use this string 110

110

now we would have to store it first into some variable 111

111

or some data structure. 112

112

Okay, so this method here and all the other ones 113

113

that we're gonna talk about always return a new string. 114

114

Okay and so that's why we can then lock that result 115

115

to the console like this. 116

116

Now, besides the begin parameter that we already specified, 117

117

we can also specify an end parameter. 118

118

So let's try seven and see the result. 119

119

And so now we only got air. 120

120

Okay so this one is four, then five, six 121

121

and seven is the space here. 122

122

And so what this means is that the end value 123

123

is actually not included in the string. 124

124

All right so basically it stops extracting 125

125

before reaching index number seven. 126

126

And that's really important to keep in mind. 127

127

And just as a side note, 128

128

the length of the extracted string 129

129

is always going to be end minus beginning. 130

130

So seven minus four is three. 131

131

And so that's the length here of air. 132

132

All right, okay. 133

133

Now up until this point, 134

134

we have always just hard-coded these values, 135

135

but ofcourse many times we don't even know the string 136

136

that we receive yet okay? 137

137

And so let's now try to extract just the first word 138

138

of this string here, 139

139

but without knowing any of the indexes. 140

140

And so that's where this IndexOf, 141

141

and lastIndexOf here become really important. 142

142

So basically that we do not have to hard code 143

143

these values here. 144

144

All right so let's try to extract that first word 145

145

as I was saying. 146

146

Airline.slice 147

147

and now we need to figure out the index. 148

148

And now if we want the first word we need to start at zero, 149

149

but what about the end parameter? 150

150

Well we want to extract until this space here basically. 151

151

So let's find the index of that. 152

152

So airline.indexOf, 153

153

and remember that this will be the first occurrence 154

154

and so indeed we get top. 155

155

All right and now let's do the opposite extracting 156

156

the last word, so slice. 157

157

And so for the last word, 158

158

we want to start at the last space here. 159

159

Okay that's why we have lastIndexOf. 160

160

So airline.lastIndexOf 161

161

and again searching for the space. 162

162

And now we don't need the end parameter 163

163

because then if we don't specify it, 164

164

it will simply extract everything until the end. 165

165

Okay. 166

166

But actually now the space is also included here. 167

167

And so we just need to add plus one, 168

168

and now we're good. 169

169

So that's the fundamentals of the slice method, 170

170

but we can do even more with it. 171

171

So let's go again here. 172

172

And we can even define a negative begin argument. 173

173

Like this for example, 174

174

and then it will start counting from the end. 175

175

Or actually start extracting from the end. 176

176

So these are the last two letters from Portugal. 177

177

And finally let's duplicate this one again. 178

178

And again I'm using this shortcut here for duplicate. 179

179

Okay. 180

180

So we can also specify a negative end parameter. 181

181

So the beginning is back to positive, 182

182

and now the end is minus one. 183

183

So let's see. 184

184

And so basically we started at position one. 185

185

So that's why the T is cut off. 186

186

And then the negative end parameter, 187

187

basically cuts off the last character. 188

188

All right. 189

189

And so we will need all of these 190

190

different combinations here, 191

191

in different situations. 192

192

So it's good that you know how to use them, 193

193

because you will need them at some point. 194

194

Okay. 195

195

And now let's practice a little bit, 196

196

what we just learned 197

197

and write a function that receives an airplane seat 198

198

and locks to the console, 199

199

whether it is a middle seat or not. 200

200

I hope that sounds like fun. 201

201

So let's write. 202

202

Check, 203

203

middle, 204

204

seat. 205

205

And it is a function which takes in a seat. 206

206

And just to illustrate it, 207

207

let me start by calling this function. 208

208

To check middle seat. 209

209

And so typically, 210

210

an airplane seat looks like this. 211

211

So we have the row as a number here 212

212

and then the seat itself, 213

213

so that's like the column so to say, 214

214

it's then a letter for example a B. 215

215

So it starts from the left 216

216

and goes all the way to the right side. 217

217

And in small planes, like the A320, or the Boeing 737, 218

218

we only have six seats in one row. 219

219

And that means that B and E are the middle seats. 220

220

Let me just write that here. 221

221

B and E, 222

222

are middle seats. 223

223

So just in case you're not familiar 224

224

with how these small planes works. 225

225

Right. 226

226

And that's also not the point here of course. 227

227

So basically all we want to do is to check 228

228

if the string that we receive, 229

229

contains a, B or an E. 230

230

And if so, then it's a middle seat. 231

231

And let's call this with a couple of different strings. 232

232

So 23C 233

233

and 3E. 234

234

All right, so what we need to do here is basically 235

235

take the last character of the string 236

236

and test whether it is a B or an E right? 237

237

So let's get that letter from the seat. 238

238

Now we'll just call it S for seat again, 239

239

but I cannot repeat the same name here. 240

240

So how do I do that now? 241

241

Well to extract part of a string, 242

242

we already know we use the slice method 243

243

and how do we take the last character of a certain string? 244

244

Well, we use minus one as the begin character. 245

245

And then as we saw up here, 246

246

it will start counting basically one from the right side. 247

247

And now it's very easy. 248

248

If S equals B 249

249

or if S equals E, 250

250

then let's log to the console, 251

251

you got the middle seat, 252

252

which is the one that no one wants. 253

253

Well, let's add an emoji here. 254

254

Let's say this one 255

255

or else 256

256

you got lucky, 257

257

just any emoji here, 258

258

just to make it different 259

259

and I think we are good now. 260

260

Let's test it. 261

261

And so indeed this here contains the B at the end. 262

262

And so therefore it's a middle seat, 263

263

the same for this one 264

264

and this person with this seat got lucky. 265

265

All right and that's how we extract parts of strings. 266

266

And that's something really important to do. 267

267

So maybe if you'd like, 268

268

you can play around with this some more, 269

269

maybe come up with your own example. 270

270

Now before we move on here, 271

271

let's just stop for a second 272

272

and understand why all of this actually works. 273

273

So we know that strings are just primitives. 274

274

So why do they have methods? 275

275

Shouldn't methods only be available 276

276

on objects such as a race? 277

277

Well that is actually true. 278

278

However, JavaScript is really smart. 279

279

And so here is how this works. 280

280

Whenever we call a method on a string, 281

281

JavaScript will automatically behind the scenes 282

282

convert that string primitive to a string object 283

283

with the same content. 284

284

And then it's on that object where the methods are called. 285

285

All right and this process is called boxing 286

286

because it basically takes our string 287

287

and puts it into a box 288

288

which is the object. 289

289

So basically what happens is this. 290

290

So what JavaScript does, 291

291

is to call this string function here. 292

292

Okay. 293

293

And so now you'll see, that this string here, 294

294

looks a little bit more like an object. 295

295

And we could take a look at this here. 296

296

And so you see here, all of these methods, 297

297

like slice that we just use. 298

298

But this is beyond the scope of this lecture. 299

299

We will learn what this is a little bit later. 300

300

But what matters is that this indeed is now an object. 301

301

So you see it is an object. 302

302

And so this conversion here 303

303

is what JavaScript does behind the scenes 304

304

whenever we call a method on a string. 305

305

And then when the operation is done 306

306

the object is converted back to a regular string primitive. 307

307

Okay. 308

308

And in fact all string methods return primitives. 309

309

Even if called on a string object. 310

310

So let me demonstrate us here as well. 311

311

Just really quick. 312

312

And actually we want your type off. 313

313

And so the result of all of this, 314

314

is then back to being a string. 315

315

Okay, but don't get confused by this. 316

316

This is just a theory explanation 317

317

behind why all of this works in case you're curious. 318

318

And I hope you are. 319

319

Great. 320

320

But now let's move on to the next video, 321

321

where we will continue working with strings.