初學者指南：深入了解 JavaScript 中使用 round 方法四捨五入到小數點的方法

更新日期： 2024 年 10 月 17 日

在開發 JavaScript 應用程式時，我們經常需要對數字進行四捨五入，特別是當需要處理小數點後的精確度時。

雖然 JavaScript 提供了基本的數學函式，如 Math.round()，但對於四捨五入到特定位數的小數，可能需要一些額外的技巧。

本文將為新手詳細介紹，如何在 JavaScript 中使用 round 方法四捨五入到小數點的方法，並提供實用的範例和最佳實踐。

Math.round() 的基本用法

什麼是 Math.round()？

Math.round() 是 JavaScript 提供的一個內建函式，用於對數字進行四捨五入，返回最接近的整數。

語法：

Math.round(x);

• x：要進行四捨五入的數字。

範例：

Math.round(4.5);   // 返回 5
Math.round(4.4);   // 返回 4
Math.round(-4.5);  // 返回 -4
Math.round(-4.6);  // 返回 -5

Math.round() 的限制

Math.round() 只能對整數部分進行四捨五入，無法直接指定小數點後的位數。

例如，我們希望將 3.14159 四捨五入到小數點後兩位，得到 3.14，Math.round() 無法直接實現。

四捨五入到小數點的方法

為了對小數點後的位數進行四捨五入，我們需要結合 Math.round() 與一些數學運算。

使用乘除法結合 Math.round()

原理：

1. 將數字乘以 10 的 n 次方，將需要保留的小數位數移到小數點左側。
2. 使用 Math.round() 進行四捨五入。
3. 將結果除以 10 的 n 次方，將小數位數移回原位。

公式：

function roundTo(number, decimalPlaces) {
  const factor = 10 ** decimalPlaces;
  return Math.round(number * factor) / factor;
}

• number：要進行四捨五入的數字。
• decimalPlaces（小數位數）：要保留的小數點位數。
• ** 運算子：** 是 JavaScript 中的指數運算子，用於計算數字的指數次方（從 ES2016 開始引入）。

範例

function roundTo(number, decimalPlaces) {
  const factor = 10 ** decimalPlaces;
  return Math.round(number * factor) / factor;
}

console.log(roundTo(3.14159, 2)); // 輸出：3.14
console.log(roundTo(1.005, 2));   // 輸出：1.01

解釋：

• 第一行：定義函式 roundTo，接受兩個參數：number（要四捨五入的數字）和 decimalPlaces（小數位數）。
• 第二行：計算因子 factor，使用 10 ** decimalPlaces 計算 10 的次方。
• 第三行：將數字乘以因子，進行四捨五入，然後再除以因子，得到四捨五入後的結果。

注意浮點數精度問題

JavaScript 使用 IEEE 754 標準的雙精度浮點數表示數字，這可能導致計算時出現精度問題。

問題範例

console.log(roundTo(1.005, 2)); // 預期輸出：1.01，實際輸出：1

原因：

1. 1.005 * 100 = 100.49999999999999
2. Math.round(100.49999999999999) = 100
3. 100 / 100 = 1

解釋：

• 由於浮點數的精度問題，1.005 並非精確地表示為 1.005，導致計算結果偏差。

解決浮點數精度問題

加上極小值校正

在進行乘法運算前，加上一個極小的值 Number.EPSILON，可以修正浮點數誤差。

改良的函式：

function roundTo(number, decimalPlaces) {
  const factor = 10 ** decimalPlaces;
  return Math.round((number + Number.EPSILON) * factor) / factor;
}

console.log(roundTo(1.005, 2)); // 輸出：1.01

解釋：

• Number.EPSILON 是 JavaScript 中能夠表示的最小的浮點數差值。
• 在原數字上加上 Number.EPSILON，可以微調數值，避免浮點數精度問題。

使用 toFixed() 方法

toFixed() 的用法

Number.prototype.toFixed() 可以將數字格式化為指定位數的小數，並返回字串。

語法：

number.toFixed(decimalPlaces);

• number：要格式化的數字。
• decimalPlaces（小數位數）：要保留的小數點位數。

範例：

let num = 1.005;
console.log(num.toFixed(2)); // 輸出："1.01"

注意事項：

• toFixed() 返回的是字串，如果需要進行數學運算，需要轉換為數字。

  let num = parseFloat((1.005).toFixed(2)); // 返回數字 1.01

• toFixed() 會自動進行四捨五入，但在某些情況下可能仍存在精度問題。

完整的解決方案

自定義四捨五入函式

function preciseRound(number, decimalPlaces) {
  const factor = 10 ** decimalPlaces;
  return Number(Math.round((number + Number.EPSILON) * factor) / factor);
}

console.log(preciseRound(1.005, 2));       // 輸出：1.01
console.log(preciseRound(123.456789, 4));  // 輸出：123.4568
console.log(preciseRound(-1.2345, 3));     // 輸出：-1.235

解釋：

• 使用 Number() 轉換：確保返回值為數字型別。
• 加上 Number.EPSILON：校正浮點數精度問題。
• 使用 ** 運算子：計算 10 的次方，更簡潔明瞭。

使用第三方庫

如果需要更高的精度和更複雜的數學運算，可以考慮使用專業的數學庫，例如 Decimal.js。

使用 Decimal.js 的範例：

1. 安裝：

   npm install decimal.js

2. 使用：

   const Decimal = require('decimal.js');

   let num = new Decimal(1.005);
   console.log(num.toFixed(2).toString()); // 輸出："1.01"

優點：

• 高精度：能夠精確處理浮點數，避免精度問題。
• 豐富的函式：提供了各種數學運算函式。

最佳實踐

處理貨幣與精確計算

• 避免直接使用浮點數進行計算：浮點數的精度問題可能導致金額計算錯誤。
• 使用整數進行計算：將金額以最小單位（如「分」）表示，計算後再轉換為元。

避免浮點數陷阱

• 了解浮點數的限制：認識到浮點數在電腦中的表示方式，理解其可能帶來的誤差。
• 使用可靠的四捨五入方法：如前述的 preciseRound() 函式，確保計算結果的正確性。

測試與驗證

• 進行單元測試：對關鍵的數學運算進行測試，驗證結果是否符合預期。
• 考慮極端情況：測試非常大或非常小的數字，確保函式的穩定性。

延伸閱讀：Python 中的 round() 函數詳解：新手指南

結語

在 JavaScript 中，對小數點位數進行四捨五入需要特別注意浮點數的精度問題。

透過瞭解 Math.round() 的基本用法，以及如何結合 ** 運算子等數學函式來實現四捨五入，我們可以在開發中避免常見的陷阱。

使用 ** 運算子取代 Math.pow()，使代碼更簡潔、易讀。

希望本篇文章能夠幫助新手深入理解這一概念，並在實際應用中靈活運用。

十、參考資料

• MDN Web Docs – Math.round()
• MDN Web Docs – 指數運算子（**）
• MDN Web Docs – Number.EPSILON
• Decimal.js 官方文件
• JavaScript 中的數字精度問題