如何使用JavaScript为API返回的价格数值添加千分位逗号分隔符

根因分析 #

toLocaleString()是JavaScript中数字类型的原生方法，你从接口获取的product.price?.text是字符串格式的数值（比如返回值为"1000"而非1000），字符串调用该方法不会触发千分位格式化逻辑，因此没有效果。

修复代码 #

只需要先把价格字段转为数字类型，再调用toLocaleString()即可，原空值兼容逻辑可以保留。
原来的代码行：

<p id="price">$${product.price?.text.toLocaleString() ?? ""}</p>

修改后代码：

<p id="price">$${product.price?.text ? Number(product.price.text).toLocaleString() : ""}</p>

注意事项 #

• 若需要固定小数位展示，可给toLocaleString()传入配置参数，比如保留2位小数的写法为：Number(product.price.text).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})
• 循环渲染时不要重复使用相同的id="price"，id为DOM唯一标识，建议替换为class="price"避免后续DOM操作异常。

内容的提问来源于stack exchange，提问作者JD Fill