JavaScript 将浮点数显示为小数点后 2 位答案

【问题标题】：JavaScript displaying a float to 2 decimal placesJavaScript 将浮点数显示为小数点后 2 位
【发布时间】：2011-03-10 22:27:45
【问题描述】：

我想将一个数字显示到小数点后 2 位。

我想我可以在 JavaScript 中使用toPrecision(2)。

但是，如果号码是0.05，我会得到0.0500。我宁愿它保持不变。

在JSbin 上查看。

最好的方法是什么？

我可以考虑编写一些解决方案，但我想（我希望）这样的东西是内置的？

【问题讨论】：

标签： javascript floating-point precision

【解决方案1】：

float_num.toFixed(2);

注意：toFixed() 将在必要时用零进行舍入或填充以满足指定的长度。

【讨论】：

但它返回的是字符串，而不是浮点数！
问题作者想“显示”它，所以一个字符串是完美的
而且您始终可以使用 parseFloat(float_num.toFixed(2)) 将字符串转换回浮点数，同时只保留两位小数。
@anwar 你不能可靠地舍入一个浮点数（可以说你可以完全舍入一个浮点数） - 你会得到类似 0.0500 甚至 0.0500000000001 的值。见floating-point-gui.de
@Hankrecords 你说的不是真的。如果我有 '43.01' 并且我 parseFloat 然后我得到 43.01 但如果我有 '43.10' 我会得到 43.1 :D 不是我想要的。

【解决方案2】：

您可以使用toFixed 函数来实现，但它是buggy in IE。如果您想要一个可靠的解决方案，请查看我的答案here。

【讨论】：

技术应该开发而不是适应IE...（顺便说一句。在节点js float_num.toFixed(2); 工作正常）

【解决方案3】：

不知道我是怎么得到这个问题的，但即使这个问题已经问了很多年了，我想添加一个我遵循的快速简单的方法，它从未让我失望：

var num = response_from_a_function_or_something();

var fixedNum = parseFloat(num).toFixed( 2 );

【讨论】：

为什么是parseFloat()？仅当数字来自字符串时才应使用它。
在某些情况下，当我使用 jquery 从元素中获取一些“data-”属性值时，如果我只使用 toFixed 它会产生错误。 parseFloat 修复它。
是的，这就是我上面的意思如果它来自一个字符串。但使用它总是不好的建议。

【解决方案4】：

number.parseFloat(2) 有效，但它返回一个字符串。

如果您想将其保留为数字类型，您可以使用：

Math.round(number * 100) / 100

【讨论】：

【解决方案5】：

尝试toFixed 而不是toPrecision。

【讨论】：

【解决方案6】：

function round(value, decimals) { return Number(Math.round(value+'e'+decimals)+'e-'+decimals); }

圆形(1.005, 2); // 返回 1.01

圆形(1.004, 2); // 返回 1 而不是 1.00

答案如下：http://www.jacklmoore.com/notes/rounding-in-javascript/

【讨论】：

【解决方案7】：

您可以尝试混合使用Number() 和toFixed()。

将您的目标数字转换为带有 X 位数字的漂亮字符串，然后将格式化的字符串转换为数字。

Number( (myVar).toFixed(2) )

请看下面的例子：

var myNumber = 5.01;
var multiplier = 5;
$('#actionButton').on('click', function() {
  $('#message').text( myNumber * multiplier );
});

$('#actionButton2').on('click', function() {
  $('#message').text( Number( (myNumber * multiplier).toFixed(2) ) );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button id="actionButton">Weird numbers</button>
<button id="actionButton2">Nice numbers</button>

<div id="message"></div>

【讨论】：

感谢您的参考。
很好的答案，整数时保留，浮动时调整

【解决方案8】：

toFixed() 方法使用定点表示法格式化数字。

这里是语法

numObj.toFixed([digits])

digits 参数是可选的，默认为 0。返回类型是字符串而不是数字。但是您可以使用

将其转换为数字

numObj.toFixed([digits]) * 1

也可以抛出TypeError、RangeError等异常

这里是full detail 和浏览器中的兼容性。

【讨论】：

【解决方案9】：

let a = 0.0500
a.toFixed(2);

//output
0.05

【讨论】：

不，输出是"0.05"（在Chrome开发工具中运行），这不是一回事

【解决方案10】：

使用toFixed，您可以像这样设置小数点的长度：

let number = 6.1234
number.toFixed(2) // '6.12'

但是toFixed 返回一个字符串，而且如果number 根本没有小数点，它会添加多余的零。

let number = 6
number.toFixed(2) // '6.00'

为避免这种情况，您必须将结果转换为数字。您可以通过以下两种方法做到这一点：

let number1 = 6
let number2 = 6.1234

// method 1
parseFloat(number1.toFixed(2)) // 6
parseFloat(number2.toFixed(2)) // 6.12

// method 2
+number1.toFixed(2) // 6
+number2.toFixed(2) // 6.12

【讨论】：

【解决方案11】：

如果您需要 2 位数字而不是字符串类型，我使用这种方式。

    const exFloat = 3.14159265359;
    
    console.log(parseFloat(exFloat.toFixed(2)));

【讨论】：

【解决方案12】：

还有Intl API 可以根据您的语言环境值格式化小数。如果小数点分隔符不是点“。”，这一点尤其重要。而是一个逗号“，”，就像在德国一样。

Intl.NumberFormat('de-DE').formatToParts(0.05).reduce((acc, {value}) => acc += value, '');

请注意，这将四舍五入到最多 3 位小数，就像上面在默认情况下建议的 round() 函数一样。如果您想自定义该行为以指定小数位数，则可以选择最小和最大小数位数：

Intl.NumberFormat('de-DE', {minimumFractionDigits: 3}).formatToParts(0.05)

【讨论】：

【解决方案13】：

我已经做了这个功能。它工作正常，但返回字符串。

function show_float_val(val,upto = 2){
  var val = parseFloat(val);
  return val.toFixed(upto);
}

【讨论】：