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 相关文章推荐
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 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
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
医学毕业生自我鉴定
2013/10/30 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
个人收入证明模板
2014/09/18 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
2015感人爱情寄语
2015/02/26 职场文书
活动经费申请报告
2015/05/15 职场文书
亲戚关系证明
2015/06/24 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript