Original subtitles

1 1

So, over the last couple of videos, 2

2

we have learned how to work with strings 3

3

and also did a couple of exercises and one challenge. 4

4

But many people have actually asked me 5

5

to create even more string exercises. 6

6

And so in this lecture, we're gonna solve basically 7

7

one more challenge and do one more nice string exercise. 8

8

So somewhere at the beginning of your starter files 9

9

you will have this flights string like this. 10

10

And so our goal is basically to transform 11

11

this (indistinct) mess here, 12

12

which is the string into this nicely formatted output 13

13

which contains all the information that is 14

14

in this string here, but then put it in a way 15

15

that is actually legible to people. 16

16

So let's pretend for example that we get this string here 17

17

from some kind of web API. 18

18

And our goal in our application 19

19

is tend to display the data like this. 20

20

So, let's start by taking a look at our string here 21

21

so that we can think about how to approach this problem. 22

22

So, we see that we have basically four lines of output here. 23

23

And so, if we take a look at the string, we can see 24

24

that we have here this first part, 25

25

then we have this plus sign. 26

26

And so you see that here's another one and another one. 27

27

And so essentially this plus sign, 28

28

acts as a separator between 29

29

these four pieces of information. 30

30

So these four flights. 31

31

So this one here I showed you as the first one. 32

32

Then here we have the second one, 33

33

the third one and the fourth one. 34

34

So let's start by dividing that up so that we can transform 35

35

this one string into these four pieces. 36

36

And for now I will simply lock the result of doing that 37

37

to the console just so we can get a first look at this. 38

38

So remember that for that, 39

39

we are going to use the split method. 40

40

So flights.split and then we specify 41

41

by which character we want to split the string. 42

42

So give it a safe, and then you see that we get this array, 43

43

and this array contains now, 44

44

these four pieces of information, so these four flights. 45

45

Now, again, you see here that we have actually one line 46

46

for each of the flights. 47

47

So that means that we want to lock to the console 48

48

one line for each flight. 49

49

And so we should probably loop over this array 50

50

and then create a string like this 51

51

in each of the iterations. 52

52

And so we also learned how to do that in this section, 53

53

so we can use the for of loop. 54

54

So let's say that each of them is a flight 55

55

and here we can then directly use a flights.split 56

56

which creates the array that we just saw. 57

57

And so again to start, let's just log each of the flights 58

58

here to the console in each iteration 59

59

and we can then get rid of this, 60

60

and here we are trying to access that flight variable 61

61

but of course it is flights. 62

62

So this string here, and so now indeed we get 63

63

our four strings here locked separately to the console. 64

64

And now it's time to actually build 65

65

each of these nicely formatted string 66

66

out of his mess that we get here. 67

67

So again we can notice that we have an element 68

68

which basically splits or separates different pieces 69

69

of the information inside of the string. 70

70

So here we see, we have a delayed departure 71

71

and here we have this airport code, here another one, 72

72

and then here at the time of arrival 73

73

which is exactly what we have in the string. 74

74

So, here we have the late departure, the airport code 75

75

for Farrow, and then the airport code for Berlin. 76

76

And so therefore let's extract that information 77

77

from the string again, and so again, 78

78

I will start by splitting this variable 79

79

but this time using the semi-colon separator. 80

80

So exactly this, so you'll see it already worked. 81

81

And now all we need to do is to get this data 82

82

out of these arrays, then format each of these 83

83

four pieces here a little bit and then assemble each of them 84

84

into the final string. 85

85

So, we can do this in many different ways, 86

86

but what am gonna do, is to use destructuring 87

87

to take these four pieces out of the array. 88

88

So, remember destructuring, we use the erase syntax here 89

89

but to specify variables. 90

90

So the first variable here, let's call it the type 91

91

because we can have departures and arrivals. 92

92

So that's the type the second one is the from, 93

93

so you see here that the first airport code is the from 94

94

and the second is the to. 95

95

So from FAO to TXL. 96

96

So the third one is to, and then the last one is the time. 97

97

So 1125, which we will then transform here 98

98

into 11H 25 like this. 99

99

So now of course we don't have the output anymore 100

100

but anyway, let's now start creating or output string here. 101

101

So I'm gonna call that output, 102

102

and of course, we're going to use a template literal 103

103

and I will start by simply put these for variables 104

104

that we just created in here, 105

105

and so then we can format each of them individually. 106

106

So that's type, from, to, and then the time. 107

107

And we can already put that inside parenthesis, 108

108

just as we have a it here, and then to finish 109

109

we will just lock that nicely to the console. 110

110

And so, now indeed, we have four strings right here. 111

111

So let's now individually format each of these four pieces. 112

112

And I'm gonna start here with the time 113

113

which is the easiest one. 114

114

So here we just want to replace the colon with an H. 115

115

All right, that worked beautifully. 116

116

And now, let's go to the type. 117

117

So you see that in a type, we always have these underscores 118

118

which of course we want to get rid of. 119

119

So here it should just say delayed departure 120

120

with a space instead of the underscore 121

121

and here in the arrival we basically 122

122

also want to get rid of the underscore. 123

123

So essentially, we're just gonna replace the underscore 124

124

with an empty space. 125

125

So here we can now actually use that years 2021 method 126

126

that I mentioned before, but which didn't work back then, 127

127

but now as I'm recording this video, replace all, 128

128

actually already works in Google Chrome. 129

129

And so, here we can now use, replace all. 130

130

Alright, so again, this is an ES 2021 method 131

131

which is brand new in JavaScript 132

132

and which allows us to replace all incidents 133

133

of a certain string at once. 134

134

And so again, we're gonna replace the underscore 135

135

