ES6基礎(二)
一、ES6字串擴充套件
字串模板
在傳統的JavaScript語言中,輸出模板通常是這樣寫的。
上面這種寫法繁瑣不方便,於是ES6中引入了字串模板解決這個問題。
用反引號(`)標識。他可以當做普通字串使用,也可以用來定義多行字串,或者在字串中嵌入變數。
如果使用模板字串表示多行字串,所有的空格和縮排都會保留在輸出當中。
上面程式碼中,所有模板字串的空格和換行,都是被保留的,比如<ul>標籤前面會有一個換行。如果你不想要這個換行,可以使用trim方法消除它。
模板字串中嵌入變數,需要將變數名寫在${}之中。
大括號內部可以放入任意JavaScript表示式,可以進行計算,以及引用物件屬性。
模板字元中還能呼叫函式。
如果大括號中的值不是字串,將按照一般的規則轉為字串。比如,大括號中是一個物件,將預設呼叫物件的toString方法。
如果模板字串中的變數沒有宣告,將會報錯。
模板字串甚至還能巢狀。
includes(), startsWith(), endsWith()
在JavaScript中只有indexOf方法,可以用來確定一個字串是否包含在另一個字串中。而ES6中有提供了三種新方法。
--includes():返回布林值,表示是否找到了引數字串。
--startsWith():返回布林值,表示引數數字字串是否在原字串的頭部。
--endsWith():返回布林值,表示引數數字字串是否在原字串的尾部。
這三個方法都是支援第二個引數,表示開始搜尋的位置。
上面程式碼表示,使用第二個引數n時,endsWith的行為與其他兩個方法有所不同。它針對前n個字元,而其他兩個方法針對從第n個位置直到字串結束。
repeat()
repeat方法返回一個新字串,表示將原字串重複n次。
如果引數是小數,那麼會被取整,且不會進行四捨五入,小數點後的書都會被捨棄掉。
如果repeat的引數是負數或者Infinity,會報錯。
但是,如果引數是 0 到 -1 之間的小數,則等同於 0 ,這是因為會先進行取整運算。0 到 -1 之間的小數,取整以後等於 -0,repeat視同為 0 。
引數NaN等同於 0。
如果repeat的引數是字串,則會先轉換成數字。
padStart(),padEnd()
padStart()用於頭部補齊,padEnd()用於尾部補齊。
上面程式碼中,padStart()和padEnd()一共接受兩個引數,第一個引數是字串補全生效的長度,第二個引數是用來補全的字串。
如果 原字串的長度大於或等於最大的長度,則字串不生效,返回原字串。
如果用來補齊的字串與原字串,兩者的長度之和超過了最大長度,則會截去超出部分的補全字串。
如果省略第二個引數,預設使用空格補齊長度。
二、正則的擴充套件
RegExp 建構函式
在ES5中, RegExp 建構函式的引數有兩種情況。
第一種是:引數是字串,這是第二個引數表示正則表示式的修飾符。
第二種是:引數是正則表示式,這時會返回一個原有正則表示式的拷貝。
但是,在ES5中不允許此時使用第二個引數新增修飾符,否則就會報錯。
所以,在ES6中就改變咯額這種行為。如果RegExp建構函式第一個引數是一個正則物件,那麼可以使用第二個引數指定修飾符。而且返回的正則表示式會忽略原有的正則表示式的修飾符,只使用新指定的修飾符。
上面的程式碼中,原有的正則物件的修飾符是ig,他會被第二個引數i覆蓋。
字串的正則方法
字串物件共有4種方法,可以使用正則表示式: match()、replace()、search()、split() 。
這4種方法咋語言內部全部呼叫RegExp的例項方法,從而做到所有與正則相關的方法,全部定義在RegExp物件上。
-
String.prototype.match
呼叫RegExp.prototype[Symbol.match]
-
String.prototype.replace
呼叫RegExp.prototype[Symbol.replace]
-
String.prototype.search
呼叫RegExp.prototype[Symbol.search]
-
String.prototype.split
呼叫RegExp.prototype[Symbol.split]