首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript中toFixed()四舍五入使用方法详解

Posted in Javascript onSeptember 28, 2018

最近做的项目涉及到金额的计算，有一种方式就是进行四舍五入的规则进行小数点后面的尾数处理，以前一直以为toFixed方法就是四舍五入的，知道一个用户反馈了金额计算的bug我才如梦初醒（亏了一毛钱），才仔细深究了下toFixed这个方法，唉，还是我不够严谨啊，前车之鉴，大家勿走我的老路！

toFixed还不同的浏览器实现，在IE10及以上里面是正常的四舍五入，但是别的浏览器里面就不一样了，它不是正常的四舍五入（等下重点说），比如：

var a = 1.335;
console.log(a.toFixed(2))
// IE   1.34
//chorme 1.33

其他的浏览器我没去一一测试，所以如果大家用了其他浏览器的还是需要去实际测试一下，我这里就说说javascript的toFixed()方法的四舍五入原理：

toFixed它是一个四舍六入五成双的诡异的方法(也叫银行家算法)，"四舍六入五成双"含义：对于位数很多的近似数，当有效位数确定后，其后面多余的数字应该舍去，只保留有效数字最末一位，这种修约（舍入）规则是“四舍六入五成双”，也即“4舍6入5凑偶”这里“四”是指≤4 时舍去，"六"是指≥6时进上，"五"指的是根据5后面的数字来定，当5后有数时，舍5入1；当5后无有效数字时，需要分两种情况来讲：①5前为奇数，舍5入1；②5前为偶数，舍5不进。（0是偶数）

但是，经过我的测试发现，在chorme下面（最新版），并没有完全遵守这个规则，尤其是5的后面没有数字的时候，不是这么判断的，如下：

var b = 1.335
b.toFixed(2)
"1.33"
var b = 1.345
b.toFixed(2)
"1.34"
var b = 1.355
b.toFixed(2)
"1.35"
var b = 1.365
b.toFixed(2)
"1.36"
var b = 1.375
b.toFixed(2)
"1.38"
var b = 1.385
b.toFixed(2)
"1.39"

可以发现在chorme下没有完全去遵循这个规律，或许它有自己的算法，但是毕竟它没有遵循通用的银行家算法，所以tofixed这个方法在涉及到金钱计算的业务中还是少用，
最好别用，否则可能会出大问题！
下面再再说说我自己的做法，就是根据精确位数来取小数点后的数，然后判断精确位是大于4还是小于等于4，上代码吧，不说了：
我们的业务是最多精确到分，也就是两位小数，最少就是取整，不留小数

function moneySwitch(money, precision){//precision是需要精确的位数，如百分位就是2
 var result = 0;
 //先进行一个千分位的四舍五入，保证3.0999这种情况在保留一位小数的时候能是对的，这一位可以这么做没什么问题
 var money = parseFloat(money).toFixed(3);
 try{
  var int_part = money.split(".")[0], //小数点前的整数
  point_num = money.split(".")[1],//取小数点后面的小数
  precision_num = point_num[3-precision];
  if(precision_num>4){//五入的情况
   if(precision==1){
    point_num = parseInt(point_num)+10+"";
    if(point_num.length>3){//说明往整数位进1
     int_part = parseInt(int_part)+1+"";
     point_num = point_num[1]+point_num[2];
    }else{
     point_num = point_num[0]+point_num[1];
    }
    result = parseFloat(int_part+"."+point_num);
   }else if(precision==2){
    point_num = parseInt(point_num)+100+"";
    if(point_num.length>3){//说明往整数位进1
     int_part = parseInt(int_part)+1+"";
     point_num = point_num[1];
    }else{
     point_num = point_num[0];
    }
    result = parseFloat(int_part+"."+point_num);
   }else if(precision==3){
    int_part = parseInt(int_part)+1+"";
    point_num = 0;
   }
   result = parseFloat(int_part+"."+point_num);
  }else{//四舍的情况
   if(precision==1){
    point_num = point_num[0]+point_num[1];
   }else if(precision==2){
    point_num = point_num[0];
   }else if(precision==3){
    point_num = 0;
   }
   result = parseFloat(int_part+"."+point_num);
  } 
 }catch(e){
  return parseFloat(money).toFixed(2);//如果过程中有出错就tofixed代替为解决
 }
 return result;
}

补充：

js处理数字保留2位小数，强制保留2位小数不够补上.00

1、保留两位小数 //功能：将浮点数四舍五入，取小数点后2位

