ECMAScript 2017 之 字符串对象新方法 padStart 和 padEnd

发布:elantion 日期:2019-08-12 阅读:263 评论:0

ECMAScript 2017 新增了字符填充方法:padStart 和 padEnd,就像字面意义一样,一个是往前面填充,一个是往后面填充,实际使用也极其简单,但真的是个很实用的新方法。

'x'.padStart(5, 'ab');
// 'ababx'

'x'.padEnd(5, 'ab');
// 'xabab'

使用场景

1、使用等宽字体的表格里用它来填充空数据。
2、向固定位数的文件名里填充空值,例如:file.001.zip
3、在命令行里对齐输出,例如:test 001: ✓
4、往固定位数的十六进制或二进制的数字里填充空值,例如:0x00FF

String.prototype.padStart(maxLength, fillString=' ')

这个方法会在向当前字符串前面填充fillString(可能会重复),至到字符串的长度等于maxLength

'x'.padStart(5, 'ab');
// ababx

fillString重复后如果超过maxLength,则只顺取fillString的前几个字符,例如:

'x'.padStart(4, 'ab');
// abax

如果当前字符串比maxLength更大,则直接返回当前字符串。

'abcd'.padStart(2, '#')
// 'abcd'

如果maxLengthfillString的长度一样,则fillString相当于遮蔽字符串。

'abc'.padStart(10, '0123456789')
// '0123456abc'

如果fillString没提供,则使用默认值,空格。

'x'.padStart(3)
'  x'

polyfill padStart

如果目标浏览器不提供该方法,可以使用下面补丁代码:

// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
if (!String.prototype.padStart) {
    String.prototype.padStart = function padStart(targetLength, padString) {
        targetLength = targetLength >> 0; //truncate 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 padString.slice(0, targetLength) + String(this);
        }
    };
}

String.prototype.padEnd(maxLength, fillString=' ')

padEnd 与 padStart 几乎一模一样,除了padEnd是往字符串后面填充。

'x'.padEnd(5, 'ab');
// 'xabab'

'x'.padEnd(4, 'ab');
// 'xaba'

'abcd'.padEnd(2, '#');
// 'abcd'

'abc'.padEnd(10, '0123456789');
// 'abc0123456'

'x'.padEnd(3);
// 'x  '

polyfill padEnd

同padStart一样,浏览器原生不支持的话,把下面代码拷到代码前部即可。

// 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);
        }
    };
}

FAQ

为啥不叫padLeft或padRight?因为对于双向或从右到左的语言,左和右并不是字面意思的方向。所以起名字时就顺从之前的 startsWith 和 endsWith 方法。

参考文章

http://exploringjs.com/es2016-es2017/ch_string-padding.html
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd