JS魔法堂:彻底理解0.1 + 0.2 === 0.30000000000000004的背后

简介:

Brief                              

  一天有个朋友问我“JS中计算0.7 * 180怎么会等于125.99999999998,坑也太多了吧!”那时我猜测是二进制表示数值时发生round-off error所导致,但并不清楚具体是如何导致,并且有什么方法去规避。于是用了3周时间静下心把这个问题搞懂,在学习的过程中还发现不仅0.7 * 180==125.99999999998,还有以下的坑

  1. 著名的 0.1 + 0.2 === 0.30000000000000004

  2. 1000000000000000128 === 1000000000000000129

 

IEEE 754 Floating-point                  

  众所周知JS仅有Number这个数值类型,而Number采用的时IEEE 754 64位双精度浮点数编码。而浮点数表示方式具有以下特点:

  1. 浮点数可表示的值范围比同等位数的整数表示方式的值范围要大得多;

  2. 浮点数无法精确表示其值范围内的所有数值,而有符号和无符号整数则是精确表示其值范围内的每个数值;

  3. 浮点数只能精确表示m*2e的数值;

  4. 当biased-exponent为2e-1-1时,浮点数能精确表示该范围内的各整数值;

  5. 当biased-exponent不为2e-1-1时,浮点数不能精确表示该范围内的各整数值。

  由于部分数值无法精确表示(存储),于是在运算统计后偏差会愈见明显。

 

  想了解更多浮点数的知识可参考以下文章:

  基础野:细说原码、反码和补码(http://www.cnblogs.com/fsjohnhuang/p/5060242.html)

  基础野:细说无符号整数(http://www.cnblogs.com/fsjohnhuang/p/5078290.html)

  基础野:细说有符号整数(http://www.cnblogs.com/fsjohnhuang/p/5082829.html)

  基础野:细说浮点数(http://www.cnblogs.com/fsjohnhuang/p/5109766.html)

 

Why 0.1 + 0.2 === 0.30000000000000004 ?       

  在浮点数运算中产生误差值的示例中,最出名应该是0.1 + 0.2 === 0.30000000000000004了,到底有多有名?看看这个网站就知道了http://0.30000000000000004.com/。也就是说不仅是JavaScript会产生这种问题,只要是采用IEEE 754 Floating-point的浮点数编码方式来表示浮点数时,则会产生这类问题。下面我们来分析整个运算过程。

  1. 0.1 的二进制表示为 1.1001100110011001100110011001100110011001100110011001 1(0011)+ * 2^-4;

  2. 当64bit的存储空间无法存储完整的无限循环小数,而IEEE 754 Floating-point采用round to nearest, tie to even的舍入模式,因此0.1实际存储时的位模式是0-01111111011-1001100110011001100110011001100110011001100110011010;

  3. 0.2 的二进制表示为 1.1001100110011001100110011001100110011001100110011001 1(0011)+ * 2^-3;

  4. 当64bit的存储空间无法存储完整的无限循环小数,而IEEE 754 Floating-point采用round to nearest, tie to even的舍入模式,因此0.2实际存储时的位模式是0-01111111100-1001100110011001100110011001100110011001100110011010;

  5. 实际存储的位模式作为操作数进行浮点数加法,得到 0-01111111101-0011001100110011001100110011001100110011001100110100。转换为十进制即为0.30000000000000004。

     

Why 0.7 * 180===125.99999999998 ?          

  1. 0.7实际存储时的位模式是0-01111111110-0110011001100110011001100110011001100110011001100110;

  2. 180实际存储时的位模式是0-10000000110-0110100000000000000000000000000000000000000000000000;

  3. 实际存储的位模式作为操作数进行浮点数乘法,得到0-10000000101-1111011111111111111111111111111111111111101010000001。转换为十进制即为125.99999999998。

 

Why 1000000000000000128 === 1000000000000000129 ?      

  1. 1000000000000000128实际存储时的位模式是0-10000111010-1011110000010110110101100111010011101100100000000001;

  2. 1000000000000000129实际存储时的位模式是0-10000111010-1011110000010110110101100111010011101100100000000001;

  3. 因此1000000000000000128和1000000000000000129的实际存储的位模式是一样的。

 

Solution                            

  到这里我们都理解只要采取IEEE 754 FP的浮点数编码的语言均会出现上述问题,只是它们的标准类库已经为我们提供了解决方案而已。而JS呢?显然没有。坏处自然是掉坑了,而好处恰恰也是掉坑了:)

  针对不同的应用需求,我们有不同的实现方式。

  Solution 0x00 - Simple implementation

    对于小数和小整数的简单运算可用如下方式

复制代码
function numAdd(num1/*:String*/, num2/*:String*/) { 
    var baseNum, baseNum1, baseNum2; 
    try { 
        baseNum1 = num1.split(".")[1].length; 
    } catch (e) { 
        baseNum1 = 0; 
    } 
    try { 
        baseNum2 = num2.split(".")[1].length; 
    } catch (e) { 
        baseNum2 = 0;
    } 
    baseNum = Math.pow(10, Math.max(baseNum1, baseNum2)); 
    return (num1 * baseNum + num2 * baseNum) / baseNum; 
};
复制代码

  Solution 0x01 - math.js

     若需要复杂且全面的运算功能那必须上math.js,其内部引用了decimal.jsfraction.js。功能异常强大,用于生产环境上妥妥的!

  Solution 0x02 - D.js

     D.js算是我的练手项目吧,截止本文发表时D.js版本为V0.2.0,仅实现了加、减、乘和整除运算而已,bug是一堆堆的,但至少解决了0.1+0.2的问题了。

复制代码
var sum = D.add(0.1, 0.2)
console.log(sum + '') // 0.3

var product = D.mul("1e-2", "2e-4")
console.log(product + '') // 0.000002

var quotient = D.div(-3, 2)
console.log(quotient + '') // -(1+1/2)
复制代码

解题思路:

    1. 由于仅位于Number.MIN_SAFE_INTEGER和Number.MAX_SAFE_INTEGER间的整数才能被精准地表示,也就是只要保证运算过程的操作数和结果均落在这个阀值内,那么运算结果就是精准无误的;

    2. 问题的关键落在如何将小数和极大数转换或拆分为Number.MIN_SAFE_INTEGER至Number.MAX_SAFE_INTEGER阀值间的数了;

    3. 小数转换为整数,自然就是通过科学计数法表示,并通过右移小数点,减小幂的方式处理;(如0.000123 等价于 123 * 10-6)

    4. 而极大数则需要拆分,拆分的规则是多样的。

        4.1. 按因式拆分:假设对12345进行拆分得到 5 * 2469;

        4.2. 按位拆分:假设以3个数值为一组对12345进行拆分得到345和12,而实际值为12*1000 + 345。

        就我而言,4.1的拆分规则结构不稳定,而且不直观;而4.2的规则直观,且拆分和恢复的公式固定。

    5. 余数由符号位、分子和分母组成,而符号与整数部分一致,因此只需考虑如何表示分子和分母即可。

    6. 无限循环数则仅需考虑如何表示循环数段即可。(如10.2343434则分成10.23 和循环数34和34的权重即可)

得到编码规则后,那就剩下基于指定编码如何实现各种运算的问题了。

    1. 基于上述的数值编码规则如何实现加、减运算呢?

    2. 基于上述的数值编码规则如何实现乘、除运算呢?(其实只要加、减运算解决了,乘除必然可解,就是效率问题而已)

    3. 基于上述的数值编码规则如何实现其它如sin、tan、%等数学运算呢?

另外由于涉及数学运算,那么将作为add、sub、mul和div等入参的变量保持如同数学公式运算数般纯净(Persistent/Immutable Data Structure)是必须的,那是否还要引入immutable.js呢?(D.js现在采用按需生成副本的方式,可预见随着代码量的增加,这种方式会导致整体代码无法维护)

 

Conclusion                           

  依照我的尿性,D.js将采取不定期持续更新的策略(待我理解Persistent/Immutable Data Structure后吧:))。欢迎各位指教!

  尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/5115672.html^_^肥子John

 

Thanks                              

http://es5.github.io

https://github.com/MikeMcl/decimal.js/

http://www.ruanyifeng.com/blog/2010/06/ieee_floating-point_representation.html

http://demon.tw/copy-paste/javascript-precision.html

如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!

分类: JavaScript
1
0
« 上一篇: JS魔法堂:再识Number type
» 下一篇: JS魔法堂:再识Bitwise Operation & Bitwise Shift
posted @ 2016-01-16 14:40 ^_^肥仔John 阅读( 1501) 评论( 2) 编辑 收藏
  
#1楼 2016-01-17 10:20 [水&月]坟  
我觉得科班出身的人都会知道
0.1 + 0.2 === 0.30000000000000004
但是这个问题可能大多数人遇不到,所以能解决的人也很少
  
#2楼 [ 楼主] 2016-01-18 08:51 ^_^肥仔John  
@ [水&月]坟
因为前人都帮我们处理好了,自然很容易停留在“知道”的层面上了。
相关文章
|
应用服务中间件 nginx 数据安全/隐私保护
安装Nginx报错:make: *** 没有规则可以创建“default”需要的目标“build”。 停止。
安装Nginx报错:make: *** 没有规则可以创建“default”需要的目标“build”。 停止。
720 0
|
应用服务中间件 网络安全 nginx
nginx(1.13.7)首次安装出现:【make: *** 没有规则可以创建“default”需要的目标“build” 问题】解决措施
nginx(1.13.7)首次安装出现:【make: *** 没有规则可以创建“default”需要的目标“build” 问题】解决措施
1310 0
kde
|
6天前
|
JSON Linux 数据格式
Docker镜像加速指南:手把手教你配置国内镜像源
配置国内镜像源可大幅提升 Docker 拉取速度,解决访问 Docker Hub 缓慢问题。本文详解 Linux、Docker Desktop 配置方法,并提供测速对比与常见问题解答,附最新可用镜像源列表,助力高效开发部署。
kde
3839 8
|
6天前
|
JavaScript Ubuntu IDE
国内如何安装和使用 Claude Code镜像教程 - Windows 用户篇
国内如何安装和使用 Claude Code镜像教程 - Windows 用户篇
662 1
|
9天前
|
人工智能 定位技术 API
Dify MCP 保姆级教程来了!
大语言模型,例如 DeepSeek,如果不能联网、不能操作外部工具,只能是聊天机器人。除了聊天没什么可做的。
1008 11
|
4天前
|
人工智能 Java Spring
【保姆级图文详解】大模型、Spring AI编程调用大模型
【保姆级图文详解】大模型、Spring AI编程调用大模型
435 7
【保姆级图文详解】大模型、Spring AI编程调用大模型
|
15天前
|
Java Linux Maven
2025年最新版最细致Maven安装与配置指南(任何版本都可以依据本文章配置)
本文详细介绍了Maven的项目管理工具特性、安装步骤和配置方法。主要内容包括: Maven概述:解释Maven作为基于POM的构建工具,具备依赖管理、构建生命周期和仓库管理等功能。 安装步骤: 从官网下载最新版本 解压到指定目录 创建本地仓库文件夹 关键配置: 修改settings.xml文件 配置阿里云和清华大学镜像仓库以加速依赖下载 设置本地仓库路径 附加说明:包含详细的配置示例和截图指导,适用于各种操作系统环境。 本文提供了完整的Maven安装和配置
2025年最新版最细致Maven安装与配置指南(任何版本都可以依据本文章配置)
|
3天前
typora免费版,激活方法,Typora使用教程
Typora是一款简洁高效的Markdown编辑器,支持即时渲染。本教程涵盖安装方法、文件操作、视图控制、格式排版、字体样式及Markdown语法,助你快速上手使用Typora进行高效写作。
694 0
|
10天前
|
数据采集 JSON API
Excel数据治理新思路:引入智能体实现自动纠错【Python+Agent】
本文介绍如何利用智能体与Python代码批量处理Excel中的脏数据,解决人工录入导致的格式混乱、逻辑错误等问题。通过构建具备数据校验、异常标记及自动修正功能的系统,将数小时的人工核查任务缩短至分钟级,大幅提升数据一致性和办公效率。
|
8天前
|
人工智能 大数据 开发者
让AI时代的卓越架构触手可及,阿里云技术解决方案开放免费试用
阿里云推出基于场景的解决方案免费试用活动,新老用户均可领取100点试用点,完成部署还可再领最高100点,相当于一年可获得最高200元云资源。覆盖AI、大数据、互联网应用开发等多个领域,支持热门场景如DeepSeek部署、模型微调等,助力企业和开发者快速验证方案并上云。
334 23
让AI时代的卓越架构触手可及,阿里云技术解决方案开放免费试用