ES6--字符串的擴展

最近開發小程序，對應ES6是一個很好的應用機會。如今整理下ES6中字符串類型的一些實用擴展，供你們參考。目前主要是參考阮一峯老師的ECMAScript 6 入門

字符串的遍歷接口

ES6爲字符串添加了遍歷接口，使得字符串能夠被for..of遍歷。

for(let st of 'foo') {
  console.log(st)
}
// 'f'
// 'o'
// 'o'

includes()、startsWith()、endsWith()

ES5中，indexOf()能夠一個字符串是否存在另外一個字符串中。ES6中又提供了三個方法：

1. includes(): 返回布爾值，表示是否找個參數字符串。
2. startsWith(): 返回布爾值，表示參數字符串是否在原字符串的頭部。
3. endsWith(): 返回布爾值，表示參數字符串是否在原字符串的尾部。

let string = 'Hello Clearlove'

string.includes('Clearlove'); // true
string.stattsWith('Hello'); // true
string.endsWith('Clearlove'); // true

這三個方法都支持第二個參數，表示開始搜索的位置：

let string = 'Hello Clearlove'

string.includes('Clearlove', 6); //true
string.starstWith('Hello', 6); false
string.endsWith('Hello', 5); // true

使用第二個參數n時，endsWith()的行爲與其餘兩個方法有所不一樣。它是針對前n個字符，而其餘兩個方法針對從第n個位置直到字符串結束。

repeat

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

'x'.repeat(2); // 'xx'
'Hello'.repeat(2); 'HelloHello'
'na'.repeat(0); ''

若是是小數則會向下取整：

'na'.repeat(2.9); // 'nana'

若是repeat的參數是負數或者Infinity,則會報錯：

'na'.repeat(-1); // RangError
'na'.repeat(Infinity); // RangError

可是，若是參數是0到-1之間的小數，則等同於0，這是由於會先進行取整運算。0到-1之間的小數，取整之後等於-0，repeat視同爲0

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

參數NaN等同於0

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

若是repeat的參數是字符串，則會先轉換成數字。

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

padStart()、padEnd()

字符串自動補充，若是字符串長度不夠指定長度 ，會在頭部或者尾部補全。padStart()用於在頭部補全，padEnd()用於在尾部補全。

`love`.padStart(9, 'Clear'); // 'Clearlove'
'Clear'.padEnd(9, 'love'); // 'Clearlove'

若是原字符串的長度，等於或者大於制定最小長度，則返回原字符串。

'Clearlove'.padStart(5, '12'); // 'Clearlove'

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

'Clearlove'.padEnd(12, '123456'); // 'Clearlove123'

若是省略第二個參數，默認使用空格補全長度。

'Clearlove'.padEnd(10); // 'Clearlvoe '

模板字符串

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

// 普通字符串
`Clearlove is a boy`

// 多行字符串
`Clearlove is
a boy`

// 字符串嵌入變量
let name = 'Clearlove', time = 'today'
`Hello ${name}, how are you ${time}?` // Hello Clearlove, how are you today?

上面代碼中的模板字符串，都是用反引號表示。若是在模板字符串中須要使用反引號，則前面要用反斜槓轉義。

`\`Hello\` Clearlove!` // `Hello` Clearlove

若是使用模板字符串表示多行字符串，全部的空格和縮進都會被保留在輸出之中。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

上面代碼中，全部模板字符串的空格和換行，都是被保留的，好比<ul>標籤前面會有一個換行。若是你不想要這個換行，可使用trim方法消除它。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

模板字符串中嵌入變量，須要將變量名寫在${}之中。大括號內部能夠放入任意的JavaScript表達式，能夠進行運算，以及引用對象屬性，還能調用函數。

String.raw()

String.raw()方法，看成模板字符串的處理函數，返回已替換變量或執行函數後的字符串。若模板字符串中存在一個斜槓，則會被轉義成兩個斜槓。若自己爲兩個斜槓，則不作處理。

let s1 = 'Clear', s2 = 'love'
String.raw`${ s1 + s2 }` // 'Clearlove'

做爲函數調用較少出現，就很少作介紹。