Always hide .00 decimal number

Question

I would like to format my decimal numbers to display 2 decimal places but .00 will always hide.

example

value      expect     return     
------     -------    ------
1.00       1           1.00
1          1           1.00
1.6        1.60        1.60
1.451      1.45        1.45

My Code

Vue.filter("currency", value => {
    return parseFloat(value).toFixed(2);
});

@nosnart you could have posted this as an answer, I too went for the same approach, the same time you posted the comment. — Nitheesh, Sep 09 '21 at 07:00

score 3 · Accepted Answer · answered Sep 09 '21 at 06:34

3

Remove .00 from the end if it exists:

 return parseFloat(value).toFixed(2).replace(/\.00$/, '')

answered Sep 09 '21 at 06:34

Felix Kling

795,719
175
1,089
1,143

tho-masn · Answer 2 · 2021-09-09T07:09:08.810

1

You can simply put the toFixed INTO the parseFloat like this:

Vue.filter("currency", value => {
    return parseFloat(value.toFixed(2))
});

toFixed will round/pad the number to a specific length, but also convert it to a string. Converting that back to a numeric type will not only make the number safer to use arithmetically, but also automatically drop any trailing 0's.

Reference: https://newbedev.com/remove-insignificant-trailing-zeros-from-a-number

Update

This solution doesn't consider the case: 1.6 -> 1.60 (check jsfiddle in the comment)

edited Sep 09 '21 at 07:09

answered Sep 09 '21 at 06:38

tho-masn

1,126
1
7
13

1

This wont work, this will only round the number to maximum of 2 decimal places. Wont work with inputs with one decimal place. Works only with no or more than 2 decimal places Fiddle https://jsfiddle.net/ku2ey76p/ – Nitheesh Sep 09 '21 at 06:58
Good point - thanks for clarification. Didn't consider that case. – tho-masn Sep 09 '21 at 07:08
Please fix that issue, so that I can revert the downvote. – Nitheesh Sep 09 '21 at 07:25

score 0 · Answer 3 · answered Sep 09 '21 at 06:37

0

Just check whether the number is wholenumber by checking the reminder on division with 1

Vue.filter("currency", value => {
    return parseFloat(value) % 1 === 0 ? parseFloat(value).toString() : parseFloat(value).toFixed(2);
});

answered Sep 09 '21 at 06:37

Nitheesh

19,238
3
22
49

score 0 · Answer 4 · answered Sep 09 '21 at 06:49

Check if the number converted to Integer has same value. return accordingly. change the parseint according to your requirements

Vue.filter("currency", (value )=>{
    if(value === parseInt(value )){return value}
    else {return parseFloat(value ).toFixed(2)}
}

score 0 · Answer 5 · answered Sep 18 '22 at 21:59

0

regex version:

Intl.NumberFormat('en', { style:'currency', currency:'usd' }).format(num).replace(/\.?0*$/, '');
// $12.00  ->  $12
// $12.4   ->  $12.4
// $12.44  ->  $12.44
// $12.04  ->  $12.04

answered Sep 18 '22 at 21:59

J. Doe

77
1
6

Always hide .00 decimal number

5 Answers5