Format number to always show 2 decimal places
JavascriptFloating PointNumber FormattingJavascript Problem Overview
I would like to format my numbers to always display 2 decimal places, rounding where applicable.
Examples:
number display
------ -------
1 1.00
1.341 1.34
1.345 1.35
I have been using this:
parseFloat(num).toFixed(2);
But it's displaying 1
as 1
, rather than 1.00
.
Javascript Solutions
Solution 1 - Javascript
(Math.round(num * 100) / 100).toFixed(2);
Live Demo
var num1 = "1";
document.getElementById('num1').innerHTML = (Math.round(num1 * 100) / 100).toFixed(2);
var num2 = "1.341";
document.getElementById('num2').innerHTML = (Math.round(num2 * 100) / 100).toFixed(2);
var num3 = "1.345";
document.getElementById('num3').innerHTML = (Math.round(num3 * 100) / 100).toFixed(2);
span {
border: 1px solid #000;
margin: 5px;
padding: 5px;
}
<span id="num1"></span>
<span id="num2"></span>
<span id="num3"></span>
Note that it will round to 2 decimal places, so the input 1.346
will return 1.35
.
Solution 2 - Javascript
Number(1).toFixed(2); // 1.00
Number(1.341).toFixed(2); // 1.34
Number(1.345).toFixed(2); // 1.34 NOTE: See andy's comment below.
Number(1.3450001).toFixed(2); // 1.35
document.getElementById('line1').innerHTML = Number(1).toFixed(2);
document.getElementById('line2').innerHTML = Number(1.341).toFixed(2);
document.getElementById('line3').innerHTML = Number(1.345).toFixed(2);
document.getElementById('line4').innerHTML = Number(1.3450001).toFixed(2);
<span id="line1"></span>
<br/>
<span id="line2"></span>
<br/>
<span id="line3"></span>
<br/>
<span id="line4"></span>
Solution 3 - Javascript
This answer will fail if value = 1.005
.
As a better solution, the rounding problem can be avoided by using numbers represented in exponential notation:
Number(Math.round(1.005+'e2')+'e-2'); // 1.01
Cleaner code as suggested by @Kon, and the original author:
Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces)
You may add toFixed()
at the end to retain the decimal point e.g: 1.00
but note that it will return as string.
Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces).toFixed(decimalPlaces)
Credit: Rounding Decimals in JavaScript
Solution 4 - Javascript
For modern browsers, use toLocaleString
:
var num = 1.345;
num.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 });
Specify a locale tag as first parameter to control the decimal separator. For a dot, use for example English U.S. locale:
num.toLocaleString("en-US", { maximumFractionDigits: 2, minimumFractionDigits: 2 });
which gives:
> 1.35
Most countries in Europe use a comma as decimal separator, so if you for example use Swedish/Sweden locale:
num.toLocaleString("sv-SE", { maximumFractionDigits: 2, minimumFractionDigits: 2 });
it will give:
> 1,35
Solution 5 - Javascript
var num = new Number(14.12);
console.log(num.toPrecision(2));//outputs 14
console.log(num.toPrecision(3));//outputs 14.1
console.log(num.toPrecision(4));//outputs 14.12
console.log(num.toPrecision(5));//outputs 14.120
Solution 6 - Javascript
For the most accurate rounding, create this function:
function round(value, decimals) {
return Number(Math.round(value +'e'+ decimals) +'e-'+ decimals).toFixed(decimals);
}
and use it to round to 2 decimal places:
console.log("seeked to " + round(1.005, 2));
> 1.01
Thanks to Razu, this article, and MDN's Math.round reference.
Solution 7 - Javascript
I would suggest you use
new Intl.NumberFormat('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(num)
that way you will also have the local format of a country you specify, plus it would garantee to show exact 2 decimals (whether when num is 1 or 1.12345, it will show 1.00 and 1.12 respectively)
In this example I used German localization, because I wanted my numbers show with thousands delimiter, so this would be some outputs:
1 => 1,00
1.12 => 1,12
1.1234 => 1,12
1234 => 1.234,00
1234.1234 => 1.234,12
Solution 8 - Javascript
Solution 9 - Javascript
A much more generic solution for rounding to N places
function roundN(num,n){
return parseFloat(Math.round(num * Math.pow(10, n)) /Math.pow(10,n)).toFixed(n);
}
console.log(roundN(1,2))
console.log(roundN(1.34,2))
console.log(roundN(1.35,2))
console.log(roundN(1.344,2))
console.log(roundN(1.345,2))
console.log(roundN(1.344,3))
console.log(roundN(1.345,3))
console.log(roundN(1.3444,3))
console.log(roundN(1.3455,3))
Output
1.00
1.34
1.35
1.34
1.35
1.344
1.345
1.344
1.346
Solution 10 - Javascript
var number = 123456.789;
console.log(new Intl.NumberFormat('en-IN', { maximumFractionDigits: 2 }).format(number));
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
Solution 11 - Javascript
If you're already using jQuery, you could look at using the jQuery Number Format plugin.
The plugin can return formatted numbers as a string, you can set decimal, and thousands separators, and you can choose the number of decimals to show.
$.number( 123, 2 ); // Returns '123.00'
You can also get jQuery Number Format from GitHub.
Solution 12 - Javascript
You are not giving us the whole picture.
javascript:alert(parseFloat(1).toFixed(2))
shows 1.00 in my browsers when I paste it into the location bar.
However if you do something to it afterwards, it will revert.
alert(parseFloat(1).toFixed(2))
var num = 2
document.getElementById('spanId').innerHTML = (parseFloat(num).toFixed(2) - 1)
<span id="spanId"></span>
shows 1 and not 1.00
Solution 13 - Javascript
Is this what you mean?
[edit 20200530] The answer @razu provided is the best imho. So here's a slightly refactored version.
The snippet code will still not return the right value for something like showAsFloat(2.3346)
(result 2.33, but should be 2.34). So, see also.
const showAsFloat = (input, decimals = 2, asString = false) => {
if (input === null || input.constructor === Boolean || isNaN(+input)) {
return input;
}
const converted = +( `${Math.round( parseFloat( `${input}e${decimals}` ) )}e-${decimals}` );
return asString ? converted.toFixed(decimals) : converted
};
document.querySelector('#result').textContent = [
'command | result',
'-----------------------------------------------',
'showAsFloat(1); | ' + showAsFloat(1),
'showAsFloat(1.314); | ' + showAsFloat(1.314),
'showAsFloat(\'notanumber\') | ' + showAsFloat('notanumber'),
'showAsFloat(\'23.44567\', 3) | ' + showAsFloat('23.44567', 3),
'showAsFloat(2456198, 5, true)| ' + showAsFloat('24568', 5, true),
'showAsFloat(2456198, 5) | ' + showAsFloat('24568', 5),
'showAsFloat(0, 2, true); | ' + showAsFloat(0, 2, true),
'showAsFloat(1.345); | ' + showAsFloat(1.345),
'showAsFloat(0.005); | ' + showAsFloat(0.005),
'showAsFloat(null); | ' + showAsFloat(null),
].join('\n');
<pre id="result"></pre>
Solution 14 - Javascript
Are you looking for floor?
var num = 1.42482;
var num2 = 1;
var fnum = Math.floor(num).toFixed(2);
var fnum2 = Math.floor(num2).toFixed(2);
alert(fnum + " and " + fnum2); //both values will be 1.00
Solution 15 - Javascript
Convert a number into a string, keeping only two decimals:
var num = 5.56789;
var n = num.toFixed(2);
The result of n will be:
5.57
Solution 16 - Javascript
Just run into this one of longest thread, below is my solution:
parseFloat(Math.round((parseFloat(num * 100)).toFixed(2)) / 100 ).toFixed(2)
Let me know if anyone can poke a hole
Solution 17 - Javascript
function currencyFormat (num) {
return "$" + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}
console.info(currencyFormat(2665)); // $2,665.00
console.info(currencyFormat(102665)); // $102,665.00
Solution 18 - Javascript
Where specific formatting is required, you should write your own routine or use a library function that does what you need. The basic ECMAScript functionality is usually insufficient for displaying formatted numbers.
A thorough explanation of rounding and formatting is here: http://www.merlyn.demon.co.uk/js-round.htm#RiJ
As a general rule, rounding and formatting should only be peformed as a last step before output. Doing so earlier may introduce unexpectedly large errors and destroy the formatting.
Solution 19 - Javascript
Here's also a generic function that can format to any number of decimal places:
function numberFormat(val, decimalPlaces) {
var multiplier = Math.pow(10, decimalPlaces);
return (Math.round(val * multiplier) / multiplier).toFixed(decimalPlaces);
}
Solution 20 - Javascript
here is another solution to round only using floor, meaning, making sure calculated amount won't be bigger than the original amount (sometimes needed for transactions):
Math.floor(num* 100 )/100;
Solution 21 - Javascript
function number_format(string,decimals=2,decimal=',',thousands='.',pre='R$ ',pos=' Reais'){
var numbers = string.toString().match(/\d+/g).join([]);
numbers = numbers.padStart(decimals+1, "0");
var splitNumbers = numbers.split("").reverse();
var mask = '';
splitNumbers.forEach(function(d,i){
if (i == decimals) { mask = decimal + mask; }
if (i>(decimals+1) && ((i-2)%(decimals+1))==0) { mask = thousands + mask; }
mask = d + mask;
});
return pre + mask + pos;
}
var element = document.getElementById("format");
var money= number_format("10987654321",2,',','.');
element.innerHTML = money;
#format{
display:inline-block;
padding:10px;
border:1px solid #ddd;
background:#f5f5f5;
}
<div id='format'>Test 123456789</div>
Solution 22 - Javascript
Try below code:
function numberWithCommas(number) {
var newval = parseFloat(Math.round(number * 100) / 100).toFixed(2);
return newval.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
Solution 23 - Javascript
var quantity = 12;
var import1 = 12.55;
var total = quantity * import1;
var answer = parseFloat(total).toFixed(2);
document.write(answer);
Solution 24 - Javascript
I had to decide between the parseFloat() and Number() conversions before I could make toFixed() call. Here's an example of a number formatting post-capturing user input.
HTML:
<input type="number" class="dec-number" min="0" step="0.01" />
Event handler:
$('.dec-number').on('change', function () {
const value = $(this).val();
$(this).val(value.toFixed(2));
});
The above code will result in TypeError exception. Note that although the html input type is "number", the user input is actually a "string" data type. However, toFixed() function may only be invoked on an object that is a Number.
My final code would look as follows:
$('.dec-number').on('change', function () {
const value = Number($(this).val());
$(this).val(value.toFixed(2));
});
The reason I favor to cast with Number() vs. parseFloat() is because I don't have to perform an extra validation neither for an empty input string, nor NaN value. The Number() function would automatically handle an empty string and covert it to zero.
Solution 25 - Javascript
var num1 = "0.1";
document.getElementById('num1').innerHTML = (Math.round(num1 * 100) / 100).toFixed(2);
var num2 = "1.341";
document.getElementById('num2').innerHTML = (Math.round(num2 * 100) / 100).toFixed(2);
var num3 = "1.345";
document.getElementById('num3').innerHTML = (Math.round(num3 * 100) / 100).toFixed(2);
span {
border: 1px solid #000;
margin: 5px;
padding: 5px;
}
<span id="num1"></span>
<span id="num2"></span>
<span id="num3"></span>
Solution 26 - Javascript
RegExp - alternative approach
On input you have string (because you use parse) so we can get result by using only string manipulations and integer number calculations
let toFix2 = (n) => n.replace(/(-?)(\d+)\.(\d\d)(\d+)/, (_,s,i,d,r)=> {
let k= (+r[0]>=5)+ +d - (r==5 && s=='-');
return s + (+i+(k>99)) + "." + ((k>99)?"00":(k>9?k:"0"+k));
})
// TESTs
console.log(toFix2("1"));
console.log(toFix2("1.341"));
console.log(toFix2("1.345"));
console.log(toFix2("1.005"));
Explanation
s
is sign,i
is integer part,d
are first two digits after dot,r
are other digits (we user[0]
value to calc rounding)k
contains information about last two digits (represented as integer number)- if
r[0]
is>=5
then we add1
tod
- but in case when we have minus number (s=='-'
) andr
is exact equal to 5 then in this case we substract 1 (for compatibility reasons - in same wayMath.round
works for minus numbers e.gMath.round(-1.5)==-1
) - after that if last two digits
k
are greater than 99 then we add one to integer parti
Solution 27 - Javascript
I do like:
var num = 12.749;
parseFloat((Math.round(num * 100) / 100).toFixed(2)); // 123.75
Round the number with 2 decimal points,
then make sure to parse it with parseFloat()
to return Number, not String unless you don't care if it is String or Number.
Solution 28 - Javascript
Extend Math object with precision method
Object.defineProperty(Math, 'precision',{
value: function (value,precision,type){
var v = parseFloat(value),
p = Math.max(precision,0)||0,
t = type||'round';
return (Math[t](v*Math.pow(10,p))/Math.pow(10,p)).toFixed(p);
}
});
console.log(
Math.precision(3.1,3), // round 3 digits
Math.precision(0.12345,2,'ceil'), // ceil 2 digits
Math.precision(1.1) // integer part
)
Solution 29 - Javascript
You can use numeral.js.
numeral(1.341).format('0.00') // 1.34
numeral(1.345).format('0.00') // 1.35
Solution 30 - Javascript
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js" integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw==" crossorigin="anonymous"></script>
<input type="text" class = 'item_price' name="price" min="1.00" placeholder="Enter Price" value="{{ old('price') }}" step="">
<script>
$(document).ready(function() {
$('.item_price').mask('00000.00', { reverse: true });
});
</script>
Solution 31 - Javascript
Here's my safe solution which uses epsilion. This will fix rounding with .15 e.g
function myFunction(a) {
return Math.round((a + Number.EPSILON) * 100) / 100
}
Solution 32 - Javascript
parseInt(number * 100) / 100;
worked for me.
Solution 33 - Javascript
You can try this code:
function FormatNumber(number, numberOfDigits = 2) {
try {
return new Intl.NumberFormat('en-US').format(parseFloat(number).toFixed(numberOfDigits));
} catch (error) {
return 0;
}
}
var test1 = FormatNumber('1000000.4444');
alert(test1); // 1,000,000.44
var test2 = FormatNumber(100000000000.55555555, 4);
alert(test2); // 100,000,000,000.5556
Solution 34 - Javascript
function formatValeurDecimal(valeurAFormate,longueurPartieEntier,longueurPartieDecimal){
valeurAFormate = valeurAFormate.replace(",",".")
valeurAFormate = parseFloat(valeurAFormate).toFixed(longueurPartieDecimal)
if(valeurAFormate == 'NaN'){
return 0
}
//____________________valeurPartieEntier__________________________________
var valeurPartieEntier = valeurAFormate | 0
var strValeur = valeurPartieEntier.toString()
strValeur = strValeur.substring(0, longueurPartieEntier)
valeurPartieEntier = strValeur
//____________________valeurPartieDecimal__________________________________
strValeur = valeurAFormate
strValeur = strValeur.substring(strValeur.indexOf('.')+1)
var valeurPartieDecimal = strValeur
valeurAFormate = valeurPartieEntier +'.'+valeurPartieDecimal
if(valeurAFormate == null){
valeurAFormate = 0
}
return valeurAFormate
}
Solution 35 - Javascript
(num + "").replace(/^([0-9]*)(\.[0-9]{1,2})?.*$/,"$1$2")
Solution 36 - Javascript
This is how I solve my problem:
parseFloat(parseFloat(floatString).toFixed(2));