js保留两位小数方法总结


Posted in Javascript onJanuary 31, 2018

本文是小编针对js保留两位小数这个大家经常遇到的经典问题整理了在各种情况下的函数写法以及遇到问题的分析,以下是全部内容:

js保留两位小数方法总结

一、我们首先从经典的“四舍五入”算法讲起

1、四舍五入的情况

var num =2.446242342;
num = num.toFixed(2); // 输出结果为 2.45

2、不四舍五入

第一种,先把小数边整数:

Math.floor(15.7784514000 * 100) / 100 // 输出结果为 15.77

第二种,当作字符串,使用正则匹配:

Number(15.7784514000.toString().match(/^\d+(?:\.\d{0,2})?/)) // 输出结果为 15.77,不能用于整数如 10 必须写为10.0000

注意:如果是负数,请先转换为正数再计算,最后转回负数

再分享一个经典的解决四舍五入问题后js保留两位小数的方法:

//四舍五入保留2位小数(若第二位小数为0,则保留一位小数)
function keepTwoDecimal(num) {
 var result = parseFloat(num);
 if (isNaN(result)) {
 alert('传递参数错误,请检查!');
 return false;
 }
 result = Math.round(num * 100) / 100;
 return result;
}
//四舍五入保留2位小数(不够位数,则用0替补)
function keepTwoDecimalFull(num) {
 var result = parseFloat(num);
 if (isNaN(result)) {
 alert('传递参数错误,请检查!');
 return false;
 }
 result = Math.round(num * 100) / 100;
 var s_x = result.toString();
 var pos_decimal = s_x.indexOf('.');
 if (pos_decimal < 0) {
 pos_decimal = s_x.length;
 s_x += '.';
 }
 while (s_x.length <= pos_decimal + 2) {
 s_x += '0';
 }
 return s_x;
}

如果大家想对javascript有系统深入的学习,可以参阅 JavaScript启示录 PDF原书完整版 这本经典书籍

二、Js取float型小数点后两位数的方法

<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); 
 } 
 //四舍五入 
 alert("保留2位小数:" + toDecimal(3.14159267)); 
 alert("强制保留2位小数:" + toDecimal2(3.14159267)); 
 alert("保留2位小数:" + toDecimal(3.14559267)); 
 alert("强制保留2位小数:" + toDecimal2(3.15159267)); 
 alert("保留2位小数:" + fomatFloat(3.14559267, 2)); 
 alert("保留1位小数:" + fomatFloat(3.15159267, 1)); 
 
 //五舍六入 
 alert("保留2位小数:" + 1000.003.toFixed(2)); 
 alert("保留1位小数:" + 1000.08.toFixed(1)); 
 alert("保留1位小数:" + 1000.04.toFixed(1)); 
 alert("保留1位小数:" + 1000.05.toFixed(1)); 

 //科学计数 
 alert(3.1415.toExponential(2)); 
 alert(3.1455.toExponential(2)); 
 alert(3.1445.toExponential(2)); 
 alert(3.1465.toExponential(2)); 
 alert(3.1665.toExponential(1)); 
 //精确到n位,不含n位 
 alert("精确到小数点第2位" + 3.1415.toPrecision(2)); 
 alert("精确到小数点第3位" + 3.1465.toPrecision(3)); 
 alert("精确到小数点第2位" + 3.1415.toPrecision(2)); 
 alert("精确到小数点第2位" + 3.1455.toPrecision(2)); 
 alert("精确到小数点第5位" + 3.141592679287.toPrecision(5)); 
 </script>

用Javascript取float型小数点后两位,例22.127456取成22.13,如何做?

1.丢弃小数部分,保留整数部分

parseInt(5/2)

2.向上取整,有小数就整数部分加1

Math.ceil(5/2)

3,四舍五入.

Math.round(5/2)

4,向下取整

Math.floor(5/2)

另类的方法

1. 最笨的办法

function get()
{
 var s = 22.127456 + "";
 var str = s.substring(0,s.indexOf(".") + 3);
 alert(str);
}

2. 正则表达式效果不错

<script type="text/javascript">
onload = function(){
 var a = "23.456322";
 var aNew;
 var re = /([0-9]+.[0-9]{2})[0-9]*/;
 aNew = a.replace(re,"$1");
 alert(aNew);
}
</script>

3. 他就比较聪明了

<script>
var num=22.127456;
alert( Math.round(num*100)/100);
</script>

4.会用新鲜东西的朋友....... 但是需要 IE5.5+才支持。

5.js保留2位小数(强制)

对于小数点位数大于2位的,用上面的函数没问题,但是如果小于2位的,比如:changeTwoDecimal(3.1),将返回3.1,如果你一定需要3.10这样的格式,那么需要下面的这个函数:

