關於 JavaScript 浮點運算的精度解決方案

問題背景

在 chrome 瀏覽器中調出開發者工具，在控制檯窗口輸入下面的表達式：

0.1 + 0.2            // 指望：0.3，結果：0.30000000000000004

這就是 JavaScript 臭名昭著的浮點值運算舍入偏差問題。

緣由

至於問題產生的緣由，或者關於問題的更詳細的描述，你們請看下面幾個文章：

• JavaScript浮點運算0.2+0.1 !== 0.3
• javascript浮點值運算舍入偏差
• 【JS 基礎】JS 浮點數四則運算精度丟失問題 (3)

解決方案

這裏主要討論一下解決方案的問題，上面幾篇文章的解決思路，都是重寫：加法、減法、乘法和除法運算。感受過於囉嗦，方案不簡潔。簡單的辦法就是，加、減、乘、除，該怎麼算還怎麼算。由於結果有問題，因此就在結果上作文章。解決問題的思路，其實就是考慮在計算結果上保留幾位小數的問題。

代碼以下：

/**
 * 小數點後面保留第 n 位
 *
 * @param x 作近似處理的數
 * @param n 小數點後第 n 位
 * @returns 近似處理後的數 
 */
function roundFractional(x, n) {
  return Math.round(x * Math.pow(10, n)) / Math.pow(10, n);
}

有了這個函數，那麼加、減、乘、除的計算就變成下面的形式了：

roundFractional(0.1 + 0.2, 1);         // 結果：0.3
roundFractional(0.1 * 0.2, 2);         // 結果：0.02
                                       // 減法和除法依次類推，此處略掉兩行

能夠把下面的代碼複製到 chrome 開發者工具的控制檯中，觀察一下運行效果：

function roundFractional(x, n) {
  return Math.round(x * Math.pow(10, n)) / Math.pow(10, n);
}
console.log(0.1 + 0.2);
console.log(roundFractional(0.1 + 0.2, 1));
console.log(0.1 * 0.2);
console.log(roundFractional(0.1 * 0.2, 2));