news 2026/8/13 20:22:28

JavaScript浮点数精度问题及解决方案

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
JavaScript浮点数精度问题及解决方案

引言

在JavaScript开发中,我们经常会遇到一些看似简单的数学运算却产生意外结果的情况。例如,0.3 - 0.2 !== 0.12.55.toFixed(1)返回2.5而不是预期的2.6。这些问题源于JavaScript的数字表示方式——基于IEEE 754标准的双精度浮点数格式。本文将深入探讨这些问题的根源,并提供实用的解决方案。

问题一:0.3 - 0.2 !== 0.1

问题表现

console.log(0.3-0.2);// 输出: 0.09999999999999998console.log(0.3-0.2===0.1);// 输出: false

原因分析

JavaScript使用二进制浮点数表示所有数字。然而,像0.1、0.2和0.3这样的十进制小数在二进制中是无限循环的,无法被精确表示,内存中不可能无限存储,会进行截取,接下来可以看一下这些数据在内存。当进行减法运算时,这种不精确性会导致累积误差,使得结果与预期不符。

0.3.toString(2)// 存储的二进制 '0.010011001100110011001100110011001100110011001100110011'0.3.toPrecision(20)// toPrecision 用于将数字转换为字符串,并根据指定的有效数字位数进行格式化,很显然0.3实际存储的要小于0.3// '0.29999999999999998890'0.1.toString(2)// 存储的二进制 '0.0001100110011001100110011001100110011001100110011001101'0.1.toPrecision(20)// 小于0.1 '0.10000000000000000555'

解决方案

1. 使用整数运算

对于涉及货币或其他需要精确计算的场景,可以将数值转换为整数进行运算:

// 将数值乘以100转换为整数consta=30;// 代表0.30constb=20;// 代表0.20constresult=(a-b)/100;// 0.10console.log(result===0.1);// true
2. 四舍五入到固定小数位

通过四舍五入来消除微小误差:

constresult=Math.round((0.3-0.2)*100)/100;console.log(result===0.1);// true
3. 使用第三方库

对于复杂的十进制运算,可以使用专门的库如decimal.js或big.js:

// 使用decimal.jsconstDecimal=require('decimal.js');constresult=newDecimal(0.3).minus(newDecimal(0.2)).equals(newDecimal(0.1));console.log(result);// true

问题二:2.55.toFixed(1) 是 2.5 而不是 2.6

问题表现

console.log(1.55.toFixed(1));// 输出: "1.6"console.log(2.55.toFixed(1));// 输出: "2.5"

原因分析

toFixed()方法使用银行家舍入规则(四舍六入五成双),并且由于浮点数精度问题,2.55在内部可能被存储为略小于2.55的值,导致向下舍入。

解决方案

1. 自定义舍入函数

实现一个更符合直觉的舍入函数:

functioncustomRound(num,digits){constfactor=Math.pow(10,digits);return(Math.round(num*factor)/factor).toFixed(digits);}console.log(customRound(2.55,1));// 2.6
2. 添加微小增量

在调用toFixed之前给数字加上一个极小的值:

constnum=2.55;console.log((num+Number.EPSILON).toFixed(1));// "2.6"
3. 使用Intl.NumberFormat

利用国际化API进行格式化:

constformatter=newIntl.NumberFormat('en-US',{minimumFractionDigits:1,maximumFractionDigits:1});console.log(formatter.format(2.55));// "2.6"
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/12 12:10:30

Automa模板市场:让每个用户都能安全享受社区智慧

Automa模板市场:让每个用户都能安全享受社区智慧 【免费下载链接】automa A browser extension for automating your browser by connecting blocks 项目地址: https://gitcode.com/gh_mirrors/au/automa 你是否曾经面对这样的困境:每天重复填写相…

作者头像 李华
网站建设 2026/8/13 3:53:33

Citra模拟器完整教程:3步在电脑畅玩3DS游戏

Citra模拟器完整教程:3步在电脑畅玩3DS游戏 【免费下载链接】citra 项目地址: https://gitcode.com/GitHub_Trending/ci/citra 想要在个人电脑上重温任天堂3DS的经典游戏吗?Citra开源模拟器让这个愿望轻松实现。作为功能强大的3DS游戏模拟解决方…

作者头像 李华
网站建设 2026/8/12 12:04:17

Step-Audio 2 mini:2025开源语音模型如何重塑企业交互新范式

导语 【免费下载链接】Step-Audio-2-mini 项目地址: https://ai.gitcode.com/hf_mirrors/stepfun-ai/Step-Audio-2-mini 2025年开源语音大模型Step-Audio 2 mini通过低延迟、高精度、多场景适配及开源生态,推动企业语音交互从工具向战略级服务升级&#xff…

作者头像 李华
网站建设 2026/8/14 1:52:48

13、BPF 流量控制分类器详解

BPF 流量控制分类器详解 1. 流量控制概述 流量控制(Traffic Control)是内核数据包调度子系统架构,由机制和排队系统组成,可决定数据包的流动方式和接收情况。其常见用例包括: - 对特定类型的数据包进行优先级排序。 - 丢弃特定类型的数据包。 - 带宽分配。 当需要在…

作者头像 李华
网站建设 2026/8/13 18:43:46

14、快速数据路径(XDP):原理、模式与应用指南

快速数据路径(XDP):原理、模式与应用指南 1. 快速数据路径(XDP)简介 快速数据路径(XDP)是 Linux 网络数据路径中一种安全、可编程且高性能的内核集成数据包处理器。当网络接口卡(NIC)驱动接收到数据包时,它会执行 Berkeley 数据包过滤器(BPF)程序。这使得 XDP 程…

作者头像 李华
网站建设 2026/8/12 21:05:02

3步搞定Snap.svg动画导出:从SVG到视频GIF的完整指南

3步搞定Snap.svg动画导出:从SVG到视频GIF的完整指南 【免费下载链接】Snap.svg The JavaScript library for modern SVG graphics. 项目地址: https://gitcode.com/gh_mirrors/sn/Snap.svg 你是否曾用Snap.svg创建了精美的动画效果,却苦于无法将其…

作者头像 李华