JavaScript toFixed(2) 處理金額精度的正確用法與避坑指南

前端處理金額時，toFixed(2) 是保留兩位小數的常用方法，但直接用在加減運算結果上易產生「033.00」這類字符串拼接問題。本文給出正確處理流程。

問題場景

// 當前單元格值為字符串 "33"
tdSums.eq(index).html((parseFloat(this.innerHTML) || 0) + (sum[index] || 0));
// 直接 .toFixed(2) 會導致字符串拼接："33" + "0.00" → "330.00" 或 "033.00"

核心原則

1. 先轉數字，再運算，最後格式化：parseFloat(val).toFixed(2)。
2. 統一用「分」作為最小單位：後端存儲/傳輸用整數（分），前端顯示時除以 100 再 toFixed(2)，徹底避免浮點數誤差。
3. 輸入框實時格式化：使用 input 事件配合正則限制輸入格式。

正確代碼模式

// 1. 統一轉換函數
const toNum = v => parseFloat(v) || 0;
const fmt = v => toNum(v).toFixed(2);

// 2. 計算合計與差距
tdAges.each(function(index) {
    const current = toNum(this.innerHTML);
    const delta   = toNum(sum[index]);
    tdSums.eq(index).html(fmt(current + delta));
    tdDiffs.eq(index).html(fmt(current - delta));
});

// 3. 若後端返回「分」
const fmtFen = fen => (fen / 100).toFixed(2);

常見陷阱與解決

進階：封裝金額工具類

class Money {
  constructor(fen) { this.fen = Math.round(fen); }
  static fromYuan(yuan) { return new Money(Math.round(yuan * 100)); }
  add(other) { return new Money(this.fen + other.fen); }
  sub(other) { return new Money(this.fen - other.fen); }
  toString() { return (this.fen / 100).toFixed(2); }
  toFen() { return this.fen; }
}

// 使用
const total = Money.fromYuan(33.5).add(Money.fromYuan(0.5));
console.log(total.toString()); // "34.00"

遵循「整數運算、最後格式化」原則，配合工具類封裝，可徹底解決前端金額精度問題。