JavaScript 精度问题以及解决方案

阅读完本文可以了解到 0.1+0.2 为什么等于 0.30000000000000004 以及 JavaScript 中最大安全数是如何来的。

十进制小数转为二进制小数方法

拿 173.8125 举例如何将之转化为二进制小数。

① 针对整数部分 173,采取 除2取余,逆序排列。

173 / 2 = 86 ... 186 / 2 = 43 ... 043 / 2 = 21 ... 1   ↑21 / 2 = 10 ... 1   | 逆序排列10 / 2 = 5 ... 0    |5 / 2 = 2 ... 1     |2 / 2 = 1 ... 01 / 2 = 0 ... 1

得整数部分的二进制为 {{10101101:0}}。

② 针对小数部分 0.8125,采用 乘2取整,顺序排列。

0.8125 * 2 = 1.625  |0.625 * 2 = 1.25    | 顺序排列0.25 * 2 = 0.5      |0.5 * 2 = 1         ↓

得小数部分的二进制为 1101。

③ 将前面两部的结果相加,结果为 {{10101101:0}}.1101。

小心,二进制小数丢失了精度!

根据上面的知识,将十进制小数 0.1 转为二进制:

0.1 * 2 = 0.20.2 * 2 = 0.4 // 注意这里0.4 * 2 = 0.80.8 * 2 = 1.60.6 * 2 = 1.20.2 * 2 = 0.4 // 注意这里,循环开始0.4 * 2 = 0.80.8 * 2 = 1.60.6 * 2 = 1.2...

可以发现有限十进制小数 0.1 却转化成了无限二进制小数 0.000{{11001100:0}}...,可以看到精度在转化过程中丢失了!

顺便给大家推荐一个裙,它的前面是 537,中间是631,最后就是 707。想要学习前端的小伙伴可以加入我们一起学习,互相帮助。群里每天晚上都有大神免费直播上课,如果不是想学习的小伙伴就不要加啦。

能被转化为有限二进制小数的十进制小数的最后一位必然以 5 结尾(因为只有 0.5 * 2 才能变为整数)。所以十进制中一位小数 0.1~0.9 当中除了 0.5 之外的值在转化成二进制的过程中都丢失了精度。

推导 0.1 + 0.2 为何等于 0.30000000000000004

在 JavaScript 中所有数值都以 IEEE-754 标准的 64bit 双精度浮点数进行存储的。先来了解下 IEEE-754 标准下的双精度浮点数。

这幅图很关键,可以从图中看到 IEEE-754 标准下双精度浮点数由三部分组成,分别如下:

sign(符号): 占 1 bit,表示正负。

exponent(指数): 占 11 bit,表示范围。

mantissa(尾数): 占 52 bit,表示精度,多出的末尾如果是 1 需要进位。

推荐阅读 JavaScript 浮点数陷阱及解法,阅读完该文后可以了解到以下公式的由来。

精度位总共是 53 bit,因为用科学计数法表示,所以首位固定的 1 就没有占用空间。即公式中 (M + 1) 里的 1。另外公式里的 1023 是 2^11 的一半。小于 1023 的用来表示小数,大于 1023 的用来表示整数。

指数可以控制到 2^1024 - 1,而精度最大只达到 2^53 - 1,两者相比可以得出 JavaScript 实际可以精确表示的数字其实很少。

0.1 转化为二进制为 0.000{{1100110011:0}}...,用科学计数法表示为 1.{{100110011:0}}...x2^(-4),根据上述公式, S 为 0(1 bit), E 为 -4+1023,对应的二进制为 0{{1111111011:0}}(11 bit), M 为1001100110011001100110011001100110011001100110011010(52 bit,另外注意末尾的进位), 0.1 的存储示意图如下:

同理, 0.2 转化为二进制为 0.00{{1100110011:0}}...,用科学计数法表示为 1.{{100110011:0}}...x2^(-3),根据上述公式, E 为 -3+1023,对应的二进制为 0{{1111111100:0}}, M为 1001100110011001100110011001100110011001100110011010, 0.2 的存储示意图如下:

0.1+0.2 即 2^(-4) x 1.1001100110011001100110011001100110011001100110011010 与 2^(-3) x 1.1001100110011001100110011001100110011001100110011010 之和

// 计算过程0.000110011001100110011001100110011001100110011001100110100.0011001100110011001100110011001100110011001100110011010// 相加得0.01001100110011001100110011001100110011001100110011001110

0.01001100110011001100110011001100110011001100110011001110 转化为十进制就是 0.30000000000000004。验证完成!

JavaScript 的最大安全数是如何来的

根据双精度浮点数的构成,精度位数是 53bit。安全数的意思是在 -2^53~2^53 内的整数(不包括边界)与唯一的双精度浮点数互相对应。举个例子比较好理解:

Math.pow(2, 53) === Math.pow(2, 53) + 1 // true

Math.pow(2,53) 竟然与 Math.pow(2,53)+1 相等!这是因为 Math.pow(2, 53) + 1 已经超过了尾数的精度限制(53 bit),在这个例子中 Math.pow(2,53) 和 Math.pow(2,53)+1 对应了同一个双精度浮点数。所以 Math.pow(2,53) 就不是安全数了。

最大的安全数为 Math.pow(2,53)-1,即 9007199254740991。

业务中碰到的精度问题以及解决方案

了解 JavaScript 精度问题对我们业务有什么帮助呢?举个业务场景:比如有个订单号后端 Java 同学定义的是 long 类型,但是当这个订单号转换成 JavaScript 的 Number 类型时候精度会丢失了,那没有以上知识铺垫那就理解不了精度为什么会丢失。

顺便给大家推荐一个裙,它的前面是 537,中间是631,最后就是 707。想要学习前端的小伙伴可以加入我们一起学习,互相帮助。群里每天晚上都有大神免费直播上课,如果不是想学习的小伙伴就不要加啦。

解决方案大致有以下几种:

针对大数的整数可以考虑使用 bigint 类型(目前在 stage 3 阶段)。

使用 bigNumber,它的思想是转化成 string 进行处理,这种方式对性能有一定影响。

可以考虑使用 long.js,它的思想是将 long 类型的值转化成两个 32 位的双精度类型的值。

针对小数可以考虑 JavaScript 浮点数陷阱及解法 里面提到的方案。

来源:牧云云

https://segmentfault.com/a/119000001658698

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,192评论 6 511
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,858评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,517评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,148评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,162评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,905评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,537评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,439评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,956评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,083评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,218评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,899评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,565评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,093评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,201评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,539评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,215评论 2 358

推荐阅读更多精彩内容