Original subtitles

So in the last video,

we formatted dates using the Internationalization API.

So now let's actually format regular numbers.

And let's start by doing some experiments

in the console first,

before we move on to our application.

(types on keyboard)

So I'm just defining some number here.

It doesn't really matter which one,

just so we can experiment with it a little bit.

(types on keyboard)

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

simply doing new

and then again, this INTL namespace.

And now this time we use number,

format.

And so this again, takes in a locale string.

And so let's experiment with the US.

Okay.

And so all of this year creates a formatter.

And then one more time on that,

we can call the format method,

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

And so that is this number.

Let's just also log here to the console,

that this is about the US,

(types on keyboard)

so that we can then have

some other locales as well.

Okay, so you see that the number is not

formatted using these dividers here.

So these commas here as separators.

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

and so on.

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

So in Germany for example,

it is different.

Let's add some spaces here.

Okay.

And so here we want,

(types on keyboard)

like this.

(types on keyboard)

And since we're doing this,

let's try some other countries here as well.

(types on keyboard)

Let's just say Syria, why not?

So the one that I used earlier as well.

So that is a Arabic

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

Now and you see that in Germany,

as in general in Europe,

the separator is the dot,

and then a comma

for the decimal part.

So basically just the opposite,

as it is in the US

as you see here.

And then for Syria, well,

it's even more different.

I cannot even read this, of course.

And of course, we can also just use

(types on keyboard)

the locale from the browser.

So that was the navigator,

(types on keyboard) not language.

And actually, let's log that here.

And so,

yeah, in the UK,

it's basically the same as in the US.

So again, this is just the most basic formatting.

But let's not define an object here.

So again, options for this formatting.

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

It's no longer day or month,

or something like this,

but instead we can specify the style,

(types on keyboard)

for example.

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

And then we can set the unit property

(types on keyboard) to something.

And let's say mile

per

hour,

and there are tons of units like this.

And so as always, you can read more

about the units that are available in the documentation.

But let's see what happens now.

Now, but apparently nothing happens.

Now we just need to pass in this options here.

Of course into the number format function.

So again, as a second argument,

and let's do that here,

in all of the four at the same time,

using these multiple cursors.

(types on keyboard)

And let's give it a save.

And indeed, now we get this unit here.

And one more time you see that it's

written differently in the US

or in Germany for example,

or in Europe in general.

And you see in Syria or in Arabic,

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

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

for temperatures,

there is Celsius.

And so indeed,

we get degrees Celsius.

So that is for unit.

But we can also say,

percent.

And then the unit is completely ignored.

So we get the percentage sign.

And again it is different in different countries.

So here we have the space.

And then there's also currency.

So these are the three different options for the style.

So that's unit, percent or currency.

And again, if we have a currency,

then the unit is just completely ignored.

But we do have to then define the currency.

(types on keyboard)

So let's say euro,

and for that it is like this,

so E-U-R.

(types on keyboard)

And so if we give it a save,

then we get indeed the euro sign.

And so here in Europe,

it comes after the number

and in the US it comes before the number.

And it's important to understand that we do indeed

have to set this currency here,

because the currency is not determined by the locale.

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

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

in the US.

All right.

And so of course,

we have to define the currency here manually.

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

Okay.

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

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

And let's experiment with false.

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

as it is without the separators.

So the grouping.

But let's get rid of this one here.

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

that you can set here in the options,

then just check out the documentation here on MDN.

Okay, but now what we're gonna do is

to actually use this knowledge

and implement currencies

here in our application.

So let's move up here.

And I'm gonna start here in the movement.

So, where is that function?

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

And in the real world,

we then split up all this code into different files.

Okay, because as it is right now,

it is indeed a little bit messy.

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

Now anyway,

right now we are displaying

the currency here in these movements,

right here.

So we convert everything to two decimal places.

And then we display the euro sign here ourselves.

But now we want the Internationalization API

to take care of all of this.

So let's create a variable out here.

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

here in the template literal.

So we do it outside here.

So let's call it 'formattedMovement'.

And then again we use new,

and then

(types on keyboard)

number format.

(types on keyboard)

And now you already know that we have the locale

right in the account object.

And so that's again acc,

right.

So just as we did here for formatting the date,

we use

acc

dot locale.

And then we also need an options object.

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

So we need to set the style to currency.

And then we need to define the currency property.

So just as we did earlier in this video.

And let's just experiment a little bit here.

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

Okay.

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

including the euro sign.

And now simply use this value.

So formatted,

(types on keyboard) movement.

