Original subtitles

1 1

This is the third and final part 2

2

of Working With Strings. 3

3

And let's start by learning about 4

4

one of the most powerful string methods, which is split. 5

5

So split allows us to split a string 6

6

into multiple parts based on a divider string. 7

7

So let's check that out. 8

8

So any string works here, 9

9

let's say 10

10

A+very+nice+string. 11

11

So let's say 12

12

that for some reason we have a string like this 13

13

and now on this string we can call the split method. 14

14

Here we need to specify a divider string. 15

15

So let's just use plus, 16

16

and so what will happen now is that it will split up 17

17

this string by this plus sign 18

18

and it will then store the results 19

19

into elements of a new array. 20

20

So let's see that, 21

21

and indeed we get an array which contains A, 22

22

and very, and nice, and string. 23

23

So essentially everything's split up by this divider string. 24

24

So let's try the same 25

25

with my name.split. 26

26

And so the goal here is off having one array, 27

27

which two elements, one for each name. 28

28

And so I can split by the space. 29

29

And this is a very common one 30

30

and so indeed I get this result 31

31

and this is really useful. 32

32

Now indeed 33

33

we can now actually use the power of destructuring 34

34

to create variables directly like this. 35

35

So I can say first name and last name 36

36

will be the results of this split, okay? 37

37

So this here we'll create an array with two elements. 38

38

And then from that array, 39

39

the first one is gonna be taken into first name 40

40

and the second one and two last name, okay? 41

41

Now we could have done the same thing with a slice method 42

42

but that would have been a lot more complicated 43

43

and for longer sentences or almost impossible 44

44

and like this it's really straight forward. 45

45

Okay, Now let's say that we want to make 46

46

the last name uppercase here. 47

47

And then we also want to add a Mister in the beginning. 48

48

So we could just use a simple template literal 49

49

and do what I just said 50

50

but I wanna show you something else here. 51

51

And that's the joint method 52

52

which is essentially the opposite of split. 53

53

So let's create an array, 54

54

which contains all I just said. 55

55

So we want to start with Mr. 56

56

Then the first name 57

57

and so that's gonna be the second element of this array 58

58

and then the last name in uppercase, okay? 59

59

And now I want to join this 60

60

and again we can specify a divider string 61

61

and hopefully you can see by now where this is going. 62

62

So let's store the result of this into new name, 63

63

and then let's check it out in the console. 64

64

So what do you think will be the result of this? 65

65

So of the joint method. 66

66

So indeed we now get one entire string here. 67

67

So one string composed of the three parts of this array 68

68

and joined together by this joining string here basically. 69

69

And of course we could have used anything else 70

70

so like this, or even like this. 71

71

So anything works here, 72

72

but what makes sense of course in this case 73

73

is just the space. 74

74

So this combination of split and join is really powerful 75

75

and we will actually use this all the time 76

76

so split and join, okay? 77

77

And in fact, we can use this for something 78

78

that we already did in one of the previous lectures 79

79

which is to capitalize a name. 80

80

But now with this it makes it really easy 81

81

to capitalize an entire name with multiple names in there. 82

82

So let's say that this passenger is called 83

83

Jessica Ann Smith Davis. 84

84

So how will we capitalize this name here? 85

85

And actually let's write a function. 86

86

So that's a bit nicer. 87

87

So const capitalize name, 88

88

which is a function which receives a name 89

89

and then it will do something with that. 90

90

So let's capitalize name here with that string instead. 91

91

And then we can also call it with some other name. 92

92

So my name for example, 93

93

and you can use your own name here of course. 94

94

So what's the strategy for capitalizing this entire name. 95

95

And by the way what I mean here is to transform 96

96

the first letter of each name into a capital letter. 97

97

So here Jonas, and then this one here Schmedtmnan 98

98

with this capital S okay? 99

99

Well we have multiple words here, 100

100

and so we will have to capitalize all of them one by one. 101

101

And so to do that, 102

102

it would be good to have them inside of an array 103

103

that we can then loop over. 104

104

And so now we can use the split method for that. 105

105

So let's say names is equal to name, split by the space. 106

106

And so this will be an array and now we can then loop 107

107

over that array using the four off loop. 108

108

So const, let's just call this one word 109

109

of names or let's call it N which stands for name, 110

110

but I cannot reuse name 111

111

because that would then override this 112

112

input here and that's a bad practice, okay? 113

113

And so now here we will then capitalize this name. 114

114

So this individual name. 115

115

So remember how we did that in the last lecture 116

116

we took the first letter converted that to uppercase 117

117

and then joined it with basically the rest of the word. 118

118

So that's N.slice 119

119

starting from position number one. 120

120

So everything except the first letter 121

121

which is letter number zero, okay? 122

122

And now what should we do with this? 123

123

Well, I think we should push this into a new array 124

124

so that in the end we end up with an array 125

125

with all the names capitalized 126

126

and then we can join that array together. 127

