将数字格式化为始终显示两位小数

Question

我想要将数字格式化为始终显示两位小数，必要时要四舍五入。

例如：

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

我一直在使用这个：

parseFloat(num).toFixed(2);

但它显示的是1，而不是1.00。

- Varada

---

我指的是如果我输入1，它不会显示为1.00，但是如果我输入1.345，则会显示为1.35。 - Varada

我已经重新表述了你的问题，以符合你所寻找的内容。请检查以确保我正确理解了你的意思。 - drudge

精确舍入，支持IE。https://gist.github.com/ArminVieweg/28647e735aa6efaba401 - TarranJones

可能是 JavaScript中将数字格式化为恰好两个小数位的问题 的重复。 - VLAZ

可能是将数字格式化为两位小数的重复问题。 - ma11hew28

Answer 1

(Math.round(num * 100) / 100).toFixed(2);

演示

var num1 = "1";
document.getElementById('num1').innerHTML = (Math.round(num1 * 100) / 100).toFixed(2);

var num2 = "1.341";
document.getElementById('num2').innerHTML = (Math.round(num2 * 100) / 100).toFixed(2);

var num3 = "1.345";
document.getElementById('num3').innerHTML = (Math.round(num3 * 100) / 100).toFixed(2);

span {
    border: 1px solid #000;
    margin: 5px;
    padding: 5px;
}

<span id="num1"></span>
<span id="num2"></span>
<span id="num3"></span>

请注意它将会 四舍五入 到小数点后2位，所以输入的1.346 将返回 1.35。

- drudge

---

@Kooilnc希望将数字1显示为1.00，将数字1.341显示为1.34。 - drudge

不需要使用 round()，因为 toFixed() 已经进行了四舍五入。 - Milan Babuškov

toFixed() 方法可以做四舍五入，但不要忘记它返回的是一个字符串...所以这个方法只适用于展示。如果您想在四舍五入后进行更多的数学计算，请勿使用toFixed()。 - TWright

根据 MDN 的说法，由于四舍五入误差的存在，Math.round 并不总是能够给出准确的结果。我用 1.005 进行了测试，它应该被四舍五入为 1.01，但是实际上返回了 1.00。使用我的答案可以保证一致的准确性：https://dev59.com/6G025IYBdhLWcg3wOzTY#34796988。 - Nate

整个答案可以简化为(+num).toFixed(2)，它甚至保留了原始代码中的四舍五入错误，请参见Nate's answer。 - RobG

Answer 2

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

document.getElementById('line1').innerHTML = Number(1).toFixed(2);
document.getElementById('line2').innerHTML = Number(1.341).toFixed(2);
document.getElementById('line3').innerHTML = Number(1.345).toFixed(2);
document.getElementById('line4').innerHTML = Number(1.3450001).toFixed(2);

<span id="line1"></span>
<br/>
<span id="line2"></span>
<br/>
<span id="line3"></span>
<br/>
<span id="line4"></span>

- Abel ANEIROS

---

@Andre，Chrome 29.0.1547.57在表达式Number(1.345).toFixed(2)中返回了1.34。 - Drew Noakes

toFixed确实会进行四舍五入，这一点在几乎每个测试数字上都可以看到。 - andy

上一条评论在结束之前被意外提交了。1.345是一个不能被精确存储在浮点数中的数字，所以我认为它不能像你预期的那样四舍五入，实际上它存储的数字略小于1.345并且会向下取整。如果你测试(1.34500001).toFixed(2)，你就会看到它正确地四舍五入为1.35。 - andy

虽然有些晚了，但是关于“5”的四舍五入，它总是会向最接近的偶数进行四舍五入。例如1.345会四舍五入为1.34，而1.335也会四舍五入为1.34。因为一半的时间5会向上取整，另一半的时间则会向下取整。 - Bardicer

@Bardicer，1.335使用toFixed（2）四舍五入为1.33。 - Waweru Kamau

Answer 3

这个答案在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中的小数位四舍五入

- razu

---

惊人的是，这里的其他人都没有意识到toFixed存在舍入问题。你的回答应该被接受。 - Armfoot

刚测试了一下，看看情况是否仍然如此。对于 Chrome 版本 59.0.3071.115，您仍然是正确的。您的解决方案将向上舍入为 1.005（1.01），并向下舍入为 1.00499999（1.00）。 - Artistan

http://jsfiddle.net/Artistan/qq895bnp/28/ 有时候toFixed会起作用，但它相当不一致。 :) - Artistan

