ES6語(yǔ)法——字符串的擴(kuò)展

一、ES6 加強(qiáng)了對(duì) Unicode 的支持,正確識(shí)別兩個(gè)字節(jié)組成的字符
????????在ES5中我們知道JavaScript 允許采用\uxxxx形式表示一個(gè)字符,其中xxxx表示字符的 Unicode 碼點(diǎn)。這種表示法只限于碼點(diǎn)在\u0000~\uFFFF之間的字符。超出這個(gè)范圍的字符,必須用兩個(gè)雙字節(jié)的形式表示,但是ES5卻無(wú)法正確的識(shí)別這個(gè)有兩個(gè)字節(jié)組成的字符。ES6中,JavaScript增加了對(duì)超出\u0000~\uFFFFUnicode范圍的字符支持。
????????ES6的解決方法:將這種超過(guò)兩個(gè)字節(jié)的組成的單個(gè)字符的碼點(diǎn)放在一對(duì)花括號(hào)里面就可以正確的識(shí)別

二、codePointAt(index)方法
????????JavaScript 內(nèi)部,字符以 UTF-16 的格式儲(chǔ)存,每個(gè)字符固定為2個(gè)字節(jié)。對(duì)于那些需要4個(gè)字節(jié)儲(chǔ)存的字符(Unicode 碼點(diǎn)大于0xFFFF的字符), JavaScript 會(huì)認(rèn)為它們是兩個(gè)字符。這里解釋了為什么"??"這個(gè)字符調(diào)用length屬性的時(shí)候,返回的長(zhǎng)度是2了
? ? ? ?在ES5為我們提供的charCodeAt(index)方法只能分別返回"??"前兩個(gè)字節(jié)和后兩個(gè)字節(jié)的值,而charAt(index)方法無(wú)法正常讀取這個(gè)字符(出現(xiàn)了亂碼)。ES6 提供了codePointAt(index)方法,能夠正確處理 4 個(gè)字節(jié)儲(chǔ)存的字符,返回一個(gè)字符的碼點(diǎn)。

????????值得注意的是:
? ? ? ? (1)codePointAt(index)方法識(shí)別大于兩個(gè)Unicode節(jié)點(diǎn)編碼的字符的時(shí)候,識(shí)別前兩個(gè)字節(jié)的時(shí)候會(huì)直接將這個(gè)四個(gè)字節(jié)的字符的碼值返回,識(shí)別后面的字節(jié)的碼值和charCodeAt(index)返回的結(jié)果一致
????????(2)codePointAt方法會(huì)正確返回 32 位的 UTF-16 字符的碼點(diǎn)。對(duì)于那些兩個(gè)字節(jié)儲(chǔ)存的常規(guī)字符,它的返回結(jié)果與charCodeAt方法相同(這就導(dǎo)致了下面所說(shuō)的那種情況)。
? ? ? ? (3)通過(guò)for......of? 循環(huán)解決codePointAt(index)在傳入正確的位置索引的時(shí)候,返回的結(jié)果有偏差的問(wèn)題-----原理就是for .......of 循環(huán)可以正確的識(shí)別 32 位的 UTF-16 字符

?三、String.fromCodePoint(numX,numX,...,numX)方法(numX為Unicode值)
????????ES5 提供String.fromCharCode(numX,numX,...,numX)方法,用于從碼點(diǎn)返回對(duì)應(yīng)字符,但是這個(gè)方法不能識(shí)別 32 位的 UTF-16 字符(Unicode 編號(hào)大于0xFFFF)
????????ES6 提供了String.fromCodePoint(numX,numX,...,numX)方法,可以識(shí)別大于0xFFFF的字符,彌補(bǔ)了String.fromCharCode方法的不足。在作用上,正好與codePointAt方法相反。
? ? ? ? 值得注意的是:
? ? ? ? (1)String.fromCodePoint(numX,numX,...,numX),當(dāng)傳入多個(gè)Unicode值的時(shí)候,將會(huì)把結(jié)果合并成一個(gè)字符串返回
????????(2)String.fromCodePoint(numX,numX,...,numX)是定義在String對(duì)象上的方法。而codePointAt(index)是定義在字符串實(shí)例上的方法,這一點(diǎn)要去區(qū)分


