How can I round a number in JavaScript? .toFixed() returns a string?

Question

Am I missing something here?

var someNumber = 123.456;
someNumber = someNumber.toFixed(2);
alert(typeof(someNumber));
//alerts string

Why does .toFixed() return a string?

I want to round the number to 2 decimal digits.

Answer 1

Number.prototype.toFixed is a function designed to format a number before printing it out. It's from the family of toString, toExponential and toPrecision.

To round a number, you would do this:

someNumber = 42.008;
someNumber = Math.round( someNumber * 1e2 ) / 1e2;
someNumber === 42.01;

// if you need 3 digits, replace 1e2 with 1e3 etc.
// or just copypaste this function to your code:

function toFixedNumber(num, digits, base){
  const pow = Math.pow(base ?? 10, digits);
  return Math.round(num*pow) / pow;
}

Why isn't this function included in the JavaScript's standard library? Because floating point numbers are hard! Many decimal numbers cannot be directly represented by base-two floats – that's why 0.09 + 0.01 !== 0.1 but 0.09999999999999999. If developers were given a tool which is supposed to round floats to decimal places, they'd (wrongly) assume that it really returns a decimal number, when it in fact returns the closest representable double-precision base-two float.

Answer 2

I've solved this problem by changing this:

someNumber = someNumber.toFixed(2)

...to this:

someNumber = +someNumber.toFixed(2);

However this will convert the number to a string and parse it again, which will have a significant impact on performance. If you care about performance or type safety, check the the other answers as well.

Answer 3

It returns a string because 0.1, and powers thereof (which are used to display decimal fractions), are not representable (at least not with full accuracy) in binary floating-point systems.

For example, 0.1 is really 0.1000000000000000055511151231257827021181583404541015625, and 0.01 is really 0.01000000000000000020816681711721685132943093776702880859375. (Thanks to BigDecimal for proving my point. :-P)

Therefore (absent a decimal floating point or rational number type), outputting it as a string is the only way to get it trimmed to exactly the precision required for display.

Answer 4

Why not use parseFloat?

var someNumber = 123.456;
someNumber = parseFloat(someNumber.toFixed(2));
alert(typeof(someNumber));
//alerts number

Answer 5

I solved it with converting it back to number using JavaScript's Number() function

var x = 2.2873424;
x = Number(x.toFixed(2));

Answer 6

Of course it returns a string. If you wanted to round the numeric variable you'd use Math.round() instead. The point of toFixed is to format the number with a fixed number of decimal places for display to the user.

Answer 7

You can simply use a '+' to convert the result to a number.

var x = 22.032423;
x = +x.toFixed(2); // x = 22.03

Answer 8

May be too late to answer but you can multiple the output with 1 to convert to number again, here is an example.

const x1 = 1211.1212121;
const x2 = x1.toFixed(2)*1;
console.log(typeof(x2));

Answer 9

You should use it like below.

var someNumber: number = 0.000000;
someNumber = Number(someNumber.toFixed(2))

Answer 10

What would you expect it to return when it's supposed to format a number ? If you have a number you can't pretty much do anything with it because e.g.2 == 2.0 == 2.00 etc. so it has to be a string.

Answer 11

Because its primary use is displaying numbers? If you want to round numbers, use Math.round() with apropriate factors.

Answer 12

To supply an example of why it has to be a string:

If you format 1.toFixed(2) you would get '1.00'.

This is not the same as 1, as 1 does not have 2 decimals.

---

I know JavaScript isn't exactly a performance language, but chances are you'd get better performance for a rounding if you use something like: roundedValue = Math.round(value * 100) * 0.01

Answer 13

Why not * the result by 1 i.e

someNumber.toFixed(2) * 1

Answer 14

Here's a slightly more functional version of the answer m93a provided.

const toFixedNumber = (toFixTo = 2, base = 10) => num => {
  const pow = Math.pow(base, toFixTo)
  return +(Math.round(num * pow) / pow)
}

const oneNumber = 10.12323223

const result1 = toFixedNumber(2)(oneNumber) // 10.12
const result2 = toFixedNumber(3)(oneNumber) // 10.123

// or using pipeline-operator
const result3 = oneNumber |> toFixedNumber(2) // 10.12

Answer 15

For others like me that happen upon this very old question, a modern solution:

const roundValue = (num, decimals = 2) => {
    let scaling = 10 ** decimals;
    return Math.round((num + Number.EPSILON) * scaling) / scaling;
}

ref: https://stackoverflow.com/a/11832950

Answer 16

Be careful using toFixed() and Math.round(), they can produce unexpected results due to the floating point number system:

function toFixedNumber(num, digits, base){
  var pow = Math.pow(base||10, digits);
  return Math.round(num*pow) / pow;
}

console.log(toFixedNumber(130.795, 2, 10));
// 130.79 (incorrect)
console.log(toFixedNumber(100.795, 2, 10));
// 100.8 

console.log(+130.795.toFixed(2));
// 130.79 (incorrect)
console.log(+100.795.toFixed(2));
// 100.8

I recommend using Lodash's _.round() function: https://lodash.com/docs/4.17.15#round

_.round(130.795, 2);
// 130.8