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 相关文章推荐
找到了一篇jQuery与Prototype并存的冲突的解决方法
Aug 29 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
vue项目强制清除页面缓存的例子
Nov 06 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
域名查询代码公布
2006/10/09 PHP
php include的妙用,实现路径加密
2008/07/29 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
PHP7新增函数
2021/03/09 PHP
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
Python切片用法实例教程
2014/09/08 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
django Serializer序列化使用方法详解
2018/10/16 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
Python 文件数据读写的具体实现
2020/01/24 Python
python实现贪吃蛇双人大战
2020/04/18 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
Python如何telnet到网络设备
2021/02/18 Python
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
企业口号大全
2014/06/12 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
2014年党委工作总结
2014/11/22 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
道歉的话语大全
2015/05/12 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书