寫在前面

“為什么我的計算在 React Native 中總是出現奇怪的精度問題？” —— 這可能是許多開發者在作前端程序猿的朋友們都會遇到的第一個頭疼問題。本文將深入探討前端精度問題的根源，我將以RN為例，并提供一系列實用解決方案，讓你的應用告別計算誤差。

一、精度問題的根源：JavaScript 的浮點數陷阱

1.1 JavaScript 的數字表示方式

在 React Native 中，我們使用的是 JavaScript 的數字系統，而 JavaScript 遵循 IEEE 754 標準，采用雙精度浮點數（64位）表示所有數字。這意味著：

• 整數和浮點數沒有區別
• 所有數字都以二進制浮點數形式存儲
• 最大安全整數是 2^53 - 1（即 9007199254740991）

console.log(0.1 + 0.2); // 輸出：0.30000000000000004

這個經典例子完美展示了浮點數精度問題。不是 JavaScript 的 bug，而是二進制浮點數運算的固有特性。

1.2 React Native 中的特殊場景

在 React Native 開發中，精度問題尤其突出在：

• 金融計算：金額計算不容許誤差
• 科學計算：需要高精度結果
• 地理位置：經緯度計算
• 動畫效果：流暢的動畫需要精確計算

二、常見精度問題場景分析

2.1 簡單算術運算的陷阱

// 看似簡單的計算，卻暗藏玄機
const calculateTotal = (price, quantity) => {return price * quantity;
};console.log(calculateTotal(0.1, 0.2)); // 0.020000000000000004

2.2 比較操作的不可靠性

// 永遠不要直接比較浮點數
const a = 0.1 + 0.2;
const b = 0.3;console.log(a === b); // false

2.3 數據序列化的精度丟失

// 服務器返回的JSON數據
const response = {amount: 12345678901234567890
};console.log(response.amount); // 12345678901234567000

三、基礎解決方案：Number 的極限

3.1 使用 toFixed() 進行格式化

const result = (0.1 + 0.2).toFixed(2);
console.log(result); // "0.30" (注意返回的是字符串)

注意事項：

• 返回的是字符串，不是數字
• 四舍五入可能不符合金融計算要求
• 不能解決計算過程中的精度問題

3.2 使用 Math.round 進行整數運算

// 將小數轉換為整數運算
const calculate = (a, b) => {const multiplier = Math.pow(10, 2); // 保留2位小數return (a * multiplier + b * multiplier) / multiplier;
};console.log(calculate(0.1, 0.2)); // 0.3

優點：

• 避免了部分浮點數問題
• 結果相對準確

缺點：

• 操作繁瑣
• 仍然有精度限制

四、進階解決方案：第三方庫的力量

4.1 decimal.js —— 高精度數學計算

npm install decimal.js

import Decimal from 'decimal.js';// 精確計算
const result = new Decimal(0.1).plus(new Decimal(0.2));
console.log(result.toString()); // "0.3"// 復雜運算
const complexCalc = new Decimal(12.345).times(new Decimal(1.2)).dividedBy(new Decimal(3.4)).toFixed(4