javascript解决小数的加减乘除精度丢失的方案

2023-05-16

原因:js按照2进制来处理小数的加减乘除,在arg1的基础上 将arg2的精度进行扩展或逆扩展匹配,所以会出现如下情况.

javascript(js)的小数点加减乘除问题,是一个js的bug如0.3*1 = 0.2999999999等,下面列出可以完美求出相应精度的四种js算法

function accDiv(arg1,arg2){ 
 var t1=0,t2=0,r1,r2; 
 try{t1=arg1.toString().split(".")[1].length}catch(e){} 
 try{t2=arg2.toString().split(".")[1].length}catch(e){} 
 with(Math){ 
 r1=Number(arg1.toString().replace(".","")) 
 r2=Number(arg2.toString().replace(".","")) 
 return accMul((r1/r2),pow(10,t2-t1)); 
 } 
 } 
 //乘法 
 function accMul(arg1,arg2) 
 { 
 var m=0,s1=arg1.toString(),s2=arg2.toString(); 
 try{m+=s1.split(".")[1].length}catch(e){} 
 try{m+=s2.split(".")[1].length}catch(e){} 
 return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m) 
 } 
//加法 
function accAdd(arg1,arg2){ 
var r1,r2,m; 
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} 
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} 
m=Math.pow(10,Math.max(r1,r2)) 
return (arg1*m+arg2*m)/m 
} 
//减法 
function Subtr(arg1,arg2){ 
 var r1,r2,m,n; 
 try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} 
 try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} 
 m=Math.pow(10,Math.max(r1,r2)); 
 n=(r1>=r2)?r1:r2; 
 return ((arg1*m-arg2*m)/m).toFixed(n); 
} 

下面我们来具体分析洗在JavaScript中关于数字精度的丢失问题

一、JS数字精度丢失的一些典型问题

1. 两个简单的浮点数相加

1

0.1 + 0.2 != 0.3 // true

Firebug

这真不是 Firebug 的问题,可以用alert试试 (哈哈开玩笑)。

看看Java的运算结果

再看看Python

2. 大整数运算

1

9999999999999999 == 10000000000000001 // ?

Firebug

16位和17位数竟然相等,没天理啊。

又如

1

2

var x = 9007199254740992

x + 1 == x // ?

看结果

三观又被颠覆了。

3. toFixed 不会四舍五入(Chrome)

1

1.335.toFixed(2) // 1.33

Firebug

线上曾经发生过 Chrome 中价格和其它浏览器不一致,正是因为 toFixed 兼容性问题导致

二、JS 数字丢失精度的原因

计算机的二进制实现和位数限制有些数无法有限表示。就像一些无理数不能有限表示,如 圆周率 3.1415926...,1.3333... 等。JS 遵循 IEEE 754 规范,采用双精度存储(double precision),占用 64 bit。如图

意义

  1. 1位用来表示符号位
  2. 11位用来表示指数
  3. 52位表示尾数

浮点数,比如

1

2

0.1 >> 0.0001 1001 1001 1001…(1001无限循环)

0.2 >> 0.0011 0011 0011 0011…(0011无限循环)

此时只能模仿十进制进行四舍五入了,但是二进制只有 0 和 1 两个,于是变为 0 舍 1 入。这即是计算机中部分浮点数运算时出现误差,丢失精度的根本原因。

大整数的精度丢失和浮点数本质上是一样的,尾数位最大是 52 位,因此 JS 中能精准表示的最大整数是 Math.pow(2, 53),十进制即 9007199254740992。

大于 9007199254740992 的可能会丢失精度

1

2

3

9007199254740992   >> 10000000000000...000 // 共计 53 个 0

9007199254740992 + 1 >> 10000000000000...001 // 中间 52 个 0

9007199254740992 + 2 >> 10000000000000...010 // 中间 51 个 0

实际上

1

2

3

4

9007199254740992 + 1 // 丢失

9007199254740992 + 2 // 未丢失

9007199254740992 + 3 // 丢失

9007199254740992 + 4 // 未丢失

结果如图