2、//制保留2位小数，如：2，会在2后面补上00.即2.00

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script type="text/javascript" src="js/jq.js"></script>
</head>
<script type="text/javascript"> 
 //保留两位小数 
 //功能：将浮点数四舍五入，取小数点后2位 
 function toDecimal(x) { 
  var f = parseFloat(x); 
  if (isNaN(f)) { 
   return; 
  } 
  f = Math.round(x*100)/100; 
  return f; 
 } 
 
 
 //制保留2位小数，如：2，会在2后面补上00.即2.00 
 function toDecimal2(x) { 
  var f = parseFloat(x); 
  if (isNaN(f)) { 
   return false; 
  } 
  var f = Math.round(x*100)/100; 
  var s = f.toString(); 
  var rs = s.indexOf('.'); 
  if (rs < 0) { 
   rs = s.length; 
   s += '.'; 
  } 
  while (s.length <= rs + 2) { 
   s += '0'; 
  } 
  return s; 
 } 
  
 function fomatFloat(src,pos){  
   return Math.round(src*Math.pow(10, pos))/Math.pow(10, pos);  
 } 
 
 document.write("四舍五入 <br/>")
 document.write("3.14159267保留2位小数：" + toDecimal(3.14159267)+"<br/>"); 
 document.write("3.14159267强制保留2位小数：" + toDecimal2(3.14159267)+"<br/>"); 
 document.write("3.14159267保留2位小数：" + toDecimal(3.14559267)+"<br/>"); 
 document.write("3.14159267强制保留2位小数：" + toDecimal2(3.15159267)+"<br/>"); 
 document.write("3.14159267保留2位小数：" + fomatFloat(3.14559267, 2)+"<br/>"); 
 document.write("3.14159267保留1位小数：" + fomatFloat(3.15159267, 1)+"<br/>"); 
  
 document.write("五舍六入 <br/>")
 document.write("1000.003保留2位小数：" + 1000.003.toFixed(2)+"<br/>"); 
 document.write("1000.08保留1位小数：" + 1000.08.toFixed(1)+"<br/>"); 
 document.write("1000.04保留1位小数：" + 1000.04.toFixed(1)+"<br/>"); 
 document.write("1000.05保留1位小数：" + 1000.05.toFixed(1)+"<br/>"); 
  
 document.write("科学计数 <br/>")
 document.write(3.1415+"科学技术后："+3.1415.toExponential(2)+"<br/>"); 
 document.write(3.1455+"科学技术后："+3.1455.toExponential(2)+"<br/>"); 
 document.write(3.1445+"科学技术后："+3.1445.toExponential(2)+"<br/>"); 
 document.write(3.1465+"科学技术后："+3.1465.toExponential(2)+"<br/>"); 
 document.write(3.1665+"科学技术后："+3.1665.toExponential(1)+"<br/>"); 
 document.write("精确到n位，不含n位 <br/>")
 document.write("3.1415精确到小数点第2位" + 3.1415.toPrecision(2)+"<br/>"); 
 document.write("3.1455精确到小数点第3位" + 3.1465.toPrecision(3)+"<br/>"); 
 document.write("3.1445精确到小数点第2位" + 3.1415.toPrecision(2)+"<br/>"); 
 document.write("3.1465精确到小数点第2位" + 3.1455.toPrecision(2)+"<br/>"); 
 document.write("3.166592679287精确到小数点第5位" + 3.141592679287.toPrecision(5)+"<br/>"); 
</script> 
<body>
<input type="text" id="Score" />
</body>
</html>

这篇关于toFixed()的文章就介绍到这了，希望大家以后多多支持三水点靠木。

javascript中toFixed()四舍五入使用方法详解

- Author -

show_code

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 Javascript
对vue中v-if的常见使用方法详解
Sep 28 #Javascript
总结javascript三元运算符知识点
Sep 28 #Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 #Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 #Javascript
js隐式转换的知识实例讲解
Sep 28 #Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 #Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 #Javascript
塑料(1) 大脑(1) 美国航天局(1) 火星(2) 人造肉(1) 毅力号(1) 酶(1) 数据(1) 天问一号(1) NASA(1)
You might like
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
php redis实现文章发布系统（用户投票系统）
2017/03/04 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
重载toString实现JS HashMap分析
2011/03/13 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
ES6新特性七：数组的扩充详解
2017/04/21 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
vue跨域解决方法
2017/10/15 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
在Python中关于中文编码问题的处理建议
2015/04/08 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
Python装饰器结合递归原理解析
2020/07/02 Python
如何用Python绘制3D柱形图
2020/09/16 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
印尼穆斯林时尚购物网站：Hijabenka
2016/12/10 全球购物
教室标语大全
2014/06/21 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
清明节主题班会
2015/08/14 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL