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請自行百度，我還沒搞懂