JS小数运算出现多为小数问题的解决方法


Posted in Javascript onJune 02, 2016

写在前面的话:

今天帮同事解决了一个问题,就是小数相乘出现很多位小数的问题;这个问题自己以前也遇到过,现在特意来总结一下;

Number类型:

Number类型是ECMAScript中最常用和最令人关注的类型了;这种类型使用IEEE754格式来表示整数和浮点数值(浮点数值在某些语言中也被成为双精度数值),为支持各种数据类型,ECMA-262定义了不同的数值面量格式。

十进制:
var intNum=10; //整数

八进制:
var octalNum1=070; //八进制的56
var octalNum2=079; //无效的八进制数值-解析为79

八进制字面量在严格模式下是无效的;

十六进制:
var hexNum1=0xA; //10
切记:在进行运算的时候,所有以八进制和十六进制表示的数值都最终被转换成十进制;
为什么操作小数会出现误差?
浮点数值的最高进度是17位小数,但在进行运算的时候其精确度却远远不如整数;整数在进行运算的时候都会转成10进制; 而Java和JavaScript中计算小数运算时,都会先将十进制的小数换算到对应的二进制,一部分小数并不能完整的换算为二进制,这里就出现了第一次的误差。待小数都换算为二进制后,再进行二进制间的运算,得到二进制结果。然后再将二进制结果换算为十进制,这里通常会出现第二次的误差。
所以(0.1+0.2)!=03

解决方式:

程序代码
除法函数,用来得到精确的除法结果
说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。
调用:accDiv(arg1,arg2)
返回值:arg1除以arg2的精确结果

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 (r1/r2)*pow(10,t2-t1);
}
}

给Number类型增加一个div方法,调用起来更加方便。

Number.prototype.div = function (arg){ 
return accDiv(this, arg); 
}

乘法函数,用来得到精确的乘法结果
说明:javascript的乘法结果会有误差,在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。
调用:accMul(arg1,arg2)
返回值:arg1乘以arg2的精确结果

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
)}

给Number类型增加一个mul方法,调用起来更加方便。

Number.prototype.mul = function (arg){ 
return accMul(arg, this);
}

加法函数,用来得到精确的加法结果
说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。
调用:accAdd(arg1,arg2)
返回值:arg1加上arg2的精确结果

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
}

给Number类型增加一个add方法,调用起来更加方便。

Number.prototype.add = function (arg){ 
return accAdd(arg,this);
}

在你要用的地方包含这些函数,然后调用它来计算就可以了。

比如你要计算:7*0.8 ,则改成 (7).mul(8)

其它运算类似,就可以得到比较精确的结果。
解决方式二:
比较常用的办法,toFixed(),toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。在我们计算的结果后面加上这个方法就OK了;但是对精度会有一丝影响,如果精度要求不高的话推荐使用;

Javascript 相关文章推荐
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
easyui validatebox验证
Apr 29 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
Javascript动画效果(1)
Oct 11 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
js中的面向对象入门
Mar 06 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
vue 组件简介
Jul 31 Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 #Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 #Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 #Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 #Javascript
sencha ext js 6 快速入门(必看)
Jun 01 #Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 #Javascript
分享一个插件实现水珠自动下落效果
Jun 01 #Javascript
You might like
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
javascript date格式化示例
2013/09/25 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
javascript中 try catch用法
2015/08/16 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
python获取当前日期和时间的方法
2015/04/30 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
某公司Java工程师面试题笔试题
2016/03/27 面试题
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
端午节活动总结报告
2015/02/11 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
Golang表示枚举类型的详细讲解
2021/09/04 Golang