Instructor: In this lecture,
we'll take care of giving the numbers
that we display on the UI a proper formatting,
so that they are easier to read, and look better.
And so in this lecture,
you're gonna learn how to use different string methods
to manipulate strings.
Easy as that.
So this is the look and feel that we're trying to achieve
with our numbers on the UI,
and there are basically three rules.
And the first rule is that all numbers
have a decimal part with exactly two numbers,
even if they are originally integers.
So for example, this 1500 here is written as 1500.00.
And that is so that all the numbers
are always equally aligned,
so in this case here, for example,
we have -900.00 and 98.63,
and so you see they're all aligned.
Now the second rule is that all the expenses
always have this minus sign here in front of them,
and then the space.
So here, as well as here,
while all the income numbers are positive numbers,
so they have this plus sign, and also this space.
And the third rule is that if a number is in the thousands,
then we have this comma separator here,
like in this case here, or also here.
So these three rules is what we're gonna implement now.
Okay, so let's go back to our app file,
and what we're gonna do here
is to simply add a method to the UI controller,
and then each time that we display a number
on the user interface,
we call that method, and input the number into that method,
and then output the formative number, okay?
So let's edit somewhere down here, let's say here, okay.
So, formatNumber,
and then the input that we receive is, of course,
the number that we want to format.
And then we also need the type.
So if it's an expense or an income,
because remember, if it's an expense,
we want to prepend the minus sign,
and if it's an income, we want to add the plus sign.
So we need type here, as well,
and actually, this is not how it should be done right.
So, of course, here's the function.
So now it's correct.
So let's write our rules here.
So plus or minus before the number,
exactly two decimal points,
and a comma separating the thousands.
Let's see some examples.
Imagine we have 2310.4567,
so this should become +, space, 2,310.46.
So we're going to round this decimal part here to 46, right?
Or another example, let's say we have 2000, simply,
and this is going to become + 2,000.00.
Okay, so this is the formatted 2000,
so this looks much nicer, and it's easier to read.
All right, and how are we going to do that?
Now, the first thing that I want to do
is to calculate the absolute part of the number,
so this means that, for example, if it's minus 2000,
that it should be, simply, 2000.
So I want to just work with the number,
and without the design of the number, okay?
So I'm saying num should be,
and once again, the Math object,
and then .abs, which stands for absolute.
So the absolute simply removes the sign off the number.
And here I'm gonna input the number that we receive
as an argument, right?
And this is also where I store the result of this,
and I can of course do this,
because, as we know,
this is treated a regular variable here in our function.
So by doing this calculation here,
I'm basically overriding the num argument.
All right,
so the absolute number is now stored in this num variable.
Now, the next step is to actually take care
of the number of the decimal numbers.
And there is a very handy number method
that we can use for that, which is called toFixed.
So I can simply say num = num.toFixed, and then 2.
Now, this is not a method of the Math object,
such as the abs method
that we used before here for absolute,
but instead, this is a method of the number prototype,
and as I mentioned earlier already,
the strings and numbers can also have methods,
even if they are originally primitive data types.
But if we attempt to use methods on them,
such as we do here,
so this is a primitive number,
but now, I'm going to use a method here,
then JavaScript automatically converts them to objects,
and then we can use their methods, just like this.
What this does
is to always put exactly two decimal numbers
on the number on which we call the methods,
and that is exactly what we want, right?
So if we input this number here,
it will nicely round it to this number,
and if we put in a number without any decimals,
then it will also add these decimals, such as we have here.
And actually,
let's take a look at that in the console, okay?
And actually, let's go back to the original app
that we were working on, right?
So this one.
So let's now try this.
So if I wrap the number in parentheses,
like, let's say 2.4567,
now I can call the method, toFixed, and 2.
So this gives me a string,
and notice this really is a string,
which is two decimal numbers that we want,
and it rounds it nicely,
because there's a six after the five,
so it gets rounded to six.
And now, if I have just two, for example,
let's see, it's gonna convert it to 2.00.
So exactly the rule that we want, right?
So let's go back.
So after this line here,
we have a string which already respects our rule
with the two decimal numbers.
And once again, I'm storing this into the num variable,
because I don't want this result from here anymore,
so I simply override it into the same variable.
Okay, and now we need to think
about this comma separating the thousands,
and that's gonna be the trickiest part.
So let's start by splitting up this number
into the decimal part,
and the integer part,
and we can do that using the split method on the string,
because remember, this is now a string,
and we already used the split method before actually,
and so it's really easy.
So let's say numSplit, okay, is the num.split.
And the string that we're gonna use
to split the number in two will be the point.
Okay, let me just declare the variable here.
So var numSplit,
so what this will do is to divide this number that we input,
so num, into two parts.
The integer part, for example, 2310,
and then the decimal part,
which will be, in this case here, 46.
And it's gonna be stored in an array, right?
So we can say that integer is the numSplit 0,
so the first element of the array,
and the decimal part is numSplit 1, so the second part.
Now, I need to just declare these variables up here,
int and dec.
All right.
So the decimal part has already been taken care of,
and now we just need to add this comma here,
if we have a thousand.
So let's do that, and we do that using an if else statement,
and remember this int is still a string,
and on a string, such as on an array,
we have access to the length property, okay?
So using length on a string,
it gives us, of course, the length of a string.
So for example, if the string is number,
then it will return six,
because number is made up of six characters.
In this case our string is a number, so basically,
it will give us how many numbers are in our number.
So if we have more than three,
then it's more than a thousand, right?
For example, this 2310, it has four.
So in this case, we need to add the comma, right here.
Now, in here, we are going to use a method called substring,
and substring allows us to only take a part of a string.
So this method is gonna return
simply the part of the string that we want.
So let's say, int.substring,
so it's written like this, substr,
and then in here, the first argument
is the index number where we want to start,
and the second number is how many characters we want.
So imagine that we write 0 and 1,
then this means that we're gonna start at position zero,
so right in the beginning, and read one element.
So imagine it would be this number,
then this end substring would return only the two,
because we start at position zero, and read one number,
so this would return the string 2.
And let me actually save it to the invariable, again,
so again, we're gonna override what's in this variable,
because we don't want it anymore.
We're just interested in the result of this execution.
Okay, so this gives us the first part of the number,
and now we can simply add the comma,
and then take the last three parts, right?
So, really easy.
So we can add the comma,
and then take another substring.
So int.substring, and now we want to start at position 1,
and read three numbers, right?
So let's see, in this case,
we will start at position 1, and then read three numbers.
One, two and three.
So the result of this, if the input is 2310,
then the result would be 2,310.
So it makes sense?
So this is exactly what we want, right?
Well, not really,
because imagine that the number would not be 2310,
but let's say 23510.
Then the output would be simply 2,3510, so a comma here.
So this would be the output,
and that's not what we want, right?
We want the comma in here, not here.
So we cannot simply say that we want to read 1 here,
and then from 1 to 3.
So these numbers are hard coded,
but we actually want to make them more dynamic.
The way we do it is to, again,
use the length property of the string.
If we say int.length - 3, then it's gonna work.
Let me show you why.
So let's go back to this first case here, with 2310.
The length would be four,
and then minus three would be one, right?
And then we would have the one that we had before.
Now, if the number would be this, so 23510,
then the length would be five,
and five minus three would be two,
and then the comma would be here.
So this is what we need, right?
Then we also need to change it here.
So we already know that this is int.length - 3,
and then we want it
all the way to the end of the string, right?
At the end of the string is, of course,
simply the length of the string.
Now this is gonna work for all of the cases,
so let's see with this one.
The length is five, and if we start at five, minus three,
we start at position two.
So zero, one, two, which is here,
and then we read one, two and three.
And so actually, in here,
it should not be this, it would be three.
So now, it's correct.
So this now works with any number
that we're gonna input in here.
And with this, we also followed this comma rule here.
Now, all we have to do
is to put the plus or minus sign in front of the number,
so let's remove this,
and we can now use the ternary operator,
instead of using the if statement.
So let's say, if the type is exp,
then the sign should be minus, right?
Because an expense is minus, so it's negative.
So declaring the variable,
and if it's not, then the sign is gonna be a plus.
And that's it.
And now, we're ready to return our formatted string.
So return type, so at first, the sign,
then after that, we want a space, right?
Then we put in the integer,
which is now formatted with a comma, as we did before,
and then finally, we put out the decimal part.
So we put together all of these strings using the plus sign,
and actually we can do it even better,
so I'm gonna show you something very interesting.
So let me copy this, and replace this here.
And put a little parentheses.
So we want this to be executed first,
and if I don't assign this to any variable,
then this operator here is simply going to return
either minus or plus,
so in this place here,
we will have the minus if it's an expense,
or a plus if it's an income.
And since it's an operator,
I can simply wrap it here in a parenthesis,
and then it's gonna be executed first.
All right, so we're now ready to use this,
and let's first do it when we add a new item.
With this down here, up here, so here.
So instead of simply passing the object value,
let's pass the result of formatting this number.
So we say this.formatNumber,
because remember, this is a method on the same object,
and so we're gonna use the this keyboard.
And actually, let me think about this,
because probably we're not going to use this function here
outside of this module, right?
So we could as well make it a private function.
So let me take this out of this object that we returned,
which contains our public methods,
and make it a private method, or a private function.
So I'm gonna put it in here.
And now, I need to change some things,
so var, and equal, and all right.
So, now we can remove the this part,
and simply say formatNumber, and then the type.
And that's it.
So now, when we hit this,
the formatNumber function will be called with our value,
and with the type, will be formatted and returned,
and then here, replaced in our string.
So, it should be working now.
So let's reload this, and add project 1500,
and here we go.
So we have a small problem here,
we actually forgot to add our dot, okay?
But besides that, it looks good, right?
So, yeah, it's up here.
So yeah, it's here.
So here, we forgot to add the dot,
but now, it should be perfect.
So project, 1500, and here we go.
So now, it's nicely formatted,
such as we have it in our original,
and another one, this time, an expense.
So groceries were 97.56, let's say.
And it's also nicely formatted.
So now I'll use the minus sign and the space,
and then everything looks great.
So we have it here in our add item method,
now we only need to put it here, where we show the budget.
And that's also easy, so where is the display budget?
Okay, so here.
So we do the exact same thing here.
So, formatNumber, and then the number,
and now we need the type.
So, we don't have the type here yet, do we?
Because we don't know
if the budget is gonna be negative or positive.
So let's add an if statement here,
or let's simply use the ternary operator.
So let's say, obj.budget greater than zero,
then type is gonna be inc,
and else, it's gonna be exp, for expense.
So type equal expense.
Now, we have the type that we can use here.
Okay.
So formatNumber again,
and here, we know that it's always gonna be positive, right,
because it's an income, and so we want inc in here.
And now here, formatNumber,
and in this case, it's an expense.
So let's check this out,
and actually, we can already see that it's working,
because we already have this here nicely formatted,
because remember, this display budget method
is already called in our innate function.
But let's still add something.
So yeah, it's working.
So let's now move on to the next thing
that we have to fix here in our user interface.