格式编号始终显示2位小数

Var*_*ada 715 javascript floating-point number-formatting

我想格式化我的数字,以便始终显示2位小数,在适用的地方进行舍入.

例子:

number     display
------     -------
1          1.00
1.341      1.34
1.345      1.35
Run Code Online (Sandbox Code Playgroud)

我一直在用这个:

parseFloat(num).toFixed(2);
Run Code Online (Sandbox Code Playgroud)

但它显示11,而不是1.00.

dru*_*dge 1022

这在FF4中工作正常:

parseFloat(Math.round(num3 * 100) / 100).toFixed(2);
Run Code Online (Sandbox Code Playgroud)

现场演示

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

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

var num3 = "1.345";
document.getElementById('num3').innerHTML = parseFloat(Math.round(num3 * 100) / 100).toFixed(2);
Run Code Online (Sandbox Code Playgroud)
span {
    border: 1px solid #000;
    margin: 5px;
    padding: 5px;
}
Run Code Online (Sandbox Code Playgroud)
<span id="num1"></span>
<span id="num2"></span>
<span id="num3"></span>
Run Code Online (Sandbox Code Playgroud)

请注意,它将舍入到2位小数,因此输入1.346将返回1.35.

  • 不需要使用round(),因为toFixed()将它舍入. (39认同)
  • toFixed()会对它进行舍入,但不要忘记它返回一个字符串......所以这个方法实际上只对显示有用.如果要对舍入值执行进一步的数学计算,请不要使用toFixed(). (21认同)
  • 整个答案可以简化为`(+ num).toFixed(2)`.它甚至保留了原版中的舍入错误,请参阅[*Nate的回答*](/sf/ask/429382761/#34796988) . (12认同)
  • 根据MDN,由于舍入误差,Math.round不会总是给出准确的结果.我用1.005测试了这个,它应该是1.01,但它给出了1.00.使用我的答案获得一致的准确性:http://stackoverflow.com/a/34796988/3549440. (7认同)
  • @Kooilnc:OP希望`1`显示为`1.00`,而`1.341`显示为`1.34`. (6认同)
  • @OP这根据你的问题不起作用,是吗?它显示1.34.你想保留1.341,同时能够显示1为1.00,不是吗?我不是很介意,但你选择这个答案是正确的,这很奇怪. (4认同)
  • @TWright是的,这会返回一个字符串.您可以轻松地将整个代码包装在另一个parseFloat中,这将把它更改回一个数字. (2认同)
  • 为什么要执行Math.round和parseFloat?仅toFixed()就足以实现所需的结果。 (2认同)

Abe*_*ROS 296

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
Run Code Online (Sandbox Code Playgroud)

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);
Run Code Online (Sandbox Code Playgroud)
<span id="line1"></span>
<br/>
<span id="line2"></span>
<br/>
<span id="line3"></span>
<br/>
<span id="line4"></span>
Run Code Online (Sandbox Code Playgroud)

  • 在完成之前意外地提交了最后一条评论..` 1.345`是一个无法完全以浮点存储的数字的例子,所以我认为它没有像你期望的那样舍入的原因是它实际存储为一个略小于1.345的数字,它向下舍入.如果用`(1.34500001).toFixed(2)`进行测试,那么你会看到它正确地向上舍入到1.35. (36认同)
  • 虽然晚了,但为了阐明“5”舍入的情况,它总是舍入到最接近的偶数。1.345 将四舍五入为 1.34,但 1.335 也会四舍五入。一半的时间 5 上涨,一半的时间 5 下跌。 (2认同)

raz*_*azu 86

如果这个答案会失败value = 1.005.

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

Number(Math.round(1.005+'e2')+'e-2'); // 1.01
Run Code Online (Sandbox Code Playgroud)

信用:JavaScript中的舍入小数

  • 令人惊讶的是,这里的其他人都没有看到"toFixed"有这种舍入问题.你的答案应该是公认的答案. (13认同)
  • 这是一个可靠的答案。我能想到的一些改进:(1)VS Code(TypeScript 文件)不喜欢 Math.round() 传入字符串。(2) 使小数位数动态化(不硬编码为 2)。(3) toFixed() 似乎没有必要。所以我想出的是`Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces)` (3认同)

hol*_*s83 58

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

var num = 1.345;
num.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 });
Run Code Online (Sandbox Code Playgroud)

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

num.toLocaleString("en-US", { maximumFractionDigits: 2, minimumFractionDigits: 2 });
Run Code Online (Sandbox Code Playgroud)

这使:

1.35

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

num.toLocaleString("sv-SE", { maximumFractionDigits: 2, minimumFractionDigits: 2 });
Run Code Online (Sandbox Code Playgroud)

它会给:

1,35


Imb*_*bro 42

我建议你使用

new Intl.NumberFormat('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(num)
Run Code Online (Sandbox Code Playgroud)

这样您还将获得指定国家/地区的本地格式,并且可以保证显示精确的 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
Run Code Online (Sandbox Code Playgroud)

  • 被低估的答案。此方法可以格式化所有您想要的内容,从千位格式到小数位数格式 (3认同)
  • Ich küsse deine Augen。 (2认同)
  • @Dave,正如我所解释的,我故意使用德语进行非典型格式来表达观点。人们可以使用任何想要的本地化版本,有数百种。另一个英语示例是“en-GB” (2认同)

小智 19

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
Run Code Online (Sandbox Code Playgroud)

  • 如果您想[去除尾随零](/sf/ask/252892111/重要-trailing-zeros-from-a-number),请在使用`toFixed`后将其转换为数字或浮点数: `const formattedVal = Number(val.toFixed(2));` 不要使用 `toPrecision`,因为它在使用精度参数时计算非十进制数。 (5认同)
  • 注意OP要求**"在适用的地方进行舍入"**.`toPrecision`只能将数字格式化为特定的小数位数,只留下多余的位置,但**不会将它们四舍五入**.当然,这也可能非常有用,但了解差异非常重要. (2认同)

mpl*_*jan 15

您没有向我们提供全部情况。

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)
Run Code Online (Sandbox Code Playgroud)
<span id="spanId"></span>
Run Code Online (Sandbox Code Playgroud)