四、字符串的遍歷器接口

????????ES6 為字符串添加了遍歷器接口,使得字符串可以被for...of循環(huán)遍歷。

????????除了遍歷字符串,這個(gè)遍歷器大的優(yōu)點(diǎn)是可以識(shí)別大于0xFFFF的碼點(diǎn),傳統(tǒng)的for循環(huán)無(wú)法識(shí)別這樣的碼點(diǎn)。

五、at(index)
????????ES5 對(duì)字符串對(duì)象提供charAt方法,返回字符串給定位置的字符。該方法不能識(shí)別碼點(diǎn)大于0xFFFF的字符。
????????目前JavaScript有一個(gè)提案,提出字符串實(shí)例的at()方法,可以識(shí)別 Unicode 編號(hào)大于0xFFFF的字符,返回正確的字符。(at()方法可以通過(guò)babel-polyfill墊片庫(kù)實(shí)現(xiàn))

六、includes( string), startsWith(string ),endsWith(string )?
????????傳統(tǒng)上,JavaScript 只有indexOf方法,可以用來(lái)確定一個(gè)字符串是否包含在另一個(gè)字符串中(如果存在就返回這個(gè)字符串的位置,不存在的時(shí)候返回 -1 )。
? ??????6.1.ES6 又提供了三種新方法:
????(一)includes(string):返回布爾值,表示是否找到了參數(shù)字符串。
????(二)startsWith(string):返回布爾值,表示參數(shù)字符串是否在原字符串的頭部。
????(三)endsWith(string):返回布爾值,表示參數(shù)字符串是否在原字符串的尾部
????????6.2 關(guān)于第二個(gè)參數(shù)
? ? ? ? (1)這三個(gè)方法都支持第二個(gè)參數(shù),表示開(kāi)始搜索的位置。
? ? ? ? (2)endsWith的行為與其他兩個(gè)方法includes()? startsWith()有所不同。它針對(duì)前n個(gè)字符(開(kāi)區(qū)間,不包括邊界值),而其他兩個(gè)方法針對(duì)從第n個(gè)(閉區(qū)間,包括邊界值)位置直到字符串結(jié)束。
????????(3)注意這三個(gè)方法都是s結(jié)尾

寫(xiě)文章的時(shí)候用美團(tuán)點(diǎn)了一個(gè)外賣(mài),并無(wú)其他含義

七、repeat(number)
? ??????repeat方法返回一個(gè)新字符串,表示將原字符串重復(fù)n次。
? ? ? ? repeat方法參數(shù)可能有下列情況:
? ? ? ? (一)參數(shù)為1,就是返回的新字符串的內(nèi)容就只是重復(fù)源字符串1次
? ? ? ? (二)參數(shù)如果是小數(shù),會(huì)被取整數(shù)部分。
? ? ? ? (三)參數(shù)如果是小于或等于-1的負(fù)數(shù)或者無(wú)窮大Infinity的數(shù)時(shí),會(huì)報(bào)錯(cuò)
? ? ? ? (四)參數(shù)是(-1-0)區(qū)間的小數(shù),repeat()方法會(huì)自動(dòng)轉(zhuǎn)換成-0? 等同于repeat(0)
? ? ? ? (五)參數(shù)是數(shù)字型字符串的話(huà),repeat方法會(huì)自動(dòng)進(jìn)行隱式轉(zhuǎn)換成數(shù)字的
? ? ? ? (六)參數(shù)是NaN的話(huà),等同于repeat(0)

八、padStart(minNumber,string),padEnd(minNumber,string)
? ??????這兩個(gè)API具有字符串補(bǔ)全長(zhǎng)度的功能。如果某個(gè)字符串不夠指定長(zhǎng)度,會(huì)在頭部或尾部補(bǔ)全。padStart( )用于頭部補(bǔ)全,padEnd( )用于尾部補(bǔ)全。
? ??????padStart(minNumber,string)方法和padEnd(minNumber,string)方法一共接受兩個(gè)參數(shù),第一個(gè)參數(shù)用來(lái)指定字符串的最小長(zhǎng)度,第二個(gè)參數(shù)是用來(lái)補(bǔ)全的字符串。可能出現(xiàn)以下情況:
? ? ? ? (1)如果原字符串的長(zhǎng)度,等于或大于指定的最小長(zhǎng)度minNumber,則這兩個(gè)方法都返回原字符串。
? ??????(2)如果用來(lái)補(bǔ)全的字符串與原字符串,兩者的長(zhǎng)度之和超過(guò)了指定的小長(zhǎng)度(minNumber),則會(huì)截去超出位數(shù)的補(bǔ)全字符串。
????????(3)如果省略第二個(gè)參數(shù),默認(rèn)使用空格補(bǔ)全長(zhǎng)度。

? ??????padStart(minNumber,string),padEnd(minNumber,string)的主要用途之一就是為數(shù)值補(bǔ)全指定位數(shù),一般像將月份的補(bǔ)全為03月這樣子

九、模板字符串
? ? ? ? 模板字符串(template string)是增強(qiáng)版的字符串,用反引號(hào)(`)標(biāo)識(shí)。它可以當(dāng)作普通字符串使用,也可以用來(lái)定義多行字符串,或者在字符串中嵌入變量。

? ? ? ? 我們?cè)谑褂媚0遄址倪^(guò)程中需要注意以下方面:
? ? ? ? (一)如果在模板字符串中需要使用反引號(hào),則前面要用反斜杠轉(zhuǎn)義
????????(二)如果使用模板字符串表示多行字符串,所有的空格和縮進(jìn)都會(huì)被保留在輸出之中
? ? ? ? (三)模板字符串中如果要引入變量的話(huà),要用 ${變量名} 這樣的形式引入才可以
? ??????(四)大括號(hào)內(nèi)部可以放入任意的 JavaScript 表達(dá)式,可以進(jìn)行運(yùn)算,以及引用對(duì)象屬性
? ??????(五)如果大括號(hào)中的值不是字符串,將按照一般的規(guī)則轉(zhuǎn)為字符串。比如,大括號(hào)中是一個(gè)對(duì)象,將默認(rèn)調(diào)用對(duì)象的toString方法。
? ??????(六)模板字符串中的${.......}?大括號(hào)內(nèi)部可以放入任意的 JavaScript 表達(dá)式,可以進(jìn)行運(yùn)算、可以引用對(duì)象屬性、可以調(diào)用函數(shù)、可以甚至還能嵌套,甚至還能調(diào)用自己本身。

十、標(biāo)簽?zāi)0?br>? ? ? ?(一)?模板字符串可以緊跟在一個(gè)函數(shù)名后面(只能跟在后面),該函數(shù)將被調(diào)用來(lái)處理這個(gè)模板字符串。這被稱(chēng)為“標(biāo)簽?zāi)0濉惫δ埽╰agged template)。
? ? ? ? (二)標(biāo)簽?zāi)0迤鋵?shí)不是模板,而是函數(shù)調(diào)用的一種特殊形式。“標(biāo)簽”指的就是函數(shù),緊跟在后面的模板字符串就是它的參數(shù)。
? ??????(三)如果模板字符里面有變量,就不是簡(jiǎn)單的調(diào)用了,而是會(huì)將模板字符串先處理成多個(gè)參數(shù),再調(diào)用函數(shù)。下面的tag函數(shù)的第一個(gè)參數(shù)是一個(gè)數(shù)組,該數(shù)組的成員是模板字符串中那些沒(méi)有變量替換的部分。tag函數(shù)的其他參數(shù),都是模板字符串各個(gè)變量被替換后的值。

? ? ? ? ?“標(biāo)簽?zāi)0濉钡囊粋€(gè)重要應(yīng)用,就是過(guò)濾 HTML 字符串,防止用戶(hù)輸入惡意內(nèi)容。以及切換多種語(yǔ)言
十一、String.raw()方法
? ??????ES6為原生String對(duì)象新增raw()屬性。String.raw方法,往往用來(lái)充當(dāng)模板字符串的處理函數(shù),返回一個(gè)斜杠都被轉(zhuǎn)義(即斜杠前面再加一個(gè)斜杠)的字符串,對(duì)應(yīng)于替換變量后的模板字符串。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容