JavaScript displaying a float to 2 decimal places
float_num.toFixed(2);
Note:toFixed()
will round or pad with zeros if necessary to meet the specified length. How to parse float with two decimal places in javascript?
You can use toFixed() to do that
var twoPlacedFloat = parseFloat(yourString).toFixed(2)
Format number to always show 2 decimal places
(Math.round(num * 100) / 100).toFixed(2);
Live Demovar 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>
How to round to at most 2 decimal places, if necessary
Use Math.round()
:
Math.round(num * 100) / 100
Or to be more specific and to ensure things like 1.005 round correctly, use Number.EPSILON :Math.round((num + Number.EPSILON) * 100) / 100
Converting Float to 2 Decimal Number in Javascript
You can use .toFixed(2)
and the unary plus operator to convert the string back to a number.
const res = +num1.toFixed(2);//9.7
Formatting a number with exactly two decimals in JavaScript
To format a number using fixed-point notation, you can simply use the toFixed method:
(10.8).toFixed(2); // "10.80"
var num = 2.4;
alert(num.toFixed(2)); // "2.40"
Note that toFixed()
returns a string.IMPORTANT: Note that toFixed does not round 90% of the time, it will return the rounded value, but for many cases, it doesn't work.
For instance:
2.005.toFixed(2) === "2.00"
UPDATE:
Nowadays, you can use theIntl.NumberFormat
constructor. It's part of the ECMAScript Internationalization API Specification (ECMA402). It has pretty good browser support, including even IE11, and it is fully supported in Node.js.const formatter = new Intl.NumberFormat('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
});
console.log(formatter.format(2.005)); // "2.01"
console.log(formatter.format(1.345)); // "1.35"
How to format a float in javascript?
var result = Math.round(original*100)/100;
The specifics, in case the code isn't self-explanatory.edit: ...or just use toFixed
, as proposed by Tim Büthe. Forgot that one, thanks (and an upvote) for reminder :)
JavaScript math, round to two decimal places
NOTE - See Edit 4 if 3 digit precision is important
var discount = (price / listprice).toFixed(2);
toFixed will round up or down for you depending on the values beyond 2 decimals.Example: http://jsfiddle.net/calder12/tv9HY/
Documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed
Edit - As mentioned by others this converts the result to a string. To avoid this:
var discount = +((price / listprice).toFixed(2));
Edit 2- As also mentioned in the comments this function fails in some precision, in the case of 1.005 for example it will return 1.00 instead of 1.01. If accuracy to this degree is important I've found this answer: https://stackoverflow.com/a/32605063/1726511 Which seems to work well with all the tests I've tried.There is one minor modification required though, the function in the answer linked above returns whole numbers when it rounds to one, so for example 99.004 will return 99 instead of 99.00 which isn't ideal for displaying prices.
Edit 3 - Seems having the toFixed on the actual return was STILL screwing up some numbers, this final edit appears to work. Geez so many reworks!
var discount = roundTo((price / listprice), 2);
function roundTo(n, digits) {
if (digits === undefined) {
digits = 0;
}
var multiplicator = Math.pow(10, digits);
n = parseFloat((n * multiplicator).toFixed(11));
var test =(Math.round(n) / multiplicator);
return +(test.toFixed(digits));
}
See Fiddle example here: https://jsfiddle.net/calder12/3Lbhfy5s/Edit 4 - You guys are killing me. Edit 3 fails on negative numbers, without digging into why it's just easier to deal with turning a negative number positive before doing the rounding, then turning it back before returning the result.
function roundTo(n, digits) {
var negative = false;
if (digits === undefined) {
digits = 0;
}
if (n < 0) {
negative = true;
n = n * -1;
}
var multiplicator = Math.pow(10, digits);
n = parseFloat((n * multiplicator).toFixed(11));
n = (Math.round(n) / multiplicator).toFixed(digits);
if (negative) {
n = (n * -1).toFixed(digits);
}
return n;
}
Fiddle: https://jsfiddle.net/3Lbhfy5s/79/
Related Topics
Why Are Es6 Classes Not Hoisted
Object Doesn't Support This Property or Method Rails Windows 64Bit
Using Raw Image Data from Ajax Request for Data Uri
Remove HTML Comments with Regex, in JavaScript
In JavaScript, Can You Extend the Dom
Cross Domain Localstorage with JavaScript
How to Avoid Freezing the Browser When Doing Long-Running Computations in JavaScript
How to Show a Spinner While Loading an Image via JavaScript
Javascript: How to Detect If a Word Is Highlighted
Find the Exact Height and Width of the Viewport in a Cross-Browser Way (No Prototype/Jquery)
Why a Variable Defined Global Is Undefined
Why Do I Need to Copy an Array to Use a Method on It
Why Does JavaScript Getyear() Return 108
How to Subscribe to Topics with Web Browser Using Firebase Cloud Messaging