带逗号和两位小数的数值格式

Posted 2023-04-14

【中文标题】带逗号和两位小数的数值格式

【英文标题】：Number value format with comma and two decimal points

【发布时间】：2018-09-02 23:30:29

【问题描述】：

我正在使用 chart.js 来显示我的销售额，问题是我无法将数据正确转换为带有逗号和两位小数的数字格式。

当数据为整数时，输出正确。但是，当我显示平均销售额时，我得到的输出类似于

平均销售额（无格式）1000.2017 平均销售额（含格式）1,000.2,017 总销售额（无格式）1000 总销售额（含格式）1,000

如何在javascript中正确格式化输出？

tooltips: 
  callbacks: 
     label: function(tooltipItem, data) 
         var value = data.datasets[0].data[tooltipItem.index];
         value = value.toString();
         value = value.replace(/\B(?=(\d3)+(?!\d))/g, ",");
              return value;
           
       
  ,
   scales: 
     yAxes: [
       ticks: 
         userCallback: function(value, index, values) 
           value = value.toString();
           value = value.replace(/\B(?=(\d3)+(?!\d))/g, ",");
              return value;
         
        
    ]

【问题讨论】：

“1000.2017”是一个数字还是两个数字？

“平均销售额（含格式）1,000.2,017”真的是您想要的吗？这不是有效的数字格式。

不，那是我要修复格式的代码输出

【参考方案1】：

Javascript 为您提供了一些解决方案来做到这一点。下面首先想到两个。

1. number.toLocaleString

如前所述，.toLocaleString 可以帮助您，但不要使用minimumFractionDigits，而是使用maximumFractionDigits。

如下：

number.toLocaleString(undefined,  maximumFractionDigits: 2 )

总结一下：

const decimalsFormated = number.toLocaleString(undefined,  maximumFractionDigits: 2 )

然后

const finalFormated = String(decimalsFormated).replace(/\B(?=(\d3)+(?!\d))/g, ",");

2。 Number.parseFloat + toFixed

let number = 123.1234
Number.parseFloat(number).toFixed(2);

在每种方法中，最好将您的解决方案包装在函数中：

function getCommaSeparatedTwoDecimalsNumber(number) 
    const fixedNumber = Number.parseFloat(number).toFixed(2);
    return String(fixedNumber).replace(/\B(?=(\d3)+(?!\d))/g, ",");

您也可以使用正则表达式。不过我想说这太复杂了。

另外非常重要的一点需要注意的是，您可能希望也可能不希望对最终结果进行四舍五入。

将toLocaleString 与 maxDigits 一起使用只会删除这两个数字之后的所有内容。 使用 toFixed 会使您的输出不正确地四舍五入。

此解决方案将正确舍入：

Number(Math.round(1.005+'e2')+'e-2').toFixed(2);

从这里粘贴： Format number to always show 2 decimal places

最后一件事，可能是最重要的。 根据输入数字的格式，上述解决方案可能有效，也可能无效。您需要决定输入格式，如果无法预见，请为每种可能性提供格式器：

1000000.123124

10000123123

100000,1239

1.12039

1,19012

等等

根据格式，您需要执行的操作顺序可能会有所不同。

【讨论】：

Number.parseFloat(number).toFixed(2).replace(/[.]/, ","));正在工作，但没有逗号 我需要一个逗号和小数点，例如 1,000.00

只是为了清楚 Number.parseFloat(number).toFixed(2).replace(/[.]/, ",")) 的输出；是 1000.00 我需要的是 1,000.00

其实不是，因为.replace(/[.]/, ","));会用逗号代替点。一开始我误会你了。我的答案现在可以了吗？

【参考方案2】：

您可以尝试像这样使用 toLocaleString：

value = value.toLocaleString(undefined,  maximumFractionDigits: 2 );

它将根据您的区域设置格式化数字，用千位分隔符和逗号后的 2 位数字。

【讨论】：

您使用的是什么浏览器，并非所有浏览器都支持带参数的 toLocaleString（Edge 支持）。

我正在使用 chrome

它不会起作用，因为在这个答案中 minimum 应该替换为 maximum

请点赞我的评论和/或回答，因为它有帮助:)

【参考方案3】：

你在找什么：

逗号 小数点后两位。

这是你的功能：

function get4DecimalPointsWithCommas(amount) 
    return amount.toLocaleString(undefined,  maximumFractionDigits: 4, minimumFractionDicits: 4 );