127

So let's say const names upper 128

128

and start it as an empty array. 129

129

And then in each iteration 130

130

we will simply push into this array. 131

131

So sounds good to you, okay? 132

132

And now in the end, 133

133

let's then log to the console names, upper. 134

134

And so now we need to join that array back together 135

135

using a space as the separator, okay? 136

136

So here we practice a lot of different methods 137

137

all in one function. 138

138

So this is a really great use case. 139

139

So let's now give it a try and indeed it worked. 140

140

So great right? 141

141

No matter how long a name we feed into the function 142

142

it will always give us the correct output. 143

143

Now here's a small challenge for you 144

144

because there is another way of doing this. 145

145

So basically of doing the capitalization of one name. 146

146

So given what we already learned 147

147

and especially in the last lecture 148

148

can you think of a different way of doing this? 149

149

And if you can't, it's not a problem at all 150

150

but maybe you can pause the video here for a minute or two 151

151

and think about this. 152

152

So let me just show it to you quickly, 153

153

because I think this is really interesting 154

154

that we have different ways of achieving the same thing. 155

155

And so this time what will we push into the array here 156

156

is simply N and then in there we replace the first letter 157

157

with the first letter in uppercase. 158

158

So let me write that. 159

159

So that's N at position zero 160

160

and replaced with N at position zero to upper case 161

161

let's give it a try and we get the same result, all right? 162

162

So again, we are here simply taking the word 163

163

and then we replaced the first character. 164

164

So that's N at position zero 165

165

with the first character to uppercase. 166

166

So that's a completely different approach 167

167

than this one here, 168

168

but it gives us the same result. 169

169

Now next up, let's talk about padding a string. 170

170

Now padding a string means 171

171

to add a number of characters to the string 172

172

until the string has a certain desired length. 173

173

So padding 174

174

and let's just create a message here 175

175

go to gate 23. 176

176

So now let's take a look at padding here. 177

177

So I will take message, 178

178

and then I can say padstart 179

179

and so this will then add some characters 180

180

to the beginning of the string. 181

181

And the first argument here is the 182

182

length that we want for the string. 183

183

Let's say we want it to be 25 characters long, 184

184

so after the padding. 185

185

And then the character that 186

186

we want to pad the string with. 187

187

So let's use plus 188

188

and let's take a look, okay? 189

189

And so you'll see that at edit 190

190

all of these here. 191

191

And so now the length 192

192

of this entire string here 193

193

should be 25, okay? 194

194

So let me show that to you 195

195

with another string here. 196

196

So if I said Jonas, 197

197

and then the same, 198

198

you would see that it would add a lot more 199

199

of the plus signs 200

200

because the initial string is shorter. 201

201

So you see you, 202

202

we have a lot more pluses now 203

203

but in the end 204

204

the string is also a 25 205

205

or actually 23 206

206

so mistake here. 207

207

So now the string is also 25 long. 208

208

And so we see here at this 209

209

has exactly the same length 210

210

as this one here in the console, alright? 211

211

Then there's also pad ENT. 212

212

And so we can now take the result of this, 213

213

and immediately also pad the end of the string. 214

214

So pad end 215

215

and now let's make it longer 216

216

and then again the plus sign. 217

217

So this will basically then add 218

218

10 pluses to the end of the string 219

219

because the result of this string here 220

220

is already 25 characters long, right? 221

221

And so onto this one 222

222

we then pet it all the way 223

223

until the length of 35 with some more pluses, 224

224

and so we're gonna add 10 of them. 225

225

Let's just do a 30, 226

226

so we can easily see that, 227

227

and so indeed it now added five of them here. 228

228

And just for the sake of completion 229

229

let's do the same here with my name 230

230

and this here just to 20 231

231

to make it a bit more even, 232

232

alright? 233

233

But now let's actually use a more 234

234

real world example of padding here. 235

235

So when you see a credit card number on the internet, 236

236

you never see the entire number, right? 237

237

So usually we see the last four digits 238

238

and the rest is masked with some symbol. 239

239

So let's implement a function that 240

240

actually does that masking. 241

241

So this is gonna be really interesting. 242

242

This is a great application of string methods. 243

243

So mask credit cards function. 244

244

And so we're gonna receive a number, okay? 245

245

So an actual number 246

246

and let's start by converting this number to a string. 247

247

So string, 248

248

now we learned how to convert a number to a string 249

249

in the fundamental section, right? 250

250

So that was like this, remember? 251

251

However, there is a nice trick 252

252

that actually makes this easier for us. 253

253

So we can just take the number 254

254

and then we add an empty string. 255

255

And so the result of this 256

256

will be the number 257

257

but as a string. 258

258

And this works 259

259

because as you hopefully remember 260

260

when one of the operands of the plus sign is a string 261

261

it will convert all the operands to a string. 262

262

And so then this number will become a string 263

263

plus the empty string 264

264