with a space. 136

136

That's nice. 137

137

Now we see here that we have this empty space 138

138

at the beginning of each string 139

139

but we gonna take care of that later 140

140

because we will have to add some strings here 141

141

or actually some spaces anyway 142

142

in order to create this format here. 143

143

So it this and all of these spaces here. 144

144

So don't worry about that for now, instead, 145

145

what we're gonna do now is to add these red dots here. 146

146

So these are actually emojis and we will add this emoji 147

147

whenever the departure or the arrival is delayed. 148

148

So basically to symbol that there is a delay. 149

149

So this applies to both departures and arrivals like this. 150

150

So basically we want to add this emoji whenever the type, 151

151

so which is remember all of this, so this here. 152

152

So whenever this starts with the string delayed, 153

153

then we want to add this emoji here. 154

154

So, Let's do that. 155

155

And we actually have a nice and easy string method for that 156

156

which we already talked about, which is the starts with. 157

157

So starts with, and so here we're asking 158

158

if the string starts with delayed, 159

159

so actually like this, and remember 160

160

that this is going to return a bullion. 161

161

And so this is perfect to then use a conditional 162

162

like the turnery operator to return something 163

163

in case this is to. 164

164

So, in case it is to, here we want to add this emoji 165

165

so we can just come here and copy it, paste it here. 166

166

And if not, then simply add nothing. 167

167

Well, that didn't really work. 168

168

All it did was to add like another space here 169

169

which is this one here. 170

170

But I think I know what the problem is, 171

171

which, lemme actually show this to you 172

172

by logging here again, the type. 173

173

So we are looking if the string, 174

174

so if the type string starts with delayed 175

175

but in fact it does start 176

176

with _delayed at this point. 177

177

And so therefore we need to add that here 178

178

to our test as well. 179

179

And then it works just like expected. 180

180

So let's take away that log here 181

181

and let's actually take away that space. 182

182

And so now we have a more evenly spaced text here. 183

183

Great, and actually we're almost done here. 184

184

All we have to do is to now format these airport codes. 185

185

Now we have all of these numbers here and here as well 186

186

but it don't really serve any purpose here 187

187

for formatting the string. 188

188

So all we want is the three letters here, 189

189

which any airport code is made of. 190

190

So it's always just three letters 191

191

but the number afterwards, we don't care about it at all. 192

192

So basically what we will do to this string 193

193

and also this here, is to take the first three letters 194

194

and then convert them to uppercase. 195

195

And then that's actually it. 196

196

So, let's do what I just said. 197

197

So we use the slice method to take the first three elements. 198

198

So from position zero, all the way to three, 199

199

where three is not included, 200

200

so we're taking zero one and two 201

201

and then we can simply chain the two upper case method 202

202

onto that, and there we go. 203

203

So that's four now and now we can copy 204

204

the same thing from here to here. 205

205

But let's actually not do that, 206

206

but I will create a small refactor outside here. 207

207

So basically create just a small function called getCode 208

208

which gets a string, and then from that string, 209

209

it does this. 210

210

So let's cut that, and that's it. 211

211

So it's just a nice and simple arrow function 212

212

just for the small use case. 213

213

And notice how I defined this variable here 214

214

outside of the loop, because otherwise, 215

215

this function here is gonna be defined 216

216

over and over again which is not necessary. 217

217

So now we can just rep this into parenthesis 218

218

and pass it into getCode, 219

219

and so that will then take this string, 220

220

pass it into this function, 221

221

which will then do the formatting that we wanted 222

222

and we'll return it and let's do the same thing 223

223

to the destination and, that's it. 224

224

So, we are almost done now. 225

225

So a string is nicely formatted. 226

226

It looks just or at least almost like these ones here. 227

227

Now, the only thing that's different, 228

228

is that here they are basically all aligned 229

229

to the right like this 230

230

so that we have these airport codes here 231

231

and the times all in the same position 232

232

which makes the strings a lot easier to read. 233

233

And do you remember how we can do that? 234

234

So for that we can use the padStart method 235

235

that I also introduced some time ago. 236

236

So, we can do that on the entire string 237

237

which ends right here. 238

238

So the output string starts here and ends here. 239

239

And we now want to apply the padStart method 240

240

on the entire string 241

241

so we can change that right here. 242

242

We could also put it here like this, 243

243

but this formatting should actually be a part 244

244

of the string itself. 245

245

And so let's actually edit right here. 246

246

So let's try 50 here and remember that by default, 247

247

the default character that will pet the string 248

248

is an empty space. 249

249

So if we gift as a safe now, then you see that indeed, 250

250

everything is now actually aligned here. 251

251

But 50 is apparently a bit too much, let's try 20, 252

252

which is not really enough. 253

253

Let's try 40 here maybe or 30, just as be a little bit 254

254

like trial and error until it looks nice. 255

255

But 36, it is. 256

256

So now everything is nicely aligned, and all these strings 257

257

are now exactly 36 characters long, 258

258

which is exactly what this padStart does. 259

259

So to makes sure that the string has exactly this length, 260

260

and if it doesn't, then it keeps adding the string 261

261

or so the character that we define here. 262

262

So we could also do like this, and then it would add 263

263

this character here, but we simply want a space. 264

264

And so we can just get rid of that. 265

265

And then automatically it adds this empty space. 266

266

And that's actually it, that solves the problem 267

267

that we set out to solve in the beginning. 268

268

And on the way we practiced many of these methods 269

269

that I showed you before. 270

270

And we also use the IES 2021 method here, 271

271

replace all for the first time. 272

272

So I hope that you found this exercise useful 273

273

and that you're now even more comfortable 274

274

working with strings on your own.