Okay, give it a save.

And now we need to of course log in here.

But before doing that,

I see already that we have some problem here with,

is this [object Object].

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

the format method.

So all we did was to define

this variable here as number format.

And so that's then this formatter,

remember.

But on that,

we then need to actually call the format method.

And so this is where we pass in the value

that should be formatted.

But that is simply the current movement.

So this 'Mov' value here.

So if I save it now,

then that should be fixed.

And indeed you already see US dollars right here.

But anyway let's login as Jonas now.

And yeah, everything is US dollars.

However, the number itself here is of course

still formatted in the Portuguese way.

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

So that's Jonas.

And the locale is pt-Pt,

remember.

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

and not in an American way.

That's only for the currency.

Okay, so that's USD,

but the rest is still according to the users locale.

So that's what I said earlier,

that the currency is completely independent

from the locale itself.

So in this case,

we have a European country with an American currency.

All right.

Now indeed,

we also have the currency in the account object.

So we have the locale

and also the currency.

And so let's now get that currency also

from the account itself.

So

that's right here.

And so here we actually want account

dot

currency.

So if I load it now,

(types on keyboard)

then indeed we get euros.

All right.

And if I log in as Jessica Davis,

which has USD as the currency,

then we get the dollars,

and we get it also formatted in the American way.

Because for Jessica Davis,

the locale

is also,

it is English in the US.

And so this is what it looks like here

formatted for the US with US dollars.

Of course we could change this to euros.

And then, (types on keyboard)

of course now we would have the euro sign.

All right.

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

and how easy it makes formatting for us developers.

Okay.

Now anyway that is the movements.

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

for example, here in the balance,

and then also down here in the statistics.

So that starts to also implement the same formatting

here in the balance.

And so that is,

that's right here.

Okay.

So here we also have this old way

basically of formatting.

But we know that we can do better.

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

like this,

and paste it here,

and then use this.

Okay.

However, as you can guess,

that is not a good practice,

because we are repeating

the don't repeat yourself principle.

Right.

So let's get rid of this.

And

as you can guess,

we will create a new function here

which will take care of formatting the currencies.

(types on keyboard)

So let's call it 'formatCur',

which stands for currency.

(types on keyboard) So a new function.

And let's create a very reusable function here.

So instead of passing

a whole account object into this function,

which is very specific of course to this exact application.

Let's do a function that you could use

in any other application.

So basically a function that is less dependent

on the underlying application data.

Okay.

And so instead,

what we will do is to simply pass in

all the data that this function needs to work with.

(types on keyboard)

So that's the value, the locale

and the currency.

(types on keyboard)

Okay.

So again we could pass the entire account object,

here instead of these two.

But here we just want to do a reusable function.

And so this is a lot better for that.

(types on keyboard)

All right.

So this is the code that we had written earlier.

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

all we will do is to return the result

of this number format function.

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

So here it's just the locale

that we get in here as an argument.

And then here the same for the currency.

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

All right.

So again, a nice and simple reusable function

that can take any value any locale

and any currency,

and will then return this value here nicely formatted

for that locale

and currency.

So let's use that here.

So of course, instead of what we had before,

formattedMov will now become

format the currency.

And then the value is mov,

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

yeah, it is.

So it's very handy,

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

So the locale is at account,

dot locale

at the currency at account

dot currency.

(types on keyboard)

And so we can get rid of this.

Now I will just copy

this part here.

(types on keyboard)

And so now what we want to format is account

dot

(types on keyboard) balance.

Okay.

And we actually don't even have to store it

into a separate variable first,

we can just take this result directly,

and then display it as a text content

here in our application.

(types on keyboard)

So if I log in now as Jonas,

then this would already be nicely formatted.

And indeed it is.

So we see we have this nice separator here,

which makes our number easier to read.

And now as Jessica Davis,

it should be the American separator.

So with the comma here.

Okay.

So that's great.

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

All right.

But that should be easy enough with the function

that we already created.

So let's just copy it here.

And then we simply basically need to paste it here

to these three places.

(types on keyboard)

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

So incomes

(types on keyboard)

down here it is

this part here.

So the absolute value of the out.

And then finally down here,

it is the interest.

Now I copied

(chuckles) that code from earlier.

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

(types on keyboard)

So interest.

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

that it worked down here.

So we have this nice separator here, indeed.

And so if we log in again

with Jessica Davis,

to see it as US dollars,

then we get this nice result here as well.

Beautiful.

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

That's all I had to show you.

But as I told you right in the beginning,

there is a lot more potential in this API.