ES6中字符串的擴展

includes(),startsWith(),endsWith()

傳統上，JavaScript只提供了indexOf方法用來肯定一個字符串中是否包含另外一個字符串。ES6又提供了3種新方法。

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

const s = 'hello world';
s.startsWith('hello') // true
s.endsWith('world') // true
s.includes('o') // true
複製代碼

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

const s = 'hello world';
s.startsWith('world', 6) // true
s.endsWith('hello',5) // true
s.includes('hello',6) // false
複製代碼

上面的代碼表示，endsWith第二個參數的意義與其餘兩個不一樣，endsWith第二個參數的意義是針對前n個字符串，其餘兩個則針對從第n個位置到字符串結尾之間的字符串。

repeat()

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

'x'.repeat(3) // '333'
'hello'.repeat(2) // 'hellohello'
'na'.repeat(0) // ''
複製代碼

參數若爲小數，會被取整。若爲負數或者Infinity會報錯（0到-1之間的小數比較特殊，會被取整爲-0運算，repeat視爲0）。若爲NAN等同於0。若參數爲字符串會先轉換成數字

'na'.repeat(2.9) // nana
'na'.repeat(Infinity) // RangeError
'na'.repeat(-1)  // RangeError
'na'.repeat(-0.9) // ''
'na'.repeat(NAN) // ''
'na'.repeat('na') // ''
'na'.repeat('3') // 'nanana'
複製代碼

padStart(),padEnd()

ES2017引入了字符串不全長度的功能，若是某個字符串不夠指定長度，會在頭部或尾部自動補全。（我我的真的是太心水這倆功能了！）

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
複製代碼

上面的代碼中，這倆方法分別接受兩個參數，第一個參數用來指定字符串的最小長度，第二個參數則是用來補全的字符串。

若是原字符串的長度大於或等於第一個參數，則返回原字符串。
若是用來補全的字符串與原字符串之和大於指定的最小長度，則截去超出的補全字符串。
若省略第二個參數，則會用空格來補全

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
'abc'.padStart(10, '123456789') // '1234567abc'
'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"
複製代碼

模板字符串

傳統的JavaScript輸出模板一般這樣寫：

$('#reuslt').append(
'There are <b>' + basket.count + '</b>' +
'items in your basket,' +
'<em>' + basket.onSale +
'</em> are on saole!' 
)
複製代碼

這種寫法真是繁瑣又不方便，ES6引入了模板字符串來解決這個問題

$('#reuslt').append(
` There are <b> ${basket.count}</b> items in your basket, <em> ${ basket.onSale} </em> are on saole! `
)
複製代碼

一下清爽了不少。模板字符串是加強版的字符串，用反引號（`）標識。它能夠做爲普通字符串，也能夠用來定義多行字符串， 或者在字符串中嵌入變量。但請注意，若使用模板字符串表示多行字符串，全部空格與縮進都會被保留在輸出中，若不想要這些，可使用trim方法消除

$('#list').html(
` <ul> <li>first</li> <li>second</li> </ul> `
).trim()
複製代碼

在模板字符串中嵌入變量，只須要將變量名寫在${}中便可，而且大括號內能夠聽任意的JavaScript表達式，也能夠進行運算，以及引用對象屬性，甚至能夠調用函數

const x = 1;
const y = 2;
const z = `${x} + ${y} = ${x + y}` // 1 + 2 = 3

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

function fn() {
    return 'hello world'
};
`foo ${fn()} bar` // foo hello world bar
複製代碼

若是大括號內的值不是字符串，則按通常規則轉換爲字符串。

模板字符串還能夠嵌套使用哦

const demo = ` ${[1,2,3,4].map(item => { return `${item}test` }).join(';')} `
// 1test;2test;3test;4test
複製代碼

若是須要引用模板字符串自己，能夠像這樣寫：

// 方法一
let str = 'return ' + '`hello ${name}!`';
let func = new Function('name', str);
func('Jack') // 'hello Jack'
// 方法二
let str = '(name) => `hello ${name}`';
let func = eval.call(null, str);
func('Jack')  // 'hello Jack'
複製代碼

總結

本文簡單介紹了ES6中字符串的一些擴展方法，在平常開發中簡直不要太好使，everybody都用起來哦！ 文中內容多摘自阮一峯老師的《ES6標準入門》