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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
JS实现鼠标按下拖拽效果
Jul 23 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 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运行环境教程
2015/02/12 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
vue的diff算法知识点总结
2018/03/29 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
从零学Python之入门(三)序列
2014/05/25 Python
python制作一个桌面便签软件
2015/08/09 Python
Python操作Excel之xlsx文件
2017/03/24 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
图解Python变量与赋值
2018/04/03 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
贸易经济专业自荐书
2014/06/29 职场文书
2014年安全员工作总结
2014/11/13 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
工程款催款函
2015/06/24 职场文书