Es2017中新的字符串方法:padStart和padEnd

js
es2017, js, source

填充字符

padStart和padEnd填充字符

  • 填充字符串的用例包括：
  • 给需要的数字添加长度补0
  • 以等宽字体显示平整的数据。
  • 在文件名或URL中添加计数或ID：’file 001.txt’。
  • 对齐控制台输出： ‘Test 001: ✓’。
  • 打印具有固定位数的十六进制或二进制数字：’0x00FF’

Demo1: 填充0

1
2
3
4
5
6
7
8
9
10
11
12
13
/*
*
*   param {*}  padStart(n,str)  在前面添加
*   param {*}  padEnd(n,str)
*   
*/

//根据位数前后补0
"211".toString().padStart(5,"0")
"00211"

"211".toString().padEnd(5,"0")
"21100"

Demo2: 第二个参数添加常度超过总长度，会自动截取到第几位

1
2
3
4
5
"2112".toString().padStart(5,"abcd")
"a2112"

"2112".toString().padEnd(5,"abcd")
"2112a"

Demo3: 第二个参数不写，则以空格的形式进行填充

1
2
3
4
5
"123".toString().padEnd(5)
"123  "

"123".toString().padStart(5)
"  123"

逻辑实现

padStat()逻辑实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
String.prototype.padStart = function (maxLength, fillString=' ') {
    let str = String(this);
    if (str.length >= maxLength) {
        return str;
    }
 
    fillString = String(fillString);
    if (fillString.length === 0) {
        fillString = ' ';
    }
 
    let fillLen = maxLength - str.length;
    let timesToRepeat = Math.ceil(fillLen / fillString.length);
    let truncatedStringFiller = fillString
        .repeat(timesToRepeat)
        .slice(0, fillLen);
    return truncatedStringFiller + str;
};

padStart()和padEnd() 的实现只是最后一行是不同

1
return str + truncatedStringFiller;

参照了：http://exploringjs.com/es2016-es2017/ch_object-getownpropertydescriptors.html

分享到