字符串的擴展

文章編寫參考 阮一峯 《ECMAScript 6 入門》

---

1.字符串的遍歷器接口

ES6爲字符串添加了遍歷器接口，使得字符串可以被for…of循環遍歷。

for(let codePoint of "bar"){
    console.log(codePoint);
}
// "b"
// "a"
// "r"

---

2.includes(), startsWith(), endsWith()

傳統上，JavaScript只有【indexOf】方法，可以用來確定一個字符串是否包含在另一個字符串中。ES6又提供了三種新方法。

• includes()：返回布爾值，表示是否找到了參數字符串。
• startsWith()：返回布爾值，表示參數字符串是否在源字符串的頭部。
• endsWith()：返回布爾值，表示參數字符串是否在源字符串的尾部。

var s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

以上三個都支持第二個參數，表示開始搜索的位置（包含起始位置）

var s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

上面代碼表示，使用第二個參數n時，endsWith的行爲與其他兩個方法有所不同。它針對前n個字符，而其他兩個方法針對從第n個位置直到字符串結束。

---

3.repeat( )

repeat方法返回一個【新字符串】，表示將原字符串重複n次。

'x'.repeat(3) // xxx
'hello'.repeat(2) // hellohello
'na'.repeat(0) // ""

如果遇到參數是小數，會被向下取整

'na'.repeat(2.9) // nana

如果repeat的參數是【負數】或者【Infinity】，會報錯。

'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError

但是，如果參數是0到-1之間的小數，則等同於0，因爲會先執行向下取整運算，0到-1之間的向下取整爲0，所以-0也就相當於重複0次

'na'.repeat(-0.9) // ""

參數NaN也相當於0

'na'.repeat(NaN) // ""

如果參數爲字符串，則會被數字，轉換失敗的轉換成0

'na'.repeat('na') // ""
'na'.repeat('3') // nanana

---

4.padStart( ),padEnd( )

ES2017 引入了字符串補全長度的功能。如果某個字符串不夠指定長度，會在頭部或尾部補全。padStart()用於頭部補全，padEnd()用於尾部補全。

'x'.padStart(5, 'ab') // ababx
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

上面代碼中，padStart和padEnd一共接受兩個參數，第一個參數用來指定字符串的【最小長度】，第二個參數是【用來補全的字符串】。

如果原字符串的長度，等於或大於指定的最小長度，則返回原字符串。

'xxx'.padStart(2, 'ab') // xxx
'xxx'.padEnd(2, 'ab') // 'xxx'

如果用來補全的字符串與原字符串，兩者的長度之和超過了指定的最小長度，則會截去超出位數的補全字符串。

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

如果省略第二個參數，默認使用【空格】補全長度

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

padStart的常見用途是爲數值補全指定位數。下面代碼生成10位的數值字符串

'1'.padStart(10, '0') // 0000000001
'12'.padStart(10, '0') // 0000000012
'123456'.padStart(10, '0') // 0000123456

另一個用途是提示字符串格式。

'12'.padStart(10, 'YYYY-MM-DD') // YYYY-MM-12
'09-12'.padStart(10, 'YYYY-MM-DD') // YYYY-09-12

---

5.模板字符串

傳統的JavaScript語言，輸出模板通常是這樣寫的。

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

上面這種寫法相當繁瑣不方便，ES6引入了模板字符串解決這個問題。

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

模板字符串（template string）是增強版的字符串，用反引號（`）標識。它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。

模板字符串中嵌入變量，需要將變量名寫在${}之中

function authorize(user, action) {
  if (!user.hasPrivilege(action)) {
    throw new Error(
      // 傳統寫法爲
      // 'User '
      // + user.name
      // + ' is not authorized to do '
      // + action
      // + '.'
      `User ${user.name} is not authorized to do ${action}.`);
  }
}

大括號內部可以放入任意的JavaScript表達式，可以進行運算，以及引用對象屬性。

var x = 1;
var y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// 3

模板字符串之中還能調用函數。

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

如果大括號中的值不是字符串，將按照一般的規則轉爲字符串。比如，大括號中是一個對象，將默認調用對象的toString方法。

模板字符串甚至還能嵌套。

const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;