JavaScript 将浮点数显示到小数点后 2 位

JavaScript displaying a float to 2 decimal places

提问人:alex 提问时间:7/2/2010 最后编辑:mskfisheralex 更新时间:12/15/2022 访问量:593142

问:

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

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

但是,如果数字是 ,我得到 .我宁愿它保持不变。0.050.0500

JSbin 上看到它。

最好的方法是什么?

我可以想到编写一些解决方案,但我想(我希望)这样的东西是内置的?

JavaScript 浮点 精度

评论


答:

54赞 Elias Zamaria 7/2/2010 #1

你可以用这个函数来做,但它在IE中是有问题的。如果你想要一个可靠的解决方案,请看我的答案toFixed

评论

38赞 fider 8/21/2013
技术应该发展,而不是适应IE...(顺便说一句,在 Node js 中工作正常)float_num.toFixed(2);
5赞 cantaş 6/16/2022
IE昨天去世了。
25赞 casablanca 7/2/2010 #2

尝试 toFixed 而不是 .toPrecision

839赞 Jason McCreary 7/2/2010 #3
float_num.toFixed(2);

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

评论

116赞 Anwar 6/7/2016
但它返回字符串,而不是浮点数!
67赞 Christophe Marois 10/19/2016
问题作者想要“显示”它,所以字符串是完美的
18赞 Hankrecords 2/15/2017
而且你总是可以使用 parseFloat(float_num.toFixed(2)) 将字符串转换回浮点数,同时只保留两位小数。
4赞 jmc 1/12/2018
@anwar你不能可靠地对浮点数进行四舍五入(可以说你完全可以对浮点数进行四舍五入)——你会得到 0.0500 甚至 0.05000000000001 之类的值。查看 floating-point-gui.de
3赞 Lucian Tarna 10/9/2018
@Hankrecords你说的不是真的。如果我有“43.01”并且我parseFloat,那么我得到43.01,但是如果我有“43.10”,我会得到43.1:D不是我想要的。
33赞 panos 1/13/2016 #4

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

var num = response_from_a_function_or_something();

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

评论

2赞 alex 1/13/2016
为什么在那里?仅当数字来自字符串时,才应使用它。parseFloat()
3赞 panos 1/13/2016
在某些情况下,当我使用jquery从元素中获取一些“data-”属性值时,如果我仅使用toFixed,则会产生错误。parseFloat 修复了它。
2赞 alex 1/13/2016
是的,如果它来自字符串,这就是我上面的意思。但总是使用它是不好的建议。
18赞 Huy Nguyen 11/28/2017 #5

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/

-2赞 Syed Nurul Islam 3/22/2018 #6

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

function show_float_val(val,upto = 2){
  var val = parseFloat(val);
  return val.toFixed(upto);
}
4赞 Sunil Garg 5/9/2018 #7

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

这是语法

numObj.toFixed([digits])

digits 参数是可选的,默认为 0。返回类型是字符串而不是数字。但是您可以使用以下命令将其转换为数字

numObj.toFixed([digits]) * 1

它还可以抛出异常,例如 ,TypeErrorRangeError

以下是浏览器中的完整详细信息和兼容性。

40赞 rnmalone 3/4/2019 #8

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

如果要将其保留为数字类型,可以使用:

Math.round(number * 100) / 100

评论

1赞 Herbert Van-Vliet 3/12/2022
它的内部表示可能不是你想要的。而且很可能是你不想被打扰的事情——表示(和存储)很重要。像对待布尔值一样思考它。
9赞 George-Paul B. 8/30/2019 #9

您可以尝试混合 和 .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>

评论

0赞 Arman H 10/24/2019
谢谢你很好的参考。
0赞 Philip Developer 6/22/2021
非常好的答案,当数字为整数时,它会保留,当它为浮点数时,它会进行调整
3赞 Rizwan 4/10/2020 #10
let a = 0.0500
a.toFixed(2);

//output
0.05

评论

3赞 jhamm 3/1/2021
不,输出是(在 Chrome 开发工具中运行),这不是一回事"0.05"
2赞 lmerino 5/12/2021 #11

还有一个 API 可以根据您的区域设置值设置小数的格式。这一点很重要,特别是如果小数点分隔符不是点“.”而是逗号“,”,就像德国的情况一样。Intl

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

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

Intl.NumberFormat('de-DE', {minimumFractionDigits: 3}).formatToParts(0.05)
38赞 codegames 8/9/2021 #12

您可以像这样设置小数点的长度:toFixed

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

但是返回一个字符串,如果根本没有小数点,它将添加冗余零。toFixednumber

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
13赞 l2D 10/28/2021 #13

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

    const exFloat = 3.14159265359;
    
    console.log(parseFloat(exFloat.toFixed(2)));
1赞 alex 12/15/2022 #14
float_num = parseFloat(float_num.toFixed(2))

评论

2赞 mousetail 12/15/2022
请包括一些解释,仅代码答案无济于事