JavaScript如何实现对数字保留两位小数一位自动补零


Posted in Javascript onDecember 18, 2015

本章节介绍一下如何实现对数字保留两位小数效果,如果数字的原本小数位数不到两位,那么缺少的就自动补零,这个也是为了统一的效果,先看代码实例:

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;
 }
}
var num=3.1;
console.log(returnFloat(num));

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

1.function returnFloat(value){},参数是要被转换的数字。

2.var value=Math.round(parseFloat(value)*100)/100,这个应该是函数的核心之处,parseFloat(value)将参数转换为浮点数,因为参数有可能是字符串,乘以100是因为要保留两位小数,先将小数点向右移动两个位数,然后再利用Math.round()方法实行四舍五入计算,最后除以100,这样就实现了保留保留两位小数,并且还具有四舍五入效果,但是这个并不完美,如果参数数字本身的小数位数大于等于2是可以的,如3.1415,但是如3或者3.0这样的还是没有完美的实现,继续看下面。

3.var xsd=value.toString().split("."),使用点"."value分隔成一个数组。

4.if(xsd.length==1){value=value.toString()+".00";return value;},如果数组的长度是1,也就是说不存在小数,那么就会为这个数字添加两个0,例如3会被转换成3.00。

5.

if(xsd.length>1){
 if(xsd[1].length<2){
 value=value.toString()+"0";
 }
 return value;
 }

if(xsd.length>1)用来判断数字的长度是否大于1,也就是数字是否具有小数,如有小数,但是小数的位数小于2,也就是类似3.1这样的,就会在后面加一个0,也就是会转换为3.10。

二.相关学习教程:

1.Math.round()可以参阅javascript的Math.round()方法一章节。

2.parseFloat()函数可以参阅javascript的parseFloat()方法一章节。

3.toString()函数可以参阅javascript的Number对象的toString()方法一章节。 

4.split()函数可以参阅javascript的String对象的split()方法一章节。

Javascript 相关文章推荐
jQuery timers计时器简单应用说明
Oct 28 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 Javascript
js格式化时间的方法
Dec 18 #Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 #Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 #Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 #Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 #Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 #Javascript
jQuery Validate表单验证深入学习
Dec 18 #Javascript
You might like
wampserver改变默认网站目录的办法
2015/08/05 PHP
php四种定界符详解
2017/02/16 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
广州某公司软件工程师面试题
2014/12/22 面试题
总经理办公室主任岗位职责
2013/11/12 职场文书
超市开店计划书
2014/09/15 职场文书
优秀班组申报材料
2014/12/25 职场文书
治庸问责工作总结
2015/08/11 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
七个Python必备的GUI库
2021/04/27 Python
Python中递归以及递归遍历目录详解
2021/10/24 Python