ES6字符串新增擴展方法以及模板字符串的學習

擴展方法

includes()、startsWith()、endsWith()

ES6以前，咱們只能用indexOf來判斷一個字符串是否包含另一個字符串。如今ES6提供了三個新方法：

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

let str = 'i am test string'

console.log(str.includes('t')) // true
console.log(str.startsWith('t')) // false
console.log(str.startsWith('i')) // true
console.log(str.endsWith('t')) // false
console.log(str.endsWith('g')) // true
複製代碼

這三個方法還接受第二個參數，表示開始搜索的位置, endsWith()特殊一些，它的第二個參數n，表示針對前n個字符串，必定要注意

console.log(str.includes('t', 12)) // false
console.log(str.startsWith('t', 5)) // true
console.log(str.endsWith('g', 6)) // false
複製代碼

repeat()

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

'test'.repeat(2) // "testtest"
複製代碼

特殊狀況須要注意一下：

'test'.repeat(0) // ""
'test'.repeat(2.3) // "repeat"，小數會被向下取整
'test'.repeat(-0.9) // "" , 在0到-1之間的小數，則等同於0
'test'.repeat(NaN) // "" 參數NaN等同於0
'test'.repeat('test') // "", 字符串會先轉換爲數字，字符串會被轉換成NaN，以後會被解析爲0
'test'.repeat(Infinity) // 報錯
'test'.repeat(-1) // 報錯

// 報錯信息
Uncaught RangeError: Invalid count value
    at String.repeat (<anonymous>)
    at <anonymous>:1:8
複製代碼

padStart()、padEnd()

ES6引入了字符串補全長度的功能。

padStart()用於頭部補全，padEnd()用於尾部補全

方法接手兩個參數，第一個參數用來指定字符串的最小長度，第二參數是用來補全的字符串。

'a'.padStart(5, 'b') // "bbbba"
'a'.padEnd(3,'b') // "abb"
複製代碼

特殊狀況：

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

'abcdefg'.padStart(2,'hijk') // "abcdefg"
'abcdefg'.padEnd(2,'hijk') // "abcdefg"
複製代碼

2.若是用來補全的字符串加上原來的字符串的長度之和超出了指定長度，則會截去超出的補全字符串。

'abcdefg'.padStart(10,'hijklmnopq') // "hijabcdefg"
'abcdefg'.padEnd(10,'hijklmnopq') // "abcdefghij"
複製代碼

3.若是用來補全的字符串參數爲空，則用空格來補全

'a'.padStart(10) // " a"
'a'.padEnd(10) // "a "
複製代碼

模板字符串（template string）

傳統的模板是經過字符串拼接生成的，好比：

'i am <div>' + param + '</div>'
複製代碼

在模板繁雜的時候，大量的拼接使得這種處理至關不便利，ES6引入了模板字符串來解決這個問題。 咱們改寫下上面的例子

`i am <div>${param}</div`
複製代碼

使用反引號(`)標識模板字符串，使用${}來包裹變量，${}不只能夠存放變量，也能夠放入任意JavaScript表達式，能夠進行運算，引用屬性對象以及調用方法。

let param = 'daly'
`i am ${param}` // "i am daly"
複製代碼

let x = 1
let y = 2
`result is ${x + y}` // "result is 3"
複製代碼

let obj = {str: 'daly'}
`i am ${obj.str}` // "i am daly"
複製代碼

function test(){ return 'daly' }
`i am ${test()}` // "i am daly"
複製代碼

標籤模板

模板字符串能夠緊跟在函數名後面，該函數將被調用來處理這個模板字符串。

這被稱爲模板標籤（tagged template）

console.log `i am daly` // ["i am daly", raw: Array(1)]
複製代碼

標籤模板是函數調用的一種特殊形式，「標籤」指的就是函數，緊跟在後面的模板字符串就是參數。

可是參數會被拆分紅多個，第一個是一個數組，包含沒有變量的字符串，其餘的參數就是變量被替換後的值。

let a = 'daly'
let b = 'xuess'
function tag(str,...values) {
	console.log(str, ...values)
}
tag `They are ${a} and ${b}` 
// ["They are ", " and ", "", raw: Array(3)] "daly" "xuess"
複製代碼