function changeTwoDecimal_f(x) {
 var f_x = parseFloat(x);
 if (isNaN(f_x)) {
 alert('function:changeTwoDecimal->parameter error');
 return false;
 }
 var f_x = Math.round(x * 100) / 100;
 var s_x = f_x.toString();
 var pos_decimal = s_x.indexOf('.');
 if (pos_decimal < 0) {
 pos_decimal = s_x.length;
 s_x += '.';
 }
 while (s_x.length <= pos_decimal + 2) {
 s_x += '0';
 }
 return s_x;
}

三、js保留两位小数,自动补充零

function returnFloat(value){
 var value=Math.round(parseFloat(value)*100)/100;
 var xsd=value.toString().split(".");
 if(xsd.length==1){
 value=value.toString()+".00";
 return value;
 }
 if(xsd.length>1){
 if(xsd[1].length<2){
 value=value.toString()+"0";
 }
 return value;
 }
}

四、JS取整数,js取绝对值,js四舍五入(可保留两位小数)

JS取整数,js取绝对值,js四舍五入(可保留两位小数)函数如下:

<SCRIPT language=javascript>
<!-- 
function jsMath()
{
 document.write(Math.floor(5.80) + "<br>");//取整或下舍入
 document.write(Math.round(5.80) + "<br>");//四舍五入,取整数
 document.write(Math.round((5.80*100)/100) + "<br>");//四舍五入,保留两位小数
 document.write(Math.ceil(5.10) + "<br>");//上舍入
 document.write(Math.abs(-5.80) + "<br>");//取绝对值
 document.write(Math.max(55,58) + "<br>");//返回两个值中最大数
 document.write(Math.min(55,58) + "<br>");//返回两个值中最小数
}
-->
</SCRIPT>
<div>
<script>jsMath();</script>
</div>

总结

JS数据格式化是在进行web前端开发时常碰到的事情,特别是在数据类型为Float的数据就需要特殊处理,如保留两位小数、小数点后的数据是否需要四舍五入等等。下面就来介绍实现数据格式化保留两位小数的多种方法。

1、JS自带的方法toFixed(),toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

语法:NumberObject.toFixed(num),mun是必需的参数,即规定小数的位数,是 0 ~ 20 之间的值,包括 0 和 20,有些实现可以支持更大的数值范围。如果省略了该参数,将用 0 代替,所以toFixed() 方法可以实现保留2位、3位、4位等等,取决于num的数值。

返回值:返回 NumberObject 的字符串表示,不采用指数计数法,小数点后有固定的 num 位数字。如果必要,该数字会被舍入,也可以用 0 补足,以便它达到指定的长度。如果 num 大于 le+21,则该方法只调用 NumberObject.toString(),返回采用指数计数法表示的字符串。

当 num 太小或太大时抛出异常 RangeError。0 ~ 20 之间的值不会引发该异常。有些实现支持更大范围或更小范围内的值。

当调用该方法的对象不是 Number 时抛出 TypeError 异常。

<script type=”text/javascript”>
var num = new Number(13.376954);
document.write (num.toFixed(2))
</script>
输出:13.38

2、自定义函数实现小数保留并四舍五入。

function roundFun(numberRound,roundDigit) { //四舍五入,保留位数为roundDigit
if (numberRound>=0){
var tempNumber = parseInt((numberRound * Math.pow(10,roundDigit)+0.5))/Math.pow(10,roundDigit);
return tempNumber;
} else{
numberRound1=-numberRound;
var tempNumber = parseInt((numberRound1 * Math.pow(10,roundDigit)+0.5))/Math.pow(10,roundDigit);
return -tempNumber;
}
}

然后调用roundFun()这个函数就可以了。如roundFun('13.376954′,2);当然返回的结果跟第一种方法是一样的。

3、通过函数截取,截取到小数点后面第几位,当然这种方法就没有四舍五入了。

<script type=”text/javascript”>
tmp = 13.376954″
result = tmp.substr(0,tmp.indexOf(“.”)+2);
alert(result);
</script>

以上就是小编为大家整理的关于js保留两位小数方法的总结内容,感谢你的支持,如果你对js保留两位小数方法还有任何不明白的地方,可以在下方的留言区讨论。

Javascript 相关文章推荐
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
在js中做数字字符串补0(js补零)
Mar 25 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
微信小程序icon组件使用详解
Jan 31 #Javascript
详解Chai.js断言库API中文文档
Jan 31 #Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 #Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 #Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 #Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 #Javascript
微信小程序页面生命周期详解
Jan 31 #Javascript
You might like
php缓存技术介绍
2006/11/25 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
js实现继承的5种方式
2015/12/01 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
大韩航空官方网站:Korean Air
2017/10/25 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
优质的学校老师推荐信
2013/10/28 职场文书
安全大检查反思材料
2014/01/31 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
团委竞选演讲稿
2014/04/24 职场文书
施工安全汇报材料
2014/08/17 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
法学专业求职信范文
2015/03/19 职场文书
庆祝教师节主持词
2015/07/06 职场文书
关于python爬虫应用urllib库作用分析
2021/09/04 Python
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python
Docker部署Mysql8的实现步骤
2022/07/07 Servers