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 相关文章推荐
firefox下frameset取不到值的解决方法
Sep 06 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
js模糊查询实例分享
Dec 26 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
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开发模式(简写版)
2007/03/15 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
python读取excel表格生成erlang数据
2017/08/26 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
python FTP编程基础入门
2021/02/27 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
综合内勤岗位职责
2014/04/14 职场文书
教育教学工作反思
2016/02/24 职场文书