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解决小数的加减乘除精度丢失的方案 的相关文章

  • Sequelize.js 中的自定义或覆盖连接

    我需要使用创建自定义连接条件Sequelize js http sequelizejs com使用 MSSQL 具体来说 我需要加入TableB基于一个COALESCE中的列的值TableA and TableB并最终得到这样的连接条件 L
  • 如何通过aws-sdk(javascript或node)获取s3存储桶大小

    我尝试使用 javascript nodejs aws sdk 查找 获取 s3 存储桶信息 但没有找到这样的 api 如何通过 aws sdk javascript 或 node api 获取 s3 存储桶大小 信息 每天一次向 Clou
  • JavaScript 中的“new”关键字是什么?

    The newJavaScript 中的关键字第一次遇到时可能会很混乱 因为人们倾向于认为 JavaScript 不是面向对象的编程语言 它是什么 它解决什么问题 什么时候合适 什么时候不合适 它做了 5 件事 它创建一个新对象 这个对象的
  • Webpack 缺少 CommonsChunk 和 extract-text-webpack-plugin 模块

    我正在跟进Maxime Fabre 的 Webpack 教程 https blog madewithlove be post webpack your bags 我正在尝试获得一个非常简单的 webpack 包 其中包含 1 个入口点和 2
  • 拖放区缩略图宽度图像大小

    如何更改上传图像的缩略图大小 我在我的javascript中尝试过thumbnailWidth 350 但是这不会增加缩略图大小 而缩略图只是看起来放大了 如何操作图像缩略图大小 HTML section section
  • Google Charts(AreaChart)如何检测缩放变化

    我正在画一个面积图 在覆盖层上有一些标记 我正在使用explorer选项 仅限水平 以便用户放大和缩小 问题是我找不到一种方法来通知缩放更改 以便有机会更新制造商位置 有一个图表范围变化事件 但它不是由 AreaChart 触发的 我尝试检
  • javascript 和 PHP 中的正则表达式有什么区别吗?

    这是在 javascript 中验证电子邮件地址的正则表达式 我不确定是否可以直接在 PHP 中使用它 a z d u00A0 uD7FF uF900 uFDCF uFDF0 uFFEF a z d u00A0 uD7FF uF900 uF
  • Typescript:如何在自定义过滤器中使用角度 $filter

    如何在自定义过滤器中使用 Angular filter 如何注入 filter依赖 module Filters export class CustomFilter public static Factory return function
  • JavaScript:从 JavaScript 调用锚标记的点击事件

    我有一个带有锚标记的页面 在我的 JavaScript 中 我设置HREF锚标记的属性基于一些 if else 条件动态变化 现在我想以编程方式调用锚标记的单击事件 我使用了下面的代码 但没有成功 var proxyImgSrc CostM
  • AngularJS 输入字段未从控制器内的 setTimeout 更新

    我正在使用 AngularJS 支持的页面 并且我需要在只读输入文本字段内显示正在运行的时钟 与data ng model 为了模拟运行的时钟 我使用了 JavaScript 调度程序setTimeout每 1000 毫秒调用一个函数 该函
  • 如何检查元素的内容是否为空,如果是,则在 jquery 中删除该元素

    我目前正在尝试选择某个 div 内没有内容的任何 h2 元素并将其删除 这是我的 html 代码 div class skipToContainer h2 class vidSkipTo Hello h2 h2 class vidSkipT
  • 在 HTML5 中将两个图像合并到一个画布上

    我正在使用 HTML5 canvas 元素 假设我有 2 个 ImageData 对象 我想将它们组合起来放在一张画布上 假设我不关心这些图像如何组合 两个 ImageData 对象具有完全相同的像素数和形状 组合两个图像的最佳方式是什么
  • 无法在渲染器进程中使用 Node.js API

    无法在 Electron 中使用任何与 Electron 或节点相关的操作 未定义获取错误过程 我检查了他们指导添加节点支持的各个地方 但这已经完成了 所以卡在这里 我的主要应用程序代码是 const electron require el
  • ReferenceError 和全局对象

    在浏览器中的 JavaScript 中window是全局对象 这意味着在全局范围内定义的每个变量都是window 那么为什么我会得到这个结果 console log window foo No error logs undefined co
  • 显示班级图片 10 秒

    我有下面给出的代码显示9 boxes 其值如下digital time 还有一个班级box002显示digits相当于随机选择的九个盒子的值 box002 can be dragged to digital time starting wi
  • 父指令属性更改时子指令不会更新

    这是对这两个问题的后续 在父指令和子指令之间传递参数 https stackoverflow com questions 42814530 pass argument between parent and child directives
  • 数字和小数的输入掩码

    在测试我的程序后 我发现了以下错误 我在 sqlserver 中的表包含 价格数字 6 2 我的程序的用户输入价格 555 00 就很好了 但是当他输入 555555 时 这是错误的 所以我需要指定掩码 其中尾数是可选的 0 到 999 小
  • Angular 2访问组件内的ng-内容

    我怎样才能访问 content 来自组件类本身的组件 我想做这样的事情
  • 在 JSP 或 Javascript 中清除浏览器缓存中的图像

    我正在为一所大学开发JSP Web 应用程序 用户页面中显示人员图片 用户注销后如何从网络浏览器缓存中清除这张图片 使用 JSP 或 JavaScript 那是不可能的 最好的选择是完全禁用相关资源的缓存 创建一个filter https
  • NodeJS:如何获取服务器的端口?

    您经常会看到 Node 的示例 hello world 代码 它创建一个 Http Server 开始侦听端口 然后执行以下操作 console log Server is listening on port 8000 但理想情况下你会想要

随机推荐

  • 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