ES6新增的padStart()方法和padEnd()方法

padStart()

用于在开头位置补全字符串

语法：

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

 参数：

接受两个参数：

第一个参数是用来指定字符串的长度，如果该值低于当前字符串的长度，则将按原样返回当前字符串

第二个参数是用来补全的字符串，如果此字符串太长而无法保持在目标长度内，则会截断该字符串并应用最左侧的部分，如果省略，将会用空格补全。

"abc".padStart(3,"a")    //abc

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

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

示例：

第二个参数可以传入任意类型的值。

如果传入的参数和原有的参数加起来还没有第一个参数的length大，那么空缺的位置将会用第二个参数来补全。

如果传入的参数是 [] 那么将会原样输出

如果传入的参数是 {} 那么浏览器会将 {} 解析成 [object Object] 来输出。

'abc'.padStart(8, false);    //"falseabc"

'abc'.padStart(8, null);        //"nullnabc"

'abc'.padStart(8, []);        //"abc"

'abc'.padStart(8, {});        //"[objeabc"

'abc'.padStart(15, false);    //"falsefalsefaabc"

 

 padEnd()

和上面的基本都是一样的用法。

唯一不同的点是padStart()是从字符串的前面开始补全， padEnd()是从字符串的后面开始补全

'abc'.padEnd(8, false);        //"abcfalse"

'abc'.padEnd(8, null);        //"abcnulln"

'abc'.padEnd(8, []);           //"abc"

'abc'.padEnd(8, {});            //"abc[obje"

 案例：

每次还要手动计算字符串的长度这样无疑是不好的方法，有解决方法看下面。

// 原本字符串
var str = "abc";
console.log(str.padStart(5,'0'))
//00abc


// 要填充的字符串
var padstr = "xxx";
console.log(str.padStart(padstr.length + str.length,padstr));
//xxxabc;

兼容性：

上面的方法都是es6新增的在IE中是完全不支持的，如果想兼容IE请自行百度，我还没搞懂