这是一个扎实的答案。我能想到一些改进点：(1) VS Code（TypeScript文件）不喜欢将字符串传递给Math.round()。(2) 让小数位数动态化（不要硬编码为2）。(3) toFixed()似乎是不必要的。所以我想到的方法是 Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces)。 - Kon

嗨，只是路过。如果性能是一个问题，请在使用字符串解析作为数字转字符串例程的一部分之前三思。 - undefined

Answer 4

对于现代浏览器，请使用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

- holmis83

Answer 5

我建议你使用

new Intl.NumberFormat('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(num)

这样你还将拥有指定国家的本地格式，而且它也会保证显示准确的2个小数位（无论是当num为1还是1.12345时都会分别显示1.00和1.12）

在此示例中，我使用了德国本地化，因为我想要我的数字显示千位分隔符，以下是一些输出：

1 => 1,00
1.12 => 1,12
1.1234 => 1,12
1234 => 1.234,00
1234.1234 => 1.234,12

- Imbro

---

被低估的答案。这种方法使得你可以对任何你想要格式化的内容进行处理，从千位分隔符的格式到小数点后的位数。 - laloune

我吻你的眼睛。 - Andrew

很棒的答案。谢谢你。顺便提一下：这个英文版本使用的是'en-US'而不是'de-DE'。 - DaveWoodall.com

@Dave 我故意使用德语来展示一些非典型的格式，正如我所解释的那样。你可以使用任何你想要的本地化，有数百种选择。另一个英语例子是'en-GB'。 - Imbro

非常感谢，我花了两个小时去搜索如何格式化那可恶的数字。真是太费劲了。 - Ivan

返回一个字符串 - Bowis

Answer 6

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

- Tiberiu Petcu

---

如果你的数字可以是1.4，23.654和0，那么你要采取什么精度呢？这会导致意想不到的结果。 - shinzou

请注意，原帖要求进行“适用时四舍五入”的舍入操作。toPrecision只是将数字格式化为特定的小数位数，会简单地省略多余的小数位，但不会对其进行舍入。当然，这也可能非常有用，但重要的是要理解两者之间的区别。 - Boaz

实际上，根据 Mozilla 的说法 toPrecision 确实进行四舍五入。 测试：(20.55).toPrecision(3) 返回 "20.6"。 - James L.

如果您想要去除数字末尾的零，可以在使用 toFixed 后将其转换为数字或浮点数：const formattedVal = Number(val.toFixed(2)); 不要使用 toPrecision，因为它在使用精度参数时会计算非小数位数。 - James L.

Answer 7

为了获得最准确的舍入结果，请创建以下函数并将其用于保留两位小数：

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



console.log("seeked to " + round(1.005, 2));

> 1.01

感谢 Razu、这篇文章 以及MDN 的 Math.round 参考资料。

- Nate

---

1.0049999999999998934 是什么意思？ - 4esn0k

它不超过2个小数点 - Stephen Adelakun

经过测试，这是我所见过唯一一种可靠的方法。谢谢。 - Artistan

Answer 8

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

var number = 123456.789;
console.log(new Intl.NumberFormat('en-IN', {
  maximumFractionDigits: 2
}).format(number));

- zloctb

---

如果您希望即使是整数也始终显示2位小数，则应使用minimumFractionDigits选项，而不是maximum。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits - Jay

Answer 9

你没有给我们完整的情况。

当我将javascript:alert(parseFloat(1).toFixed(2))粘贴到浏览器地址栏中时，它显示为1.00。 但是，如果之后对其进行操作，它将恢复原样。

alert(parseFloat(1).toFixed(2))

var num = 2
document.getElementById('spanId').innerHTML = (parseFloat(num).toFixed(2) - 1)

<span id="spanId"></span>

shows 1 and not 1.00

- mplungjan

---

适用于FF 50，Chrome 49和IE 8。 - Florian Straub

Answer 10

最简单的答案：

var num = 1.2353453;
num.toFixed(2); // 1.24

示例：http://jsfiddle.net/E2XU7/

- macio.Jun

---

好的，“toFixed”已经在https://dev59.com/6G025IYBdhLWcg3wOzTY#13292833中被建议使用。你的问题提供了哪些额外信息？ - Felix Kling

那个答案没有包括四舍五入功能，而我的答案包含了。 - macio.Jun

嗯？这完全是相同的答案。在数字上调用 toFixed。 - Felix Kling

正确，相同的功能，但该答案的结果是误导性的，我只是通过表达四舍五入功能来纠正它。 - macio.Jun

问题说明：“...适用时四舍五入”。您的答案没有涉及四舍五入。 - Chris

他的回答表明 toFixed 确实会进行四舍五入。 - Stijn de Witt