乐趣区

JS字符串补全方法padStart和padEnd

jiezi

这个方法无意中看到的，感觉还是蛮实用的，特此分享一波。我想大家都会有遇到将时间戳转换成时间格式的时候，时间或日期不足 2 位的前面补 0。有了今天说的这个东西，就又可以少写几行代码了，大家在项目中遇到类似场景可以去使用感受下。

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。

padStart() padEnd() 方法用另一个字符串填充当前字符串 (如果需要的话则重复填充)，返回填充后达到指定长度的字符串。

padStart() 从当前字符串的开始 (左侧) 位置填充。
padEnd() 从当前字符串的末尾（右侧）开始填充。

语法：

str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])

padStart() 和 padEnd() 一共接受两个参数，第一个参数 targetLength 是当前字符串需要填充到的目标长度，第二个参数 padString 是用来填充的字符串，缺省值为 ” “。

返回值：
在原字符串开头填充指定的填充字符串直到目标长度所形成的新字符串。

如果 targetLength 小于当前字符串的长度，则字符串补全不生效，返回当前字符串本身。

'abc'.padStart(1, 'd');          // "abc"
'abc'.padEnd(1, 'd');          // "abc"

如果 targetLength 小于用来填充的字符串长度与原字符串的长度之和，则会截去超出位数的补全字符串。

'abc'.padStart(6,"123456");       // "123abc"
'abc'.padEnd(6, "123456");       // "abc123"

如果省略第二个参数 padString，即使用空格补全长度。

'abc'.padStart(10);         // "abc"
'abc'.padEnd(10);          // "abc"

如果 padString 长度过长，则会删除后面多出的字符串。

'abc'.padStart(5, "foo");        // "foabc"
'abc'.padEnd(5, "foo");         // "abcfo"

应用：

  • 补全指定位数，如格式化时间或日期时，个位数补 0
  • 提示字符串格式 字符串拼接

示例：
当我们使用时间戳并转换成 yyyy-mm-dd hh:mm:ss 的格式。

function dataFormat(data) {const dt = new Date(data * 1000)  // 注：如果是 13 位时间戳不用 *1000 
    
    const y = dt.getFullYear()
    const m = (dt.getMonth() + 1 + '').padStart(2,'0')
    const d = (dt.getDay() + '').padStart(2,'0')
​
    const hh = (dt.getHours() + '').padStart(2,'0')
    const mm = (dt.getMinutes() + '').padStart(2,'0')
    const ss = (dt.getSeconds() + '').padStart(2,'0')
​
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}

因着此方法是 ES6 新增方法，部分浏览器不支持，会有兼容性问题。查看 Polyfill 创建的 String.prototype.padStart() / String.prototype.padEnd() 方法。

// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd
if (!String.prototype.padEnd) {String.prototype.padEnd = function padEnd(targetLength,padString) {
        targetLength = targetLength>>0; //floor if number or convert non-number to 0;
        padString = String((typeof padString !== 'undefined' ? padString: ''));
        if (this.length > targetLength) {return String(this);
        }
        else {
            targetLength = targetLength-this.length;
            if (targetLength > padString.length) {padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
            }
            return String(this) + padString.slice(0,targetLength);
        }
    };
}
退出移动版