JavaScript实现数字前补“0”的五种方法示例


Posted in Javascript onJanuary 03, 2019

本文实例讲述了JavaScript实现数字前补“0”的五种方法。分享给大家供大家参考,具体如下:

众所周知JavaScript中的数字是没有前置0的,因此需要我们自己进行操作来添加前置0,而且还得转换成字符串。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript 数字前补“0”</title>
<body>
<script>
 //迭代方式实现
 function padding1(num, length) {
  for(var len = (num + "").length; len < length; len = num.length) {
   num = "0" + num;
  }
  return num;
 }
 //递归方式实现
 function padding2(num, length) {
  if((num + "").length >= length) {
   return num;
  }
  return padding2("0" + num, length)
 }
 //转为小数
 function padding3(num, length) {
  var decimal = num / Math.pow(10, length);
  //toFixed指定保留几位小数
  decimal = decimal.toFixed(length) + "";
  return decimal.substr(decimal.indexOf(".")+1);
 }
 //填充截取法
 function padding4(num, length) {
  //这里用slice和substr均可
  return (Array(length).join("0") + num).slice(-length);
 }
 //填充截取法
 function padding5(num, length) {
  var len = (num + "").length;
  var diff = length - len;
  if(diff > 0) {
   return Array(diff).join("0") + num;
  }
  return num;
 }
 function test(num, length) {
  document.write(padding1(num, length));
  document.write("<br>");
  document.write(padding2(num, length));
  document.write("<br>");
  document.write(padding3(num, length));
  document.write("<br>");
  document.write(padding4(num, length));
  document.write("<br>");
  document.write(padding5(num, length));
  document.write("<br>");
 }
 test(123, 10);
 test(1234567890123, 10);
</script>
</body>
</html>

输出

0000000123
0000000123
0000000123
0000000123
000000123
1234567890123
1234567890123
4567890123
4567890123
1234567890123

感兴趣的朋友还可以使用本站在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试运行上述代码。

更多关于JavaScript相关内容还可查看本站专题:《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》及《JavaScript字符与字符串操作技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
用js解决数字不能换行问题
Aug 10 Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 #Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 #Javascript
发布一款npm包帮助理解npm的使用
Jan 03 #Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 #Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 #Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 #Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 #Javascript
You might like
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
JQuery中$之选择器用法介绍
2011/04/05 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
python中的函数用法入门教程
2014/09/02 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
python实现PCA降维的示例详解
2020/02/24 Python
Python基于requests库爬取网站信息
2020/03/02 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
校园活动策划书范文
2014/01/10 职场文书
生活小常识广播稿
2014/09/16 职场文书
招商引资工作汇报
2014/10/28 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
大学学生会辞职信
2015/05/13 职场文书
交通安全主题班会
2015/08/12 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书