d3格式的数字不显示千位分隔符

Question

我有这个直接的JavaScript函数，它使用d3-format将字符串和货币代码转换为格式化数字。

import * as d3Format from 'd3-format'; 
import d3 from 'd3'; 

export const toCurrency = (number, currencyCode) => { 
    const formatDef = { 
    "decimal": ".", 
    "thousands": ",", 
    "grouping": [3], 
    "currency": [convertCodeToSymbol(currencyCode), ""]}; 
    const locale = d3Format.formatLocale(formatDef); 
    return locale.format("($.2f")(number); 
}; 

const convertCodeToSymbol = (currencyCode) => { 
    const conversions = { 
     "USD": "$", 
     "EUR": "€", 
     "GBP": "£" 
    }; 
    return conversions[currencyCode] ? conversions[currencyCode] : currencyCode; 
}; 

它的工作原理除了不显示千位分隔符外。鉴于（1999，“美元”）它返回“1999.00美元”。我已经对文档进行了双重检查，但数千和分组属性看起来都是正确的。我正试图获得“$ 1,999.00”。

（注意，进口D3线是没有必要的，但我把它只是为了确保我不缺少库的一部分。我已经安装了D3和D3-格式NPM）

Answer 1

通过提供locale definition的thousands属性，您只能指定组分隔符看起来像，就像请求格式化时一样。要真正组格式化输出，你需要包含逗号（,）选择到提供给locale.format(specifier)的符串：

的逗号（，）选项允许使用一组分离，如数千个逗号。

为您的代码，这意味着改变符串

return locale.format("($,.2f")(number); 

应该做的伎俩。

此工作示例显示了差异：

console.log(d3.format(".2f")(1999)); // 1999.00 
 
console.log(d3.format(",.2f")(1999)); // 1,999.00

<script src="https://d3js.org/d3.v4.js"></script>