Original subtitles

1 1

So in the last video, 2

2

we formatted dates using the Internationalization API. 3

3

So now let's actually format regular numbers. 4

4

And let's start by doing some experiments 5

5

in the console first, 6

6

before we move on to our application. 7

7

(types on keyboard) 8

8

So I'm just defining some number here. 9

9

It doesn't really matter which one, 10

10

just so we can experiment with it a little bit. 11

11

(types on keyboard) 12

12

Okay, so let's do the most basic formatting now 13

13

simply doing new 14

14

and then again, this INTL namespace. 15

15

And now this time we use number, 16

16

format. 17

17

And so this again, takes in a locale string. 18

18

And so let's experiment with the US. 19

19

Okay. 20

20

And so all of this year creates a formatter. 21

21

And then one more time on that, 22

22

we can call the format method, 23

23

where we then pass in what we actually want to format. 24

24

And so that is this number. 25

25

Let's just also log here to the console, 26

26

that this is about the US, 27

27

(types on keyboard) 28

28

so that we can then have 29

29

some other locales as well. 30

30

Okay, so you see that the number is not 31

31

formatted using these dividers here. 32

32

So these commas here as separators. 33

33

so that it's easier to read 3,884,000, 34

34

and so on. 35

35

But let's see how it works in other countries. 36

36

So in Germany for example, 37

37

it is different. 38

38

Let's add some spaces here. 39

39

Okay. 40

40

And so here we want, 41

41

(types on keyboard) 42

42

like this. 43

43

(types on keyboard) 44

44

And since we're doing this, 45

45

let's try some other countries here as well. 46

46

(types on keyboard) 47

47

Let's just say Syria, why not? 48

48

So the one that I used earlier as well. 49

49

So that is a Arabic 50

50

and then the country is SY. (types on keyboard) 51

51

Now and you see that in Germany, 52

52

as in general in Europe, 53

53

the separator is the dot, 54

54

and then a comma 55

55

for the decimal part. 56

56

So basically just the opposite, 57

57

as it is in the US 58

58

as you see here. 59

59

And then for Syria, well, 60

60

it's even more different. 61

61

I cannot even read this, of course. 62

62

And of course, we can also just use 63

63

(types on keyboard) 64

64

the locale from the browser. 65

65

So that was the navigator, 66

66

(types on keyboard) not language. 67

67

And actually, let's log that here. 68

68

And so, 69

69

yeah, in the UK, 70

70

it's basically the same as in the US. 71

71

So again, this is just the most basic formatting. 72

72

But let's not define an object here. 73

73

So again, options for this formatting. 74

74

But of course, now we have other properties in this object. 75

75

It's no longer day or month, 76

76

or something like this, 77

77

but instead we can specify the style, 78

78

(types on keyboard) 79

79

for example. 80

80

And here, we can say that this is a unit. 81

81

And then we can set the unit property 82

82

(types on keyboard) to something. 83

83

And let's say mile 84

84

per 85

85

hour, 86

86

and there are tons of units like this. 87

87

And so as always, you can read more 88

88

about the units that are available in the documentation. 89

89

But let's see what happens now. 90

90

Now, but apparently nothing happens. 91

91

Now we just need to pass in this options here. 92

92

Of course into the number format function. 93

93

So again, as a second argument, 94

94

and let's do that here, 95

95

in all of the four at the same time, 96

96

using these multiple cursors. 97

97

(types on keyboard) 98

98

And let's give it a save. 99

99

And indeed, now we get this unit here. 100

100

And one more time you see that it's 101

101

written differently in the US 102

102

or in Germany for example, 103

103

or in Europe in general. 104

104

And you see in Syria or in Arabic, 105

105

apparently this is how you write 'miles per hour'. 106

106

Okay, but of course we can try others for example, 107

107

for temperatures, 108

108

there is Celsius. 109

109

And so indeed, 110

110

we get degrees Celsius. 111

111

So that is for unit. 112

112

But we can also say, 113

113

percent. 114

114

And then the unit is completely ignored. 115

115

So we get the percentage sign. 116

116

And again it is different in different countries. 117

117

So here we have the space. 118

118

And then there's also currency. 119

119

So these are the three different options for the style. 120

120

So that's unit, percent or currency. 121

121

And again, if we have a currency, 122

122

then the unit is just completely ignored. 123

123

But we do have to then define the currency. 124

124

(types on keyboard) 125

125

So let's say euro, 126

126

and for that it is like this, 127

127

so E-U-R. 128

128

(types on keyboard) 129

129

And so if we give it a save, 130

130

then we get indeed the euro sign. 131

131

And so here in Europe, 132

132

it comes after the number 133

133

and in the US it comes before the number. 134

134

And it's important to understand that we do indeed 135

135

have to set this currency here, 136

136

because the currency is not determined by the locale. 137

137

Okay, so it's not defined by the country here. 138

