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

Question

我正在使用 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(?=(\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

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 2

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

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

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

Answer 3

你在找什么：

• 逗号
• 小数点后两位。

这是你的功能：

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