关于javascript：格式编号始终显示2位小数


Format number to always show 2 decimal places

我想格式化我的数字，始终显示2个小数位，舍入在适用的地方。

实例：

1
2
3
4
5
number     display
------     -------
1          1.00
1.341      1.34
1.345      1.35

我一直在用这个：

1
parseFloat(num).toFixed(2);

但它把1显示为1，而不是1.00。

相关讨论

这在FF4中很有效：

1
parseFloat(Math.round(num3 * 100) / 100).toFixed(2);

现场演示

1
2
3
4
5
6
7
8
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);
1
2
3
4
5
span {
    border: 1px solid #000;
    margin: 5px;
    padding: 5px;
}
1
2
3
<span id="num1"></span>
<span id="num2"></span>
<span id="num3"></span>

请注意，它将四舍五入到小数点后2位，因此输入1.346将返回1.35。

相关讨论

1
2
3
4
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

1
2
3
4
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);
1
2
3
4
5
6
7
<span id="line1"></span>
<br/>
<span id="line2"></span>
<br/>
<span id="line3"></span>
<br/>
<span id="line4"></span>

相关讨论

如果value = 1.005的话，这个答案将失败。

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

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

@kon和原作者建议的清洁代码：

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

学分：在javascript中舍入小数

相关讨论

1
2
3
4
5
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
相关讨论

最简单的答案：

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

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

相关讨论

一个更通用的解决方案，用于四舍五入到n个位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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
相关讨论

对于最精确的舍入，创建此函数：

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

用它来四舍五入到小数点后两位：

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

感谢Razu、本文以及MDN的math.round参考。

相关讨论

如果您已经在使用jquery，那么可以使用jquery数字格式插件。

插件可以将格式化的数字作为字符串返回，可以设置小数点和千位分隔符，还可以选择要显示的小数位数。

1
$.number( 123, 2 ); // Returns '123.00'

您还可以从GitHub获取jQuery编号格式。

相关讨论

1
2
3
4
var number = 123456.789;


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

https://developer.mozilla.org/en/docs/web/javascript/reference/global_objects/numberformat

这就是你的意思吗？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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('
');
1
[cc lang="javascript"]

1
2
</P><div class="suo-content">[collapse title=""]<ul><li>ShowAsFloat(0)仍返回"0"</li><li>@你说得对。修正了答案</li></ul>[/collapse]</div><hr><P>将数字转换为字符串，只保留两位小数：</P>[cc lang="javascript"]var num = 5.56789;
var n = num.toFixed(2);

n的结果是：

1
5.57

你在找地板吗？

1
2
3
4
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
相关讨论

在需要特定格式的地方，您应该编写自己的例程，或者使用一个库函数来满足您的需要。基本的ECMAScript功能通常不足以显示格式化的数字。

这里有关于舍入和格式的详细解释：http://www.merlyn.demon.co.uk/js round.htm_rij

作为一般规则，舍入和格式化只能作为输出前的最后一步进行。提前这样做可能会导致意外的大错误并破坏格式。

相关讨论

这里还有一个通用函数，可以将格式设置为任意小数位数：

1
2
3
4
5
function numberFormat(val, decimalPlaces) {

    var multiplier = Math.pow(10, decimalPlaces);
    return (Math.round(val * multiplier) / multiplier).toFixed(decimalPlaces);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function number_format(string,decimals=2,decimal=',',thousands='.',pre='R$ ',pos=' Reais'){
  var numbers = string.toString().match(/\d+/g).join([]);
  numbers = numbers.padStart(decimals+1,"0");
  var splitNumbers = numbers.split("").reverse();
  var mask = '';
  splitNumbers.forEach(function(d,i){
    if (i == decimals) { mask = decimal + mask; }
    if (i>(decimals+1) && ((i-2)%(decimals+1))==0) { mask = thousands + mask; }
    mask = d + mask;
  });
  return pre + mask + pos;
}
var element = document.getElementById("format");
var money= number_format("10987654321",2,',','.');
element.innerHTML = money;
1
2
3
4
5
6
#format{
display:inline-block;
padding:10px;
border:1px solid #ddd;
background:#f5f5f5;
}
1
Test 123456789

1
2
3
4
5
6
function currencyFormat (num) {
    return"$" + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g,"$1,")
}

console.info(currencyFormat(2665));   // $2,665.00
console.info(currencyFormat(102665)); // $102,665.00

你没有把整个情况告诉我们。

当我将1.00粘贴到位置栏时，javascript:alert(parseFloat(1).toFixed(2))在我的浏览器中显示1.00。但是，如果您以后对它做一些事情，它将恢复。

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


shows 1 and not 1.00
相关讨论

在进行tofixed()调用之前，我必须在parsefloat()和number()转换之间做出决定。下面是一个数字格式的例子，用于捕获用户输入。

HTML：

1
<input type="number" class="dec-number" min="0" step="0.01" />

事件处理程序：

1
2
3
4
$('.dec-number').on('change', function () {
     const value = $(this).val();
     $(this).val(value.toFixed(2));
});

上述代码将导致类型错误异常。请注意，虽然HTML输入类型是"数字"，但用户输入实际上是"字符串"数据类型。但是，tofixed()函数只能在数字对象上调用。

我的最终代码如下：

1
2
3
4
$('.dec-number').on('change', function () {
     const value = Number($(this).val());
     $(this).val(value.toFixed(2));
});

我喜欢使用number()与parsefloat()进行强制转换的原因是，我不必对空输入字符串或NaN值执行额外的验证。函数的作用是：自动处理一个空字符串并将其转换为零。

1
2
3
4
5
6
7
8
9
var quantity = 12;

var import1 = 12.55;

var total = quantity * import1;

var answer = parseFloat(total).toFixed(2);

document.write(answer);

我确实喜欢：

1
2
var num = 12.749;
parseFloat((Math.round(num * 100) / 100).toFixed(2)); // 123.75

用2个小数点取整，然后确保使用parseFloat()对其进行分析。返回数字，而不是字符串，除非您不关心它是字符串还是数字。

相关讨论

对于现代浏览器，使用toLocaleString：

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

指定一个区域设置标记作为控制十进制分隔符的第一个参数。对于点，请使用例如英语-美国地区：

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

它给出：

1.35

欧洲的大多数国家使用逗号作为十进制分隔符，因此，如果您使用瑞典/瑞典地区：

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

它将给予：

1,35

带逗号的函数号(数字){

1
2
3
var newval = parseFloat(Math.round(number * 100) / 100).toFixed(2);

return newval.toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");

}

用精度法扩展数学对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Object.defineProperty(Math, 'precision',{
   value: function (value,precision,type){
             var v = parseFloat(value),
                 p = Math.max(precision,0)||0,
                 t = type||'round';
              return (Math[t](v*Math.pow(10,p))/Math.pow(10,p)).toFixed(p);
          }
    });

console.log(
    Math.precision(3.1,3), // round 3 digits
    Math.precision(0.12345,2,'ceil'), // ceil 2 digits
    Math.precision(1.1) // integer part
)

这是另一种只使用底数取整的解决方案，也就是说，确保计算出的金额不会大于原始金额(有时交易需要)：

1
Math.floor(num* 100 )/100;

埃多克斯为我工作。

相关讨论

1
(num +"").replace(/^([0-9]*)(\.[0-9]{1,2})?.*$/,"$1$2")
相关讨论

这就是我解决问题的方法：

28