如何将价格格式化为带小数数字？toLocaleString显示异常求助

问题出在你仅设置了maximumFractionDigits: 2——这个配置仅限制最多显示两位小数，但如果价格本身是整数，就不会自动补零展示小数位。要实现始终显示两位小数的格式，需要同时添加minimumFractionDigits: 2配置项。

修改后的代码如下：

<div className="flex-box d-flex justify-content-between align-items-center">
    <h6>Price</h6>
    <span>
        $ {product.price.toLocaleString('en-US', {
            maximumFractionDigits: 2,
            minimumFractionDigits: 2
        })}
    </span>
</div>

另外，也可以直接使用货币格式化的专用配置，让代码更简洁规范，它会自动处理美元符号和固定小数位：

<div className="flex-box d-flex justify-content-between align-items-center">
    <h6>Price</h6>
    <span>
        {product.price.toLocaleString('en-US', {
            style: 'currency',
            currency: 'USD'
        })}
    </span>
</div>

以上两种方式都能让价格稳定显示为$ 1,399.99（整数价格会显示为$ 1,000.00）的格式。

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