# String Method
# PadStart & PadEnd
string.padStart(maxLength [, fillString]);
string.padEnd(maxLength [, fillString]);
2
語法：
maxLength- 字串的最大長度fillString- 重複的填滿字串
String.prototype.padStart() 是將重複的 fillString 字串加在原字串的前面，而 String.prototype.padEnd() 是加在原字串的後面。
'18'.padStart(4, '0'); // "0018"
'18'.padEnd(4, '0'); // "1800"
'x'.padStart(4, 'ab'); // "abax"
'x'.padEnd(4, 'ab'); // "xaba"
2
3
4
5
# maxLength
若原字串的 length >= 第一個參數的值 (即 maxLength )，則會回傳 原字串：
'1234'.padStart(2, '0'); // "1234"
'1234'.padEnd(2, '0'); // "1234"
2
# fillString
若不使用第二個參數 (即 fillString )，預設會是 " " (U+0020)，也就是 space：
'18'.padStart(4); // " 18"
'18'.padEnd(4); // "18 "
2
若第二個參數為 '' (空字串)，會回傳原字串：
'18'.padStart(4, ''); // "18"
'18'.padEnd(4, ''); // "18"
2
# String.prototype.match()
若在使用的 RegExp 沒有設定 global flag，就只能取得第一個 capture group、index、input 和 groups 這些資訊：
const string = 'JavaScript ES7 ES8 ES9 ECMAScript';
const pattern = /(ES(\d+))/;
string.match(pattern);
// ["ES7", "ES7", "7", index: 0, input: "ES7 ES8 ES9 ECMAScript", groups: undefined]
2
3
4
5
若有 global flag 不是取得所有 capture group 和其他資訊，而是只能取得所有 match 到的字串：
const string = 'JavaScript ES7 ES8 ES9 ECMAScript';
const pattern = /(ES(\d+))/g;
string.match(pattern);
// ["ES7", "ES8", "ES9"]
2
3
4
5
如果要詳細一點的資訊，可以使用 String.prototype.matchAll()。
# String.prototype.replace()
例如：將 ES7 轉成 ES2016，ES8 轉成 ES2017，ES9 轉成 ES2018，只有前綴 ES 後面加上數字字元才能轉換：
const string = 'ES7 ES8 ES9 ECMAScript';
const pattern = /(ES(\d+))/g;
const newString = string.replace(pattern, function(
matched,
position1,
position2
) {
const version = position2;
return `ES${2009 + Number(version)}`;
});
// ES2016 ES2017 ES2018 ECMAScript
2
3
4
5
6
7
8
9
10
11
12
13
補充
String.prototype.replace() 的第二個參數可以是字串，或是 callback function，而 callback function 會有多個參數，包括：matched (match 到的字串)、positionN (第幾個 capture group)、index (match 到字元的 index) 和 input (正在 match 的整個字串)。
# String.prototype.replaceAll()
替換全部符合條件的字串至指定的字串。
const query = 'q=query+string+parameters';
query.replaceAll('+', ' ');
// "q=query string parameters"
2
3
4
與 String.prototype.replace 的比較：
| Methods |
|
|
|---|---|---|
replace() | 只會替換第一個 searchValue | 只會替換第一個 searchValue |
replaceAll() | 替換所有的 searchValue | 會拋出 TypeError，因要避免與 replaceAll() 的行為不符合 (即不是全部替換) |
# String.prototype.matchAll()
const string = 'ES7 ES8 ES9 ECMAScript';
const pattern = /(ES(\d+))/g;
const matches = string.matchAll(pattern); // RegExpStringIterator {}
for (const match of matches) {
console.log(match);
}
2
3
4
5
6
7
8
或使用 spread property 將 RegExpStringIterator 轉為陣列：
const matches = [...string.matchAll(pattern)];
# 參考
padStart & padEnd (opens new window)