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的前端数据通用验证库
Aug 08 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 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
PHP 中的一些经验积累
2006/10/09 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
javascript 得到变量类型的函数
2010/05/19 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
js文字横向滚动特效
2015/11/11 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
python实现多线程网页下载器
2018/04/15 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
PyQt5实现画布小程序
2020/05/30 Python
pandas实现导出数据的四种方式
2020/12/13 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
物业总经理岗位职责
2014/02/28 职场文书
邓小平理论心得体会
2014/09/09 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
金榜题名主持词
2015/07/02 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python
react中的DOM操作实现
2021/06/30 Javascript
正则表达式拆分url实例代码
2022/02/24 Java/Android
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL