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.