以上,可以知道看似有穷的数字, 在计算机的二进制表示里却是无穷的,由于存储位数限制因此存在“舍去”,精度丢失就发生了。

想了解更深入的分析可以看这篇论文(又长又臭):What Every Computer Scientist Should Know About Floating-Point Arithmetic

三、解决方案

对于整数,前端出现问题的几率可能比较低,毕竟很少有业务需要需要用到超大整数,只要运算结果不超过 Math.pow(2, 53) 就不会丢失精度。

对于小数,前端出现问题的几率还是很多的,尤其在一些电商网站涉及到金额等数据。解决方式:把小数放到位整数(乘倍数),再缩小回原来倍数(除倍数)

1

2

// 0.1 + 0.2

(0.1*10 + 0.2*10) / 10 == 0.3 // true

以下是我写了一个对象,对小数的加减乘除运算丢失精度做了屏蔽。当然转换后的整数依然不能超过 9007199254740992。

/**
 * floatObj 包含加减乘除四个方法,能确保浮点数运算不丢失精度
 *
 * 我们知道计算机编程语言里浮点数计算会存在精度丢失问题(或称舍入误差),其根本原因是二进制和实现位数限制有些数无法有限表示
 * 以下是十进制小数对应的二进制表示
 *      0.1 >> 0.0001 1001 1001 1001…(1001无限循环)
 *      0.2 >> 0.0011 0011 0011 0011…(0011无限循环)
 * 计算机里每种数据类型的存储是一个有限宽度,比如 JavaScript 使用 64 位存储数字类型,因此超出的会舍去。舍去的部分就是精度丢失的部分。
 *
 * ** method **
 *  add / subtract / multiply /divide
 *
 * ** explame **
 *  0.1 + 0.2 == 0.30000000000000004 (多了 0.00000000000004)
 *  0.2 + 0.4 == 0.6000000000000001  (多了 0.0000000000001)
 *  19.9 * 100 == 1989.9999999999998 (少了 0.0000000000002)
 *
 * floatObj.add(0.1, 0.2) >> 0.3
 * floatObj.multiply(19.9, 100) >> 1990
 *
 */
var floatObj = function() {
    
    /*
     * 判断obj是否为一个整数
     */
    function isInteger(obj) {
        return Math.floor(obj) === obj
    }
    
    /*
     * 将一个浮点数转成整数,返回整数和倍数。如 3.14 >> 314,倍数是 100
     * @param floatNum {number} 小数
     * @return {object}
     *   {times:100, num: 314}
     */
    function toInteger(floatNum) {
        var ret = {times: 1, num: 0}
        if (isInteger(floatNum)) {
            ret.num = floatNum
            return ret
        }
        var strfi  = floatNum + ''
        var dotPos = strfi.indexOf('.')
        var len    = strfi.substr(dotPos+1).length
        var times  = Math.pow(10, len)
        var intNum = parseInt(floatNum * times + 0.5, 10)
        ret.times  = times
        ret.num    = intNum
        return ret
    }
    
    /*
     * 核心方法,实现加减乘除运算,确保不丢失精度
     * 思路:把小数放大为整数(乘),进行算术运算,再缩小为小数(除)
     *
     * @param a {number} 运算数1
     * @param b {number} 运算数2
     * @param digits {number} 精度,保留的小数点数,比如 2, 即保留为两位小数
     * @param op {string} 运算类型,有加减乘除(add/subtract/multiply/divide)
     *
     */
    function operation(a, b, digits, op) {
        var o1 = toInteger(a)
        var o2 = toInteger(b)
        var n1 = o1.num
        var n2 = o2.num
        var t1 = o1.times
        var t2 = o2.times
        var max = t1 > t2 ? t1 : t2
        var result = null
        switch (op) {
            case 'add':
                if (t1 === t2) { // 两个小数位数相同
                    result = n1 + n2
                } else if (t1 > t2) { // o1 小数位 大于 o2
                    result = n1 + n2 * (t1 / t2)
                } else { // o1 小数位 小于 o2
                    result = n1 * (t2 / t1) + n2
                }
                return result / max
            case 'subtract':
                if (t1 === t2) {
                    result = n1 - n2
                } else if (t1 > t2) {
                    result = n1 - n2 * (t1 / t2)
                } else {
                    result = n1 * (t2 / t1) - n2
                }
                return result / max
            case 'multiply':
                result = (n1 * n2) / (t1 * t2)
                return result
            case 'divide':
                result = (n1 / n2) * (t2 / t1)
                return result
        }
    }
    
    // 加减乘除的四个接口
    function add(a, b, digits) {
        return operation(a, b, digits, 'add')
    }
    function subtract(a, b, digits) {
        return operation(a, b, digits, 'subtract')
    }
    function multiply(a, b, digits) {
        return operation(a, b, digits, 'multiply')
    }
    function divide(a, b, digits) {
        return operation(a, b, digits, 'divide')
    }
    
    // exports
    return {
        add: add,
        subtract: subtract,
        multiply: multiply,
        divide: divide
    }
}();

