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

Question

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

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

Average Sales (no format) 1000.2017
Average Sales (with format) 1,000.2,017
Total Sales (no format) 1000
Total Sales (with format) 1,000

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

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

Answer 1

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

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

它会根据您所在的地区设置数字格式，使用千位分隔符和逗号后的 2 位数字。

Answer 2

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(?=(\d{3})+(?!\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(?=(\d{3})+(?!\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

等等

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

Answer 3

您要查找的内容：

逗号
小数点后2位，无论是多少。

这是你的函数：

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

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

Number value format with comma and two decimal points

javascript

number-formatting

chart.js