138

Because it's of course possible to show for example euros 139

139

in the US. 140

140

All right. 141

141

And so of course, 142

142

we have to define the currency here manually. 143

143

So it's not gonna be implied from the locale string. 144

144

Okay. 145

145

Finally, we can also turn off or on the grouping. 146

146

So that's 'useGrouping'. (types on keyboard) 147

147

And let's experiment with false. 148

148

And then you'll see that the number is just printed 149

149

as it is without the separators. 150

150

So the grouping. 151

151

But let's get rid of this one here. 152

152

And again, if you're interested in even more properties 153

153

that you can set here in the options, 154

154

then just check out the documentation here on MDN. 155

155

Okay, but now what we're gonna do is 156

156

to actually use this knowledge 157

157

and implement currencies 158

158

here in our application. 159

159

So let's move up here. 160

160

And I'm gonna start here in the movement. 161

161

So, where is that function? 162

162

Now you see we have a lot of code here already. 163

163

And in the real world, 164

164

we then split up all this code into different files. 165

165

Okay, because as it is right now, 166

166

it is indeed a little bit messy. 167

167

But for now, it is just okay as we have it. 168

168

Now anyway, 169

169

right now we are displaying 170

170

the currency here in these movements, 171

171

right here. 172

172

So we convert everything to two decimal places. 173

173

And then we display the euro sign here ourselves. 174

174

But now we want the Internationalization API 175

175

to take care of all of this. 176

176

So let's create a variable out here. 177

177

So that we don't have to do all that formatting 178

178

here in the template literal. 179

179

So we do it outside here. 180

180

So let's call it 'formattedMovement'. 181

181

And then again we use new, 182

182

and then 183

183

(types on keyboard) 184

184

number format. 185

185

(types on keyboard) 186

186

And now you already know that we have the locale 187

187

right in the account object. 188

188

And so that's again acc, 189

189

right. 190

190

So just as we did here for formatting the date, 191

191

we use 192

192

acc 193

193

dot locale. 194

194

And then we also need an options object. 195

195

And this time, let's actually write that object right here. 196

196

So we need to set the style to currency. 197

197

And then we need to define the currency property. 198

198

So just as we did earlier in this video. 199

199

And let's just experiment a little bit here. 200

200

Let's say that we want US dollars instead of euros. 201

201

Okay. 202

202

And so now here we can get rid of all of this, 203

203

including the euro sign. 204

204

And now simply use this value. 205

205

So formatted, 206

206

(types on keyboard) movement. 207

207

Okay, give it a save. 208

208

And now we need to of course log in here. 209

209

But before doing that, 210

210

I see already that we have some problem here with, 211

211

is this [object Object]. 212

212

And the problem is that we here didn't even call 213

213

the format method. 214

214

So all we did was to define 215

215

this variable here as number format. 216

216

And so that's then this formatter, 217

217

remember. 218

218

But on that, 219

219

we then need to actually call the format method. 220

220

And so this is where we pass in the value 221

221

that should be formatted. 222

222

But that is simply the current movement. 223

223

So this 'Mov' value here. 224

224

So if I save it now, 225

225

then that should be fixed. 226

226

And indeed you already see US dollars right here. 227

227

But anyway let's login as Jonas now. 228

228

And yeah, everything is US dollars. 229

229

However, the number itself here is of course 230

230

still formatted in the Portuguese way. 231

231

So that's the current locale of the current user, remember. 232

232

So that's Jonas. 233

233

And the locale is pt-Pt, 234

234

remember. 235

235

And so therefore the number is still formatted in that way, 236

236

and not in an American way. 237

237

That's only for the currency. 238

238

Okay, so that's USD, 239

239

but the rest is still according to the users locale. 240

240

So that's what I said earlier, 241

241

that the currency is completely independent 242

242

from the locale itself. 243

243

So in this case, 244

244

we have a European country with an American currency. 245

245

All right. 246

246

Now indeed, 247

247

we also have the currency in the account object. 248

248

So we have the locale 249

249

and also the currency. 250

250

And so let's now get that currency also 251

251

from the account itself. 252

252

So 253

253

that's right here. 254

254

And so here we actually want account 255

255

dot 256

256

currency. 257

257

So if I load it now, 258

258

(types on keyboard) 259

259

then indeed we get euros. 260

260

All right. 261

261

And if I log in as Jessica Davis, 262

262

which has USD as the currency, 263

263

then we get the dollars, 264

264

and we get it also formatted in the American way. 265

265

Because for Jessica Davis, 266

266

the locale 267

267

is also, 268

268

it is English in the US. 269

269

And so this is what it looks like here 270

270

formatted for the US with US dollars. 271

271

Of course we could change this to euros. 272

272

And then, (types on keyboard) 273

273

of course now we would have the euro sign. 274

274

All right. 275

275

So one more time you can see how powerful this is, 276