toFixed的修复如下

1

2

3

4

5

6

7

// toFixed 修复

function toFixed(num, s) {

    var times = Math.pow(10, s)

    var des = num * times + 0.5

    des = parseInt(des, 10) / times

    return des + ''

}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

javascript解决小数的加减乘除精度丢失的方案 的相关文章

  • 使用 xhr-mock 测试 AJAX 函数失败

    我正在尝试从我的中测试以下功能network js export function post data return new Promise function resolve reject need to log to the root v
  • 音频标签的 Html5 惰性“onplay”事件处理程序?

    使用新的 Html5 音频标签 onplay 事件似乎仅在第一次播放音频时触发 在此示例中 当单击 播放 时 音频将开始并显示一个显示 正在播放 的警报弹出窗口 当音频结束并再次单击 播放 时 音频会再次开始 但不会触发警报 我在这里错过了
  • 选择多选选项最多 2 个

    我正在对不同主题使用多重选择 我想将选择限制为最多 2 个 并且如果用户取消选择 则以相同的方式禁用其他选项 同样 该选项必须可供用户使用
  • 元素存在之前的html5音频绑定时间更新

    我试图从音频标签绑定 timeupdate 事件 该标签尚不存在 我习惯这样做 body on click selector function e 我用音频标签尝试了这个 body on timeupdate audioPlayerJS a
  • 在 ES5 中创建自定义元素 v1,而不是 ES6

    现在 如果您严格遵循自定义元素规范 v1 https html spec whatwg org multipage custom elements html custom elements 无法在不支持类的浏览器中使用自定义元素 有没有办法
  • Webpack将js/css文件内容直接注入到index.html

    我有这样的代码
  • 如何将 scala 列表转换为 javascript 数组?

    有更简单的方法吗 document ready function var jsArray if scalaList null for id lt scalaList jsArray push id 很简单 如下所示 import play
  • 无法使用 Jade 模板包含相对路径文件

    当我尝试将文件包含在同一文件夹中时 收到以下错误 the filename option is required to use include with relative paths 有两个文件 索引 jade 项目列表 jade cont
  • 按 Enter 键提交消息?

    我正在开发一个基于本教程使用 Meteor 构建的聊天应用程序 http code tutsplus com tutorials real time messaging for meteor with meteor streams net
  • 如何对像 Excel Pivot 这样两个键必须匹配的数组求和?

    我尝试对 Datum 和 Material 必须匹配的所有 Menge 和 Fehler 值求和 结果应类似于 Excel 数据透视表 到目前为止 这是我的代码 但我不知道如何添加也必须匹配的第二个键 Material 我希望你能理解我试图
  • 当key未知时如何获取js对象中的属性值

    我有一个对象数组 a 81 25 p 81 25 81 26 p 81 26 我想循环遍历数组并获取值p在每个元素中 for var key in a console log a key outputs 81 25 Object How d
  • 如何将数据从 JavaScript 发送到 Python

    我正在 jinja2 和 python2 7 上使用 GAE 进行 Web 开发 我可以从Python获取数据 但我无法将数据从 JavaScript 发送到 Python 这是 JavaScript 代码 function toSave
  • 如何将 vue3-openlayers 插件添加到 nuxt

    我有以下 main ts 文件Vue3 https v3 vuejs org import createApp from vue import App from App vue How to do this in nuxt3 import
  • React Native 中 fontAwesome 图标的圆形轮廓

    我想使用 fontAwesome 图标 使其位于圆圈的中间 我想将它用作一个图标项 我读到我们可以将它与圆形图标一起使用并将其放置在其中 但我无法使其工作 import IconFA from react native vector ico
  • Nodejs 异步 Promise 队列

    我需要使用速率受限的 API 例如 我一秒钟只能进行 10 个 API 调用 因此我需要等待当前秒结束才能进行另一个 API 调用 为了实现这一目标 我想创建一个可以自行管理的异步队列 它的主要功能是让我向队列添加一个新的 Promise
  • JavaScript 中的安全数据

    我必须为 Web 测试创建生成器 使用 HTML 和 JavaScript 测试必须离线和在线进行 正确答案和分数评估必须是生成的测试的一部分 最终用户的分数仅发送到服务器 无法在服务器上进行评估 并且服务器对问题一无所知 它只保存最终分数
  • 跟踪预防阻止了对 https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js 存储的访问

    大约一年半前 我使用 OfficeJS API 编写了一个 Excel 加载项 它一直工作到大约两周前 Excel 似乎已经进行了更新 现在我可以右键单击任务窗格并查看开发工具 而以前我无法做到这一点 并且必须运行外部 MS Edge 开发
  • 反转比例函数

    这对我来说很有趣 看下面的D3代码 var scale d3 scale linear domain 100 500 range 10 350 scale 100 Returns 10 scale 300 Returns 180 scale
  • 数组长度未定义[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我试图按如
  • 如何在 JavaScript 中将日期时间微格式转换为本地时间?

    我有一个页面当前正在使用日期时间微格式 http microformats org wiki datetime design pattern显示时间戳 但我只显示我自己的时区的人类可读时间

随机推荐

  • FFmpeg学习(一)-- ffmpeg 播放器的基础

    FFmpeg学习 xff08 一 xff09 FFmpeg学习 xff08 二 xff09 FFmpeg学习 xff08 三 xff09 FFmpeg的的是一套可以用来记录 xff0c 转换数字音频 xff0c 视频 xff0c 并能将其转
  • ios Instruments之Allocations

    文章目录 一 span class hljs function Allocations 监测内存分配 span 1 简介 2 如何使用 一 Allocations 1 简介 性能优化中使用Instruments Allocations工具进
  • linux-Centos-7-64位:4、 mysql安装

    从最新版本的Linux系统开始 xff0c 默认的是 Mariadb而不是MySQL xff01 这里依旧以mysql为例进行展示 1 先检查系统是否装有mysql rpm qa span class hljs string style c
  • Win10 WSL忘记用户密码,重置密码

    win10中WSL登录是不用密码的 xff0c 当需要使用用户权限但是忘记密码的时候 xff0c 可以使用如下办法以root身份登录WSL并重置密码 1 以管理员身份打开 PowerShell 2 输入命令 wsl exe user roo
  • 51单片机定时时间的计算

    单片机根据计时 计数模式的不同 xff0c 来进行计算 M1 M0 工作模式 说明 0 0 0 13位计时计数器 xff08 8192 xff09 0 1 1 16位计时计数器 xff08 65536 xff09 1 0 2 8位计时计数器
  • Go语言之禅

    本文翻译自Go社区知名Gopher和博主Dave Cheney的文章 The Zen of Go 本文来自我在GopherCon Israel 2020上的演讲 文章很长 如果您希望阅读精简版 xff0c 请移步到the zen of go
  • UIScrollView及其子类停止滚动的监测

    作为iOS中最重要的滑动控件 UIScrollView居然没有停止滚动的Delegate方法 这有点蛋疼 但是我们可以根据滚动状态来判断是否滚动 span class hljs preprocessor pragma mark scroll
  • PCL库中Marching Cubes(移动立方体)算法的解析

    PCL库中Marching Cubes xff08 移动立方体 xff09 算法解析 1 Marching Cubes算法的原理这里不再赘述 xff0c 不懂的话 xff0c 提供一下文献资源 xff1a 链接 xff1a MARCHING
  • ubuntu18.04安装cuda-10.0和cudnn-7.4.2

    安装cuda 10 0 1 gcc 版本 Ubuntu18 04默认gcc g 43 43 7 3版本 xff0c 如果安装cuda 9并不支持 gcc g 43 43 7 xff0c 所以先降级至6或6以下 我自己的gcc是7 5 0 安
  • Ubuntu安装anaconda3后找不到conda命令

    Ubuntu安装anaconda3后找不到conda命令的原因是没有把anaconda3添加到路径 xff0c 类似于Windows中添加到环境变量 xff0c 所以找不到命令 解决方法是在终端中运行一下命令 xff1a echo 39 e
  • uCharts Y轴格式化

    官方文档 uCharts跨平台图表库 1 Y轴格式化用法 xff1a yAxis data calibration true position 39 left 39 title 39 折线 39 titleFontSize 12 forma
  • C#/.NET Winform 界面库UI推荐

    以下是C CSkin界面库的官方板块 xff1a http bbs cskin net thread 622 1 1 html 几款开源的Windows界面库 https blog csdn net blade2001 article de
  • layui中实现按钮点击事件

    首先 xff0c 小编要告诉大家一个残酷的现实 xff0c 那就是小编没有找到layui对点击事件的支持 这里的点击事件是指单纯的点击事件 xff0c 而不是提交事件 xff0c 或者是数据表格中内嵌的button xff0c 对于这两者
  • C# devexpress gridcontrol 分页 控件制作

    这个小小的功能实现起来还是有一点点复杂 分页单独一个usercontrol 出来 导致查询换页 与gridcontrol页面分离 一般通过换页事件通知girdcontrol 做出查询 查询来说有时是查询所有 有时是查询一个月 或者别的时间
  • SQL Server 创建索引(CREATE NONCLUSTERED INDEX )

    索引的简介 xff1a 索引分为聚集索引和非聚集索引 xff0c 数据库中的索引类似于一本书的目录 xff0c 在一本书中通过目录可以快速找到你想要的信息 xff0c 而不需要读完全书 索引主要目的是提高了SQL Server系统的性能 x
  • .NET Core/.NET5/.NET6 开源项目汇总:(权限)管理系统

    前言 企业管理系统一般包含后台管理UI 组织机构管理 权限管理 日志 数据访问 表单 工作流等常用必备功能 下面收集的几款优秀开源的管理系统 xff0c 值得大家入门学习 如有新的优秀项目 xff0c 我会不断补充 开源项目是众多组织与个人
  • Nginx配置指令(一)

    1 daemon 语法 xff1a daemon on off 默认 xff1a on 如果使用daemon off xff0c nginx将会运行在前台 生产远景不建议如此使用 xff0c 虽然可以 2 env 语法 xff1a env
  • SQL将Json字符串转为表格

    支持复杂结构的使用 使用Parent ID来对应Object ID产生关系就好 实现对Json数据的从文字到表变量的转换 例 34 FieldName 34 34 DateKey 34 34 Title 34 34 汇总后日期 34 34
  • JavaScript实现动态添加的元素添加点击事件

    在页面开发过程中常常遇到需要动态添加元素 xff0c 然后给这一元素绑定相关事件的情况 xff0c 这种情况下一般需要给元素加上相关属性 xff0c 然后写这些元素的事件函数即可 动态添加的元素怎么绑定事件呢 xff1f 原生JavaScr
  • javascript解决小数的加减乘除精度丢失的方案

    原因 js按照2进制来处理小数的加减乘除 在arg1的基础上 将arg2的精度进行扩展或逆扩展匹配 所以会出现如下情况 javascript js 的小数点加减乘除问题 xff0c 是一个js的bug如0 3 1 61 0 29999999