JavaScript 小数精度问题

JavaScript 小数精度问题

在 JavaScript 中,你可能遇到这样的现象:

js 复制代码
console.log(0.1 + 0.2); // 0.30000000000000004
console.log(2.3 * 10); // 23
console.log(2.3 * 100); // 229.99999999999997
console.log(2.3 * 10 === 23); // true
console.log(2.3 * 100 === 230); // false

1. 浮点数的本质

JavaScript 的数字都是 64 位 IEEE 754 双精度浮点数

  • 64 位组成:
arduino 复制代码
1 bit   | 符号位
11 bits | 指数
52 bits | 尾数 / 小数部分
  • 二进制无法精确表示部分十进制小数:
ini 复制代码
十进制 0.1 = 二进制 0.0001100110011001100...(无限循环)

所以 2.3 只是一个近似值:

复制代码
2.3 ≈ 2.29999999999999982236431605997495353221893310546875

2. 案例:2.3 _ 10 vs 2.3 _ 100

2.3 * 10

lua 复制代码
2.3 ≈ 2.2999999999999998
* 10
22.999999999999996  <-- 舍入成二进制 23

二进制示意:

makefile 复制代码
真实值: 22.999999999999996
存储值: 23
显示值: 23
比较: 2.3*10 === 23  → true

2.3 * 100

lua 复制代码
2.3 ≈ 2.2999999999999998
* 100
229.99999999999997  <-- 无法舍入成二进制 230

二进制示意:

makefile 复制代码
真实值: 229.99999999999997
存储值: 229.99999999999997
显示值: 229.99999999999997
比较: 2.3*100 === 230 → false

3. 打印规则

  • JS 打印数字时选择 最短且能还原原数值的十进制表示

  • 能显示整数就显示整数,不能就显示近似小数。

    22.999999999999996 → 23
    229.99999999999997 → 229.99999999999997

查看真实存储值:

scss 复制代码
console.log((2.3 * 10).toPrecision(17));  // "23"
console.log((2.3 * 100).toPrecision(17)); // "229.99999999999997"

4. 浮点数误差可视化

复制代码
2.3 的近似值:   2.2999999999999998
乘 10 → 23 (可舍入)
乘 100 → 229.99999999999997 (无法舍入)

5. 解决方法

5.1 四舍五入

javascript 复制代码
Math.round(2.3 * 100); // 230

5.2 保留小数

scss 复制代码
(0.1 + 0.2).toFixed(2); // "0.30"

5.3 使用整数运算

ini 复制代码
let price = 230;  // 2.3元 -> 230分
let total = price * 10;
console.log(total / 100); // 23

5.4 使用大数库

javascript 复制代码
import { Decimal } from "decimal.js";
let x = new Decimal(2.3).times(100);
console.log(x.toString()); // "230"

6. 总结

  • JS 数字是采用 64 位 IEEE 754 双精度浮点数存储,小数可能无法精确表示,这其实并不是 js 的问题,而是双精度浮点数机制的问题,同样 java 也会存在小数精度丢失的问题。
  • 打印整数或小数由 最短表示法规则 决定。
  • 严格相等比较(===)取决于浮点数的 二进制存储
  • 2.3*10 === 23 是因为误差正好舍入,2.3*100 !== 230 是误差无法舍入。
  • 遇到小数运算、金额计算时,最好用 四舍五入、整数运算或大数库

查看真实存储值:

scss 复制代码
console.log((2.3*100).toPrecision(17)); // 229.99999999999997
相关推荐
木斯佳3 小时前
前端八股文面经大全:26届秋招滴滴校招前端一面面经-事件循环题解析
前端·状态模式
光影少年3 小时前
react状态管理都有哪些及优缺点和应用场景
前端·react.js·前端框架
晚烛4 小时前
CANN + 物理信息神经网络(PINNs):求解偏微分方程的新范式
javascript·人工智能·flutter·html·零售
saber_andlibert4 小时前
TCMalloc底层实现
java·前端·网络
逍遥德4 小时前
如何学编程之01.理论篇.如何通过阅读代码来提高自己的编程能力?
前端·后端·程序人生·重构·软件构建·代码规范
冻感糕人~4 小时前
【珍藏必备】ReAct框架实战指南:从零开始构建AI智能体,让大模型学会思考与行动
java·前端·人工智能·react.js·大模型·就业·大模型学习
程序员agions4 小时前
2026年,“配置工程师“终于死绝了
前端·程序人生
alice--小文子5 小时前
cursor-mcp工具使用
java·服务器·前端
晚霞的不甘5 小时前
揭秘 CANN 内存管理:如何让大模型在小设备上“轻装上阵”?
前端·数据库·经验分享·flutter·3d
小迷糊的学习记录5 小时前
0.1 + 0.2 不等于 0.3
前端·javascript·面试