首页
所有分类
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库的介绍及对比
Sep 29 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 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) E1-XM(1) ETON(1) 放大器(1) DSP(2) 军机(1) VOLVO(1) 沃尔沃(1) R601SW(1) S900(1)
You might like
php不用正则采集速度探究总结
2008/03/24 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
详解PHP中的 input属性（隐藏 只读 限制）
2017/08/14 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
Python中的super()方法使用简介
2015/08/14 Python
python并发和异步编程实例
2018/11/15 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
如何定义TensorFlow输入节点
2020/01/23 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
奥利奥广告词
2014/03/20 职场文书
房屋维修协议书范本
2014/09/25 职场文书
年终工作总结范文2014
2014/11/27 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
python数据处理之Pandas类型转换
2022/04/28 Python
Python序列化模块JSON与Pickle
2022/06/05 Python