在js中做数字字符串补0(js补零)


Posted in Javascript onMarch 25, 2017

通常遇到的一个问题是日期的“1976-02-03 HH:mm:ss”这种格式 ,我的比较简单的处理方法是这样:

function formatDate(d) {
 var D=['00','01','02','03','04','05','06','07','08','09']
 with (d || new Date) return [
  [getFullYear(), D[getMonth()+1]||getMonth()+1, D[getDate()]||getDate()].join('-'),
  [D[getHours()]||getHours(), D[getMinutes()]||getMinutes(), D[getSeconds()]||getSeconds()].join(':')
 ].join(' ');
}

这种方法是逻辑比较简单的,而且规则也简单。除了with(d||new Date)的使用之外,也算不上什么技巧。但是,如果用这种方法来做数字字符串补0,那么结果显然不妙。51js的月影提供了另一个方案:

function pad(num, n) {
 return Array(n>num?(n-(''+num).length+1):0).join(0)+num;
}

调用示例如下:

pad(100, 4); // 输出:0100

月影在这里分析了其中的技巧,以及代码长短与效率上的平衡:
最后月影推荐的是“质朴长存法”:

/* 质朴长存法 by lifesinger */
function pad(num, n) {
  var len = num.toString().length;
  while(len < n) {
    num = "0" + num;
    len++;
  }
  return num;
}

这个在“没事就射鸟”同学的博客里做了分析
月影同学有一件事是没有做的,就是没说明“为什么那个短代码的效率更低?”。
答案是“表面看来,用array.join来替代循环是高效的,但忘掉了一个数组创建的开销”。对此有没有法子呢?我有过另一个解决的思路。如下:

/* 查表法(不完善) by aimingoo */
pad = function(tbl) {
 return function(num, n) {
  return (((tbl[n = n-num.toString().length]) || (tbl[n] = Array(n).join(0))) + num);
 }
}([]);

这个路子跟前面的formatDate()是一样的,只不是formatDate()里的表是一个确定的数组,而这里的数组则是动态生成,然后缓存在tbl[]里面。这个缓存的tbl[]数组是使用一个函数调用参数的形式,保持在最终的pad()函数的上层闭包里面。为了让上面的这个过程清晰一点,我重排代码格式如下:

pad = function(tbl) {
 return function(num, n) {
  return (
   ((tbl[n = n-num.toString().length]) ||
    (tbl[n] = Array(n).join(0))) +
   num
  );
 }
}([]);

好的。到这里,先别急,还有两个问题要解决。其一,当不需要补0时,上述的tbl[0]返回空值,所以会进入到“||”运算的第二个分支,因此导致Array()重算一次,也就是说“不补0的情况效率其实最低”。其二,当num长度大于n时,也就变成了“补负数个零”。“补负数个零”显然不行,一般对此处理成“不需要补零”,于是又回到了第一个问题。

这两个问题可以一次解决,其实就是多一次判断:

/* 查表法(完善版本) by aimingoo */
pad = function(tbl) {
 return function(num, n) {
  return (0 >= (n = n-num.toString().length)) ? num : (tbl[n] || (tbl[n] = Array(n+1).join(0))) + num;
 }
}([]);

当然,也可以象前面一样整理一下这个代码格式。或者,采用一个完全不用“(函数式语言的)连续运算等技巧”的版本:

/* 查表法(过程式版本) by aimingoo */
pad = function() {
 var tbl = [];
 return function(num, n) {
  var len = n-num.toString().length;
  if (len <= 0) return num;
  if (!tbl[len]) tbl[len] = (new Array(len+1)).join('0');
  return tbl[len] + num;
 }
}();

算法永远都是如此,要不是时间换空间,要不就是空间换时间。射雕同学的“质朴长存法”是时间换空间的方法,而这里的查表法则是空间换时间的方案。这个函数会在tbl中持续一个字符串数组,如果num是非常经常变化的,那么效率也不会有太大提升——对于过于频繁变化的系统,缓存就意义不大了。其实逻辑都差不多,月影同学只是少走了一步而已。

Javascript 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
javascript中数组的常用算法深入分析
Mar 12 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 #Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 #Javascript
javascript作用域链与执行环境详解
Mar 25 #Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 #Javascript
使用vue.js写一个tab选项卡效果
Mar 25 #Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 #Javascript
JS操作xml对象转换为Json对象示例
Mar 25 #Javascript
You might like
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
Python实现批量检测HTTP服务的状态
2016/10/27 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python制作抖音代码舞
2019/04/07 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
解决python 上传图片限制格式问题
2019/10/30 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
《蜗牛》教学反思
2014/02/18 职场文书
教师节横幅标语
2014/10/08 职场文书
团组织推荐意见
2015/06/05 职场文书
企业文化学习心得体会
2016/01/21 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers