Js小数计算不准？精度问题的原因与解决方法

你在用 JavaScript 做计算时，有没有遇到过这种让人抓狂的情况？

console.log(0.1 + 0.2); // 输出 0.30000000000000004，而不是 0.3
console.log(0.3 - 0.1); // 输出 0.19999999999999998，而不是 0.2

明明很简单的数学题，JavaScript 却算错了？这不是你的错，也不是 JavaScript 的严重缺陷。这是计算机存储数字的一种限制造成的，叫 JavaScript 浮点数精度问题。理解它并学会处理，对做涉及金额、科学计算等需要精确数字的网页应用非常重要。

为什么 JavaScript 小数计算会出错？

根本原因在于：JavaScript 里只有一种数字类型Number，它遵循国际标准 IEEE 754，用二进制（0和1）表示所有数字，包括小数。

问题来了：很多我们觉得简单的十进制小数（像 0.1、0.2），在二进制世界里是无限循环的小数（就像 1/3 在十进制里是 0.333... 一样）。但计算机内存有限，只能存一部分。存的时候“四舍五入”了，计算时误差就出现了。

简单说：计算机用二进制存小数，有些十进制的数存进去就有误差，算起来误差更大。

解决 JavaScript 数字精度问题的实用方法

遇到需要精确计算（特别是涉及钱的时候），试试这些办法：

方法一：用 toFixed() 控制显示位数（适合展示结果）

let result = (0.1 + 0.2).toFixed(2); // 结果是字符串 "0.30"
console.log(result); // 输出 "0.30"

// 如果需要数字，可以再转换一次（注意：转换后小数部分可能还是近似值）
let numResult = parseFloat(result);
console.log(numResult); // 输出 0.3

优点： 简单，快速让数字看起来正常。
缺点： 得到的是字符串，做后续计算可能还需要转换。它只是把显示结果修整了，内存里的值可能还是近似值。

方法二：先变整数再计算（常用、有效）

核心思路：把小数变成整数（比如把元变成分），算完再变回小数。

function add(num1, num2) {
  // 计算小数点后最多有几位
  const multiplier = Math.pow(10, Math.max(getDecimalLength(num1), getDecimalLength(num2)));
  // 都变成整数再计算，然后变回小数
  return (num1 * multiplier + num2 * multiplier) / multiplier;
}

// 辅助函数：获取一个数的小数点后的位数
function getDecimalLength(num) {
  const decimalPart = num.toString().split('.')[1];
  return decimalPart ? decimalPart.length : 0;
}

console.log(add(0.1, 0.2)); // 正确输出 0.3
console.log(add(1.25, 3.41)); // 正确输出 4.66

优点： 比较可靠，利用了整数在计算机里能精确表示的特性。
缺点： 代码稍微多点，要注意数字范围别太大（超出整数范围也不行）。

方法三：使用 BigInt 处理超大整数（不适合直接处理小数）

BigInt 是 JavaScript 新增的类型，可以表示任意大的整数。虽然不能直接处理小数，但可以和第二种方法结合处理放大后的整数。

// 假设我们处理货币（分）
let price1 = BigInt(125); // 代表 1.25元 (125分)
let price2 = BigInt(341); // 代表 3.41元 (341分)

let totalCents = price1 + price2; // BigInt 类型: 466n
let totalYuan = Number(totalCents) / 100; // 转回元: 4.66

console.log(totalYuan); // 输出 4.66

方法四：使用专门的高精度计算库（最省心强大）

当需要处理非常复杂的财务计算或科学计算，不想自己写容易出错的工具函数时，就用成熟的库：

decimal.js
big.js
bignumber.js

以 decimal.js 为例：

// 首先需要引入库（例如通过npm安装或script标签引入）
// <script src="path/to/decimal.js"></script> 或 import Decimal from 'decimal.js';

let d1 = new Decimal(0.1);
let d2 = new Decimal(0.2);
let sum = d1.plus(d2);

console.log(sum.toString()); // 正确输出 '0.3'
console.log(sum.toNumber()); // 输出 0.3 (数值)

优点： 功能强大，精度高，api设计专门用于精确计算。
缺点： 需要额外引入一个库，文件体积会增大一点点。

总结：如何选择 JavaScript 精度问题解决方案

简单展示结果？ 用 toFixed() 修整显示位数。
一般精度计算（如金额）？ 推荐 先乘后除转成整数计算，简单有效。
处理超大整数？ 用 BigInt。
复杂金融/科学计算？ 直接用 decimal.js 或类似高精度库 最稳妥。

记住这个关键点：JavaScript 的浮点数精度问题根源是二进制的存储限制。 处理需要精确结果的计算时，尽量避免直接用 +、-、*、/ 操作小数。优先考虑整数运算或使用可靠的库，这样才能确保你的网页应用（尤其是购物车、财务系统等）计算准确无误。理解并解决这个 JS 小数计算难题，是写出专业前端代码的重要一步。

链接: https://fly63.com/article/detial/12822