and so then it's gonna stay exactly the same, okay. 265

265

So in order to know what we should do here 266

266

let's one more time 267

267

first call the function 268

268

before we actually write it 269

269

so that we know what kind of input we get. 270

270

So mask credit card 271

271

and let's say, now the number is this one 272

272

and I'm just putting something random here. 273

273

But of course it will also work with strings 274

274

and no matter how long it is, alright? 275

275

So as I was saying, 276

276

usually on the internet 277

277

we can only see these last four digits 278

278

and the rest is masked by some symbol. 279

279

So what we need to do here 280

280

is basically to take out these four numbers 281

281

and then use padstart 282

282

to create a string with the same length 283

283

as this initial number here 284

284

but with some kind of symbol there. 285

285

So let me just write that in code, 286

286

and then I hope it will become clear. 287

287

So we're gonna take the last four characters of the string. 288

288

And so, we use slice 289

289

with a negative parameter again of minus four. 290

290

And now here is what we're gonna return, 291

291

we will return a last. 292

292

So that is just these four characters. 293

293

And then we will Pad it at the start 294

294

all the way until the original length of the string. 295

295

So string.length 296

296

and the character we're gonna use will be this star, okay? 297

297

And so since we returned something 298

298

to make this function a bit more real 299

299

now we need to lock the result to the console 300

300

and to start let's actually make 301

301

a slightly simpler version 302

302

so that we see that it actually worked. 303

303

So a shorter number here 304

304

with just eight digits. 305

305

And so the end should be 7836 306

306

and then beginning with four stars. 307

307

So let's see, 308

308

and yeah, that worked great, 309

309

right? 310

310

So again, we took the last four here 311

311

and then we padded the rest of the string 312

312

until it matched the original length of the string 313

313

which was eight and therefore four stars were added. 314

314

And the same here and to same here. 315

315

Awesome. 316

316

That's really fantastic application 317

317

of this method, I think. 318

318

And now to finish the last simple method that I want to 319

319

show you is the repeat method. 320

320

So repeat 321

321

and as the name says, 322

322

this one simply allows us to repeat 323

323

the same string multiple times. 324

324

So let's say there is some bad weather at Wen airport. 325

325

So when that happens 326

326

they usually have those long messages on the screen, 327

327

like with the texts repeating 328

328

which then keeps running and repeating all the time. 329

329

So let's call this one message. 330

330

So let's call it message two 331

331

we already have a message up there. 332

332

So let's say bad weather 333

333

all departures 334

334

delayed, okay? 335

335

And now we want to 336

336

basically create a bigger string 337

337

repeating this one here multiple times. 338

338

So that's easy enough. 339

339

We just take this string 340

340

call repeat, 341

341

so repeat 342

342

and then the number of times we want to repeat it, 343

343

let's say five 344

344

and there it is. 345

345

So this is all the same long string 346

346

and we should just add one space here at the end. 347

347

And so you'll see 348

348

now you can see it even better. 349

349

That it's all just one big string 350

350

with the same message repeating over and over again. 351

351

Or we can also simulate 352

352

that due to the bad weather 353

353

there are now many planes waiting in line for takeoff. 354

354

So let's create a fun function for that. 355

355

So planes in line 356

356

and here the number of planes. 357

357

So console.log 358

358

there are N planes in line. 359

359

And then here we can kind of show that 360

360

graphically using an emoji like this, 361

361

let's say plain, 362

362

I'm gonna use this one. 363

363

And so this here in fact counts as a string. 364

364

So let's create a string with that 365

365

and then repeat it. 366

366

And we will repeat it as many times 367

367

as there are planes waiting. 368

368

So planes in line 369

369

here we have five waiting, 370

370

then let's call it on in other airport 371

371

where there are just three planes waiting 372

372

and then 12. 373

373

So indeed, now we have five planes here, three 374

374

and here, 12 planes, alright? 375

375

Okay, cool. 376

376

Now we didn't talk about 377

377

all of these string methods that exist 378

378

but if you want to check them out, 379

379

you can do so on MDN. 380

380

And what I like to do is to simply search 381

381

for one of the methods, 382

382

let's say, string replace 383

383

and then that will take me to that page of replace 384

384

because then on the left side, 385

385

at least when the window is a bit bigger. 386

386

So then here we can see all 387

387

of the different string methods that we can use. 388

388

So we used split, slice, repeat, padstart, pad end. 389

389

But as you can see there are even more here 390

390

but actually we talked about all of the most important ones. 391

391

Maybe one that you can check out is 392

392

let's see 393

393

concat maybe 394

394

or there should one be called reverse. 395

395

Well, actually it is not here, 396

396

but anyway, as you see we talked about 397

397

most of the most important string methods here. 398

398

And so I hope you had fun with this. 399

399

And I see you in the next video 400

400

where we then have a challenge 401

401

where you can then use all of 402

402

this knowledge that you just gained here 403

403

over the past three videos.