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

JavascriptTypesRounding

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

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){
  var pow = Math.pow(base||10, digits);
  return Math.round(num*pow) / pow;
}

.

Or if you want a “native-like” function, you can extend the prototype:

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

someNumber = 42.008;
someNumber = someNumber.toFixedNumber(2);
someNumber === 42.01;


//or even hexadecimal

someNumber = 0xAF309/256  //which is af3.09
someNumber = someNumber.toFixedNumber(1, 16);
someNumber.toString(16) === "af3.1";

However, bear in mind that polluting the prototype is considered bad when you're writing a module, as modules shouldn't have any side effects. So, for a module, use the first function.

Solution 2 - Javascript

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.

Solution 3 - Javascript

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.

Solution 4 - Javascript

Why not use parseFloat?

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

Solution 5 - Javascript

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

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

Solution 6 - Javascript

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.

Solution 7 - Javascript

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

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

Solution 8 - Javascript

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));

Solution 9 - Javascript

Why not * the result by 1 i.e

someNumber.toFixed(2) * 1

Solution 10 - Javascript

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.

Solution 11 - Javascript

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

Solution 12 - Javascript

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

Solution 13 - Javascript

You should use it like below.

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

Solution 14 - Javascript

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

Solution 15 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDerek AdairView Question on Stackoverflow
Solution 1 - Javascriptm93aView Answer on Stackoverflow
Solution 2 - JavascriptEve juanView Answer on Stackoverflow
Solution 3 - JavascriptChris Jester-YoungView Answer on Stackoverflow
Solution 4 - JavascriptLeonView Answer on Stackoverflow
Solution 5 - JavascriptNizarView Answer on Stackoverflow
Solution 6 - JavascriptJoel CoehoornView Answer on Stackoverflow
Solution 7 - JavascriptmeisamView Answer on Stackoverflow
Solution 8 - JavascriptPumpkin PieView Answer on Stackoverflow
Solution 9 - JavascriptAllStackDevView Answer on Stackoverflow
Solution 10 - JavascriptTomas VanaView Answer on Stackoverflow
Solution 11 - JavascriptChristophView Answer on Stackoverflow
Solution 12 - JavascriptPyroView Answer on Stackoverflow
Solution 13 - JavascriptJenish ZinzuvadiyaView Answer on Stackoverflow
Solution 14 - JavascriptSartajView Answer on Stackoverflow
Solution 15 - JavascriptOneManBandView Answer on Stackoverflow