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 相关文章推荐
JS声明变量背后的编译原理剖析
Dec 28 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
js实现橱窗展示效果
Jan 11 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 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
Cannot modify header information错误解决方法
2008/10/08 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
python基于socket实现网络广播的方法
2015/04/29 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
python散点图实例之随机漫步
2018/08/27 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
python pygame实现球球大作战
2019/11/25 Python
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
棉花姑娘教学反思
2014/02/15 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
2014年城管工作总结
2014/11/20 职场文书
毕业论文致谢词
2015/05/14 职场文书
毕业实习证明范本
2015/06/16 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
52条SQL语句教你性能优化
2021/05/25 MySQL
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL