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 SELECT单选模拟jQuery.select.js
Nov 12 Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
当json键为数字时的取值方法解析
Nov 15 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
vue实现商品列表的添加删除实例讲解
May 14 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代码
2008/04/09 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
在Django同1个页面中的多表单处理详解
2017/01/25 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
线程同步的方法
2016/11/23 面试题
大学生职业生涯规划书范文
2014/01/14 职场文书
双十佳事迹材料
2014/01/29 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python