276

and how easy it makes formatting for us developers. 277

277

Okay. 278

278

Now anyway that is the movements. 279

279

But now we also have the currency in a lot of other places, 280

280

for example, here in the balance, 281

281

and then also down here in the statistics. 282

282

So that starts to also implement the same formatting 283

283

here in the balance. 284

284

And so that is, 285

285

that's right here. 286

286

Okay. 287

287

So here we also have this old way 288

288

basically of formatting. 289

289

But we know that we can do better. 290

290

So we can now go ahead and grab all of this, 291

291

like this, 292

292

and paste it here, 293

293

and then use this. 294

294

Okay. 295

295

However, as you can guess, 296

296

that is not a good practice, 297

297

because we are repeating 298

298

the don't repeat yourself principle. 299

299

Right. 300

300

So let's get rid of this. 301

301

And 302

302

as you can guess, 303

303

we will create a new function here 304

304

which will take care of formatting the currencies. 305

305

(types on keyboard) 306

306

So let's call it 'formatCur', 307

307

which stands for currency. 308

308

(types on keyboard) So a new function. 309

309

And let's create a very reusable function here. 310

310

So instead of passing 311

311

a whole account object into this function, 312

312

which is very specific of course to this exact application. 313

313

Let's do a function that you could use 314

314

in any other application. 315

315

So basically a function that is less dependent 316

316

on the underlying application data. 317

317

Okay. 318

318

And so instead, 319

319

what we will do is to simply pass in 320

320

all the data that this function needs to work with. 321

321

(types on keyboard) 322

322

So that's the value, the locale 323

323

and the currency. 324

324

(types on keyboard) 325

325

Okay. 326

326

So again we could pass the entire account object, 327

327

here instead of these two. 328

328

But here we just want to do a reusable function. 329

329

And so this is a lot better for that. 330

330

(types on keyboard) 331

331

All right. 332

332

So this is the code that we had written earlier. 333

333

And here, we don't even need to create a new variable, 334

334

all we will do is to return the result 335

335

of this number format function. 336

336

Now, we just need to adapt this a little bit. 337

337

So here it's just the locale 338

338

that we get in here as an argument. 339

339

And then here the same for the currency. 340

340

And what we want to format is the value that we get in. 341

341

All right. 342

342

So again, a nice and simple reusable function 343

343

that can take any value any locale 344

344

and any currency, 345

345

and will then return this value here nicely formatted 346

346

for that locale 347

347

and currency. 348

348

So let's use that here. 349

349

So of course, instead of what we had before, 350

350

formattedMov will now become 351

351

format the currency. 352

352

And then the value is mov, 353

353

the locale, which I think it's the second one, 354

354

yeah, it is. 355

355

So it's very handy, 356

356

again here in VS code to just hover over the function name. 357

357

So the locale is at account, 358

358

dot locale 359

359

at the currency at account 360

360

dot currency. 361

361

(types on keyboard) 362

362

And so we can get rid of this. 363

363

Now I will just copy 364

364

this part here. 365

365

(types on keyboard) 366

366

And so now what we want to format is account 367

367

dot 368

368

(types on keyboard) balance. 369

369

Okay. 370

370

And we actually don't even have to store it 371

371

into a separate variable first, 372

372

we can just take this result directly, 373

373

and then display it as a text content 374

374

here in our application. 375

375

(types on keyboard) 376

376

So if I log in now as Jonas, 377

377

then this would already be nicely formatted. 378

378

And indeed it is. 379

379

So we see we have this nice separator here, 380

380

which makes our number easier to read. 381

381

And now as Jessica Davis, 382

382

it should be the American separator. 383

383

So with the comma here. 384

384

Okay. 385

385

So that's great. 386

386

All that's left now is these three values down here. 387

387

All right. 388

388

But that should be easy enough with the function 389

389

that we already created. 390

390

So let's just copy it here. 391

391

And then we simply basically need to paste it here 392

392

to these three places. 393

393

(types on keyboard) 394

394

So here it is the incomes that we want to format, right. 395

395

So incomes 396

396

(types on keyboard) 397

397

down here it is 398

398

this part here. 399

399

So the absolute value of the out. 400

400

And then finally down here, 401

401

it is the interest. 402

402

Now I copied 403

403

(chuckles) that code from earlier. 404

404

So again, it is this interest that we want to format now. 405

405

(types on keyboard) 406

406

So interest. 407

407

And indeed, you can already see even without logging in, 408

408

that it worked down here. 409

409

So we have this nice separator here, indeed. 410

410

And so if we log in again 411

411

with Jessica Davis, 412

412

to see it as US dollars, 413

413

then we get this nice result here as well. 414

414

Beautiful. 415

415

And actually, that's it for the Internationalization API. 416

416

That's all I had to show you. 417

417

But as I told you right in the beginning, 418

418

there is a lot more potential in this API.