格式化数字以始终显示 2 个小数位

IT技术 javascript floating-point number-formatting
2021-01-13 01:11:19

我想格式化我的数字以始终显示 2 个小数位,并在适用的情况下四舍五入。

例子:

number     display
------     -------
1          1.00
1.341      1.34
1.345      1.35

我一直在使用这个:

parseFloat(num).toFixed(2);

但它显示11, 而不是1.00

6个回答
(Math.round(num * 100) / 100).toFixed(2);

现场演示

请注意,它将四舍五入到小数点后两位,因此输入1.346将返回1.35.

toFixed() 确实对它进行了舍入,但不要忘记它返回的是一个字符串......所以这个方法真的只对显示有用。如果您想对四舍五入的值执行进一步的数学计算,请不要使用 toFixed()。
2021-03-12 01:11:19
@Kooilnc:OP 想要1显示为1.00,并1.341显示为1.34
2021-03-14 01:11:19
这整个答案可以简化为(+num).toFixed(2)它甚至保留了原版中的舍入错误,请参阅Nate 的回答
2021-03-23 01:11:19
无需使用 round(),因为 toFixed() 对其进行了舍入。
2021-03-30 01:11:19
根据 MDN,由于舍入错误,Math.round 并不总是给出准确的结果。我用 1.005 测试了这个,它应该四舍五入到 1.01,但它给出了 1.00。使用我的答案以获得一致的准确性:stackoverflow.com/a/34796988/3549440
2021-04-08 01:11:19
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

toFixed确实进行了四舍五入,您几乎可以在每个测试编号上看到。
2021-03-18 01:11:19
@Bardicer,使用 toFixed(2) 从 1.335 轮到 1.33
2021-03-19 01:11:19
在完成之前不小心提交了最后一条评论..1.345是一个数字不能完全存储在浮点数的例子,所以我认为它没有像你期望的那样四舍五入的原因是它实际上被存储为一个数字小于 1.345 并向下取整。如果您改为测试,(1.34500001).toFixed(2)那么您会看到它正确四舍五入为1.35
2021-03-28 01:11:19
太晚了,但为了阐明“5”四舍五入,它总是四舍五入到最接近的偶数。1.345 将四舍五入为 1.34,但 1.335 也是如此。一半时间 5 上升,一半时间 5 下降。
2021-03-28 01:11:19
@Andre,Chrome 29.0.1547.57 给了我1.34表达Number(1.345).toFixed(2)
2021-03-29 01:11:19

这个答案将失败value = 1.005

作为更好的解决方案,可以通过使用以指数表示法表示的数字来避免舍入问题:

Number(Math.round(1.005+'e2')+'e-2'); // 1.01

@Kon 和原作者建议的更简洁的代码:

Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces)

您可以toFixed()在末尾添加以保留小数点,例如:1.00但请注意,它将以字符串形式返回。

Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces).toFixed(decimalPlaces)

信用:JavaScript 中的舍入小数

这是一个可靠的答案。我能想到的一些改进:(1)VS Code(TypeScript 文件)不喜欢 Math.round() 传入字符串。(2) 使小数位数动态化(不硬编码为 2)。(3) toFixed() 似乎没有必要。所以我想出的是Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces)
2021-03-18 01:11:19
parseFloat 中的环绕数是它的返回字符串
2021-03-21 01:11:19
刚刚测试,看看是否仍然如此。您仍然对 Chrome 版本 59.0.3071.115 正确您的解决方案将四舍五入为 1.005 (1.01) 并向下取整为 1.00499999 (1.00)
2021-03-27 01:11:19
令人惊讶的是,这里的其他人都没有看到toFixed有四舍五入的问题。你的答案应该是公认的。
2021-04-06 01:11:19
jsfiddle.net/Artistan/qq895bnp/28 有“时间” toFixed 会起作用,但它非常不一致。:)
2021-04-09 01:11:19

对于现代浏览器,请使用toLocaleString

var num = 1.345;
num.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 });

指定语言环境标记作为第一个参数来控制小数点分隔符对于点,例如使用英语美国语言环境:

num.toLocaleString("en-US", { maximumFractionDigits: 2, minimumFractionDigits: 2 });

这使:

1.35

欧洲的大多数国家/地区使用逗号作为小数点分隔符,因此,例如,如果您使用瑞典/瑞典语言环境:

num.toLocaleString("sv-SE", { maximumFractionDigits: 2, minimumFractionDigits: 2 });

它会给:

1,35

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
如果要去除尾随零,请在使用后将其转换为数字或浮点数toFixedconst formattedVal = Number(val.toFixed(2));不要使用toPrecision,因为它在使用精度参数时计算非十进制数字。
2021-03-10 01:11:19
请注意,OP 要求“四舍五入”toPrecision只将数字格式化为特定的小数位数,简单地省略多余的位,但不四舍五入这当然也可能非常有用,但了解差异很重要。
2021-03-12 01:11:19
这会产生意想不到的结果,如果您的数字可以是 1.4、23.654 和 0,您会采用什么精度?
2021-03-18 01:11:19
根据 Mozilla 的说法,实际上toPrecision确实是圆的。测试:(20.55).toPrecision(3) "20.6"
2021-03-29 01:11:19