CODEWITHSUNDEEP
javascriptroundingtofixed
jQuerybeast
jQuerybeast

Reputation: 14490

Reliable JS rounding numbers with toFixed(2) of a 3 decimal number

I am simply trying to round up 1.275.toFixed(2) and I was expecting a return of 1.28, rather than 1.27.

Using various calculators and the simple method of rounding to the nearest hundredth, if the last digit is greater than or equal to five, it should round up.

If this doesn't work with toFixed(2), how would it?

People asking whether console.log(1.275.toFixed(2)) prints off 1.28, here's a quick screenshot MacOS Chrome Version 55.0.2883.95 (64-bit)

enter image description here

Upvotes: 5

Views: 6515

Answers (7)

Rick James
Rick James

Reputation: 142218

Face it. If you want a specific rule for what happens when the number is exactly "one-half" in the last place, you should write your own rounding routine.

Alas ECMA decided to ignore IEEE 754 and invent yet another rounding algorithm. 754 defaults to "round to nearest even" -- 3.5 -> 4 and 4.5 -> 4. This, of course, disagrees with "banking" rules.

The OP has not said what he actually wants for other cases. Their screenshot seems to imply that JavaScript is converting 1.275 to a binary floating point approximation. (Alvaro provides the details.)

A different JS implementation might store 1.275 in decimal, thereby making things work differently.

Upvotes: 0

Monish N
Monish N

Reputation: 398

Using the Custom Function to Round a Number To2 Decimal Places in JavaScript.

function roundToTwo(num) {
    return +(Math.round(num + "e+2")  + "e-2");
}

console.log(roundToTwo(2.005));

For more information visit https://www.delftstack.com/howto/javascript/javascript-round-to-2-decimal-places/

Upvotes: 1

Brad Vanderbush
Brad Vanderbush

Reputation: 169

Probably one of the simplest solutions, and one I always use. Any number in the {} will truncate to that many decimals, my case below to the second decimal {2}.

let Num = 23.49876
let NumString = Num+''
let toSecondDecimalPlace = NumString.replace(/(.*\.\d{2})(.+)/,'$1'); 
console.log('to Second Decimal Place:', toSecondDecimalPlace) // 23.49

let backToNumber = Number(toSecondDecimalPlace)
console.log('backToNumber:', backToNumber) // 23.49

Upvotes: 0

Damon Josko
Damon Josko

Reputation: 31

While I am a little late, this could help someone with the same requirement. If the value is a string, simply add an additional "1" to the end and your issue will be fixed. If input = 10.55 then it would become 10.551 which in turn would become 10.56.

This example uses jQuery

function toTwoDecimalPlaces(input) {
        var value = $(input).val();
        if (value != null) {
            value = parseFloat(value + "1").toFixed(2);
        }
        $(input).val(value);
}

Update: If the input is accepting whole numbers and/or numbers with 1 decimal place, then you will want to check how many decimal places have been used. If it is greater than the fixed amount then add the "1".

function toTwoDecimalPlaces(input) {
        var value = $(input).val();
        if (value.includes(".")) {
            var splitValue = value.split(".");
            if (splitValue[1].length > 2) {
                value = parseFloat(value + "1").toFixed(2);
            }
        }
        $(input).val(value);
}

Upvotes: 2

Robby Cornelissen
Robby Cornelissen

Reputation: 97130

The toFixed() method is unreliable in its rounding (see Álvaro González' answer as to why this is the case).

In both current Chrome and Firefox, calling toFixed() yields the following inconsistent results:

35.655.toFixed(2) // Yields "36.66" (correct)
35.855.toFixed(2) // Yields "35.85" (wrong, should be "35.86")

MDN describes a reliable rounding implementation:

// Closure
(function() {
  /**
   * Decimal adjustment of a number.
   *
   * @param {String}  type  The type of adjustment.
   * @param {Number}  value The number.
   * @param {Integer} exp   The exponent (the 10 logarithm of the adjustment base).
   * @returns {Number} The adjusted value.
   */
  function decimalAdjust(type, value, exp) {
    // If the exp is undefined or zero...
    if (typeof exp === 'undefined' || +exp === 0) {
      return Math[type](value);
    }
    value = +value;
    exp = +exp;
    // If the value is not a number or the exp is not an integer...
    if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
      return NaN;
    }
    // Shift
    value = value.toString().split('e');
    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
    // Shift back
    value = value.toString().split('e');
    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
  }

  // Decimal round
  if (!Math.round10) {
    Math.round10 = function(value, exp) {
      return decimalAdjust('round', value, exp);
    };
  }
  // Decimal floor
  if (!Math.floor10) {
    Math.floor10 = function(value, exp) {
      return decimalAdjust('floor', value, exp);
    };
  }
  // Decimal ceil
  if (!Math.ceil10) {
    Math.ceil10 = function(value, exp) {
      return decimalAdjust('ceil', value, exp);
    };
  }
})();

// Round
Math.round10(55.55, -1);   // 55.6
Math.round10(55.549, -1);  // 55.5
Math.round10(55, 1);       // 60
Math.round10(54.9, 1);     // 50
Math.round10(-55.55, -1);  // -55.5
Math.round10(-55.551, -1); // -55.6
Math.round10(-55, 1);      // -50
Math.round10(-55.1, 1);    // -60
Math.round10(1.005, -2);   // 1.01 -- compare this with Math.round(1.005*100)/100 above
// Floor
Math.floor10(55.59, -1);   // 55.5
Math.floor10(59, 1);       // 50
Math.floor10(-55.51, -1);  // -55.6
Math.floor10(-51, 1);      // -60
// Ceil
Math.ceil10(55.51, -1);    // 55.6
Math.ceil10(51, 1);        // 60
Math.ceil10(-55.59, -1);   // -55.5
Math.ceil10(-59, 1);       // -50

Upvotes: 6

jQuerybeast
jQuerybeast

Reputation: 14490

According to Robby's answer, MDN describes a reliable rounding implementation, therefore I stripped it down to the following snippet to solve my issue of rounding a 3 decimal number of 1.275 to 1.28. Tested in FF4, Chrome 55 and Safari 10.0.3 on MacOS

function decimalAdjust(c,a,b){if("undefined"===typeof b||0===+b)return Math[c](a);a=+a;b=+b;if(isNaN(a)||"number"!==typeof b||0!==b%1)return NaN;a=a.toString().split("e");a=Math[c](+(a[0]+"e"+(a[1]?+a[1]-b:-b)));a=a.toString().split("e");return+(a[0]+"e"+(a[1]?+a[1]+b:b))}Math.round10||(Math.round10=function(c,a){return decimalAdjust("round",c,a)});

Math.round10(1.275, -2);

Upvotes: 0

Álvaro González
Álvaro González

Reputation: 146390

The 1.275 base 10 number has finite digits but becomes periodic when converted to base 2:

= 0b1.01000110011001100110011001100110011001100110011010
         ^^^^

Since it has infinite digits, it cannot be represented exactly in a computer unless you use an arbitrary precision library (a library than represents numbers as text to keep them in base 10). JavaScript numbers do not use such library for performance reasons.

Since the original value has already lost precision when it reaches JavaScript, rounding it will not improve that.

Upvotes: 6

Related Questions