货币值格式化：保留两位小数、负数标红及精度问题求助

DevOps 小满

2026-5-21

嘿，我来帮你解决这两个头疼的问题！你遇到的其实是JavaScript里非常常见的浮点数精度陷阱，再加上没做好数值格式化导致的~

先搞定精度误差问题

JavaScript里的Number是基于IEEE 754标准的双精度浮点数，像0.01、0.05这类十进制小数没法被精确转换成二进制存储，所以直接做减法运算时，就会出现类似35.03999999999999这种诡异的结果，而不是预期的35.04。

解决方法很简单：把数值放大100倍转成整数计算，再缩小回原比例，用Math.round()修正误差：

var accountbalance = 99.99;
var renewalfee = 64.95;
// 先放大100倍取整，消除浮点数误差，再转回原比例
var balanceafterrenewal = Math.round((accountbalance - renewalfee) * 100) / 100;

再做货币格式化+负值标红

接下来写一个专门的格式化函数，既保证只显示两位小数，又能给负值加上红色样式：

function formatCurrency(value) {
  // 强制保留两位小数，不管原始数值有多少位小数
  const fixedValue = value.toFixed(2);
  // 判断是否为负值，添加红色样式
  if (value < 0) {
    return `<span style="color: red;">$${fixedValue}</span>`;
  }
  return `$${fixedValue}`;
}

完整代码示例

把两部分结合起来，最终的代码可以这样写：

var accountbalance = 99.99;
var renewalfee = 64.95;

// 修正浮点数精度误差
var balanceafterrenewal = Math.round((accountbalance - renewalfee) * 100) / 100;

// 格式化货币并处理负值样式
function formatCurrency(value) {
  const fixedValue = value.toFixed(2);
  return value < 0 ? `<span style="color: red;">$${fixedValue}</span>` : `$${fixedValue}`;
}

// 插入到页面元素中（替换成你实际的元素ID）
document.getElementById('balance-display').innerHTML = formatCurrency(balanceafterrenewal);