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 相关文章推荐
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
js实现div在页面拖动效果
May 04 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
Vue组件之自定义事件的功能图解
Feb 01 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
实用函数7
2007/11/08 PHP
PHP sprintf()函数用例解析
2011/05/18 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
PHP Cookie学习笔记
2016/08/23 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
Python代理抓取并验证使用多线程实现
2013/05/03 Python
python实现音乐下载的统计
2018/06/20 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
python实现一个猜拳游戏
2020/04/05 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
区域总监的岗位职责
2013/11/21 职场文书
家佳咖啡店创业计划书
2013/12/27 职场文书
八达岭长城导游词
2015/01/30 职场文书