JavaScript补齐指定位数-CFANZ编程社区

JavaScript补齐指定位数

开发过程中，我们会经常遇到日期或者数值显示指定位数，例如： “2016-8-3”显示为”2016-08-03”

一、通常解决方案

function dataLeftCompleting(value){
    return parseInt(value) < 10 ? "0" + value : value;
}
// 测试
var originValue = "2016-8-3",
    originDate = new Date(originValue);
var formatValue = originDate.getFullYear() 
        + "-" + dataLeftCompleting(originDate.getMonth() + 1) 
        + "-" + dataLeftCompleting(originDate.getDate());   // "2016-08-03"

上述补齐方式严格依据当前数值是否小于10去判断，不够灵活，扩展性较差。

二、可扩充的解决方案

/**
 * 可扩充的解决方案
 * @param bits 格式化位数
 * @param identifier 补全字符
 * @param value 值
 */
function dataLeftCompleting(bits, identifier, value){
    value = Array(bits + 1).join(identifier) + value;
    return value.slice(-bits);
}
// 测试
var originValue = "2016-8-3",
    originDate = new Date(originValue);
var formatValue = originDate.getFullYear() 
        + "-" + dataLeftCompleting(2, "0", originDate.getMonth() + 1) 
        + "-" + dataLeftCompleting(2, "0", originDate.getDate());   // "2016-08-03"

上述看似和“通常解决方案”没有啥差异，但是其灵活度却增大了很多！！

示例1：”1”格式化为”0001”

dataLeftCompleting(4, "0", 1);  // 要求4位，使用“0”补齐

示例2：”1”格式化为”***1”

dataLeftCompleting(4, "*", 1);  // 要求4位，使用“*”补齐

三、JavaScript稀疏数组

稀疏数组就是包含从0开始的不连续索引的数组。
上述示例中在使用“补全字符”填充数组时，并没有使用稀疏数组去实现：JavaScript循环迭代数组，会跳过这些“稀疏”值！

Array(3).map(function(){
    return "0";
});     //[undefined, undefined, undefined]

注意和上示例区别

Array.apply(null, Array(3)).map(function(){
    return "0";
});     //["0", "0", "0"]

JavaScript补齐指定位数_稀疏数组

1 in [0,,2]         ==> false
1 in [0,,]          ==> false
1 in [,,2]          ==> false
1 in [,,]           ==> false
1 in [,undefined,]  ==> true
1 in Array.apply(null, Array(3))    ==> true

四、ES6提供的方法

repeat()方法:

/**
* 可扩充的解决方案
* @param bits 格式化位数
* @param identifier 补全字符
* @param value 值
*/
function dataLeftCompleting(bits, identifier, value){
   value = identifier.repeat(bits) + value;
   return value.slice(-bits);
}

更为简单的padStart()方法：

"1".padStart(3, "0");   // 001

0 条评论