shows 1 and not 1.00
Run Code Online (Sandbox Code Playgroud)


Pir*_*App 13

圆形到N个位置的更通用的解决方案

function roundN(num,n){
  return parseFloat(Math.round(num * Math.pow(10, n)) /Math.pow(10,n)).toFixed(n);
}


console.log(roundN(1,2))
console.log(roundN(1.34,2))
console.log(roundN(1.35,2))
console.log(roundN(1.344,2))
console.log(roundN(1.345,2))
console.log(roundN(1.344,3))
console.log(roundN(1.345,3))
console.log(roundN(1.3444,3))
console.log(roundN(1.3455,3))

Output

1.00
1.34
1.35
1.34
1.35
1.344
1.345
1.344
1.346
Run Code Online (Sandbox Code Playgroud)

  • 这也失败,某些数字接近 0,`roundN(-3.4028230607370965e+38,2)` 返回 `"-3.4028230607370965e+38"` 而不是预期的 0.00 (2认同)
  • 请注意,前面提到的数字不应该显示为零,而是一个巨大的数字,这只是我大脑中的一个错误。但它仍然不起作用,因为它仍然没有显示2位小数 (2认同)

小智 13

好消息!!!!!看来新版本的 javascript ES2020(我刚刚使用)提供了此函数的新行为。

let ff:number =3
console.info(ff.toFixed(2)) //3.00
Run Code Online (Sandbox Code Playgroud)

如预期的。


mac*_*Jun 12

最简单的答案:

var num = 1.2353453;
num.toFixed(2); // 1.24
Run Code Online (Sandbox Code Playgroud)

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

  • 好吧,在http://stackoverflow.com/a/13292833/218196中已经建议使用`toFixed`.您的问题提供了哪些其他信息? (9认同)
  • 呃?这是完全相同的答案.在数字上调用`toFixed`. (7认同)

Nat*_*ate 12

要获得最准确的舍入,请创建此函数:

function round(value, decimals) {
    return Number(Math.round(value +'e'+ decimals) +'e-'+ decimals).toFixed(decimals);
}
Run Code Online (Sandbox Code Playgroud)

并用它来舍入到2位小数:

console.log("seeked to " + round(1.005, 2));
> 1.01
Run Code Online (Sandbox Code Playgroud)

由于Razu,文章,并MDN的Math.round参考.

  • http://jsfiddle.net/Artistan/qq895bnp/ 测试过,这是我见过的唯一一致的方法。谢谢。 (3认同)
  • 1.0049999999999998934 怎么样? (2认同)

Sam*_*ert 9

如果您已经在使用jQuery,那么您可以查看使用jQuery Number Format插件.

该插件可以将格式化的数字作为字符串返回,您可以设置十进制和千位分隔符,您可以选择要显示的小数位数.

$.number( 123, 2 ); // Returns '123.00'
Run Code Online (Sandbox Code Playgroud)

您还可以从GitHub获取jQuery数字格式.

  • 使用插件"只是有固定长度小数部分"是有点过分了. (9认同)
  • @Lashae,当然,如果这就是你想做的.我发布了这个以防OP或其他任何人想要插件提供的额外功能. (9认同)

zlo*_*ctb 9

var number = 123456.789;


console.log(new Intl.NumberFormat('en-IN', { maximumFractionDigits: 2 }).format(number));
Run Code Online (Sandbox Code Playgroud)

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


Koo*_*Inc 7

你是这个意思吗?

function showAsFloat(num, n){
      return !isNaN(+num) ? (+num).toFixed(n || 2) : num;
}

document.querySelector('#result').textContent = 
    [
     'command                      | result',
     '-----------------------------------------------',
     'showAsFloat(1);              | ' + showAsFloat(1),
     'showAsFloat(1.314);          | ' + showAsFloat(1.314),
     'showAsFloat(\'notanumber\')    | ' + showAsFloat('notanumber'),
     'showAsFloat(\'23.44567\', 3)   | ' + showAsFloat('23.44567', 3),
     'showAsFloat(2456198, 5)      | ' + showAsFloat('2456198', 5),
     'showAsFloat(0);              | ' + showAsFloat(0)
    ].join('\n');
Run Code Online (Sandbox Code Playgroud)
<pre id="result"></pre>
Run Code Online (Sandbox Code Playgroud)


Beh*_*adi 6

将数字转换为字符串,仅保留两个小数:

var num = 5.56789;
var n = num.toFixed(2);
Run Code Online (Sandbox Code Playgroud)

n的结果将是:

5.57
Run Code Online (Sandbox Code Playgroud)


小智 6

刚遇到这个最长的线程,下面是我的解决方案:

parseFloat(Math.round((parseFloat(num * 100)).toFixed(2)) / 100 ).toFixed(2)
Run Code Online (Sandbox Code Playgroud)

让我知道是否有人可以戳一个洞


小智 5

你在找地板吗?

var num = 1.42482;
var num2 = 1;
var fnum = Math.floor(num).toFixed(2);
var fnum2 = Math.floor(num2).toFixed(2);
alert(fnum + " and " + fnum2); //both values will be 1.00
Run Code Online (Sandbox Code Playgroud)

  • 我认为他不想四舍五入到最接近的整数。 (4认同)