您好,登錄后才能下訂單哦!
這篇文章主要介紹了ES6中字符串怎么用,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
字符的Unicode表示法
JavaScript允許采用\uxxxx形式表示一個(gè)字符,其中“xxxx”表示字符的碼點(diǎn)。
"\u0061" // "a"
但是,這種表示法只限于\u0000——\uFFFF之間的字符。超出這個(gè)范圍的字符,必須用兩個(gè)雙字節(jié)的形式表達(dá)。
"\uD842\uDFB7" // "?" "\u20BB7" // " 7"
上面代碼表示,如果直接在\u后面跟上超過0xFFFF的數(shù)值(比如\u20BB7),JavaScript會理解成\u20BB+7。由于\u20BB是一個(gè)不可打印字符,所以只會顯示一個(gè)空格,后面跟著一個(gè)7。
ES6 對這一點(diǎn)做出了改進(jìn),只要將碼點(diǎn)放入大括號,就能正確解讀該字符。
下面代碼中,最后一個(gè)例子表明,大括號表示法與四字節(jié)的UTF-16編碼是等價(jià)的。
"\u{20BB7}" // "?" "\u{41}\u{42}\u{43}" // "ABC" let hello = 123; hell\u{6F} // 123 '\u{1F680}' === '\uD83D\uDE80' // true
有了上述表示法之后,JavaScript共有6種方法可以表示一個(gè)字符。
'\z' === 'z' // true '\172' === 'z' // true '\x7A' === 'z' // true '\u007A' === 'z' // true '\u{7A}' === 'z' // true
codePointAt()
ES6提供了codePointAt方法,能夠正確處理4個(gè)字節(jié)儲存的字符,返回一個(gè)字符的碼點(diǎn)。
var s = '?a'; s.codePointAt(0) // 134071 s.codePointAt(1) // 57271 s.codePointAt(2) // 97
codePointAt方法的參數(shù),是字符在字符串中的位置(從0開始)。上面代碼中,JavaScript將“?a”視為三個(gè)字符,codePointAt方法在第一個(gè)字符上,正確地識別了“?”,返回了它的十進(jìn)制碼點(diǎn)134071(即十六進(jìn)制的20BB7)。在第二個(gè)字符(即“?”的后兩個(gè)字節(jié))和第三個(gè)字符“a”上,codePointAt方法的結(jié)果與charCodeAt方法相同。
codePointAt方法返回的是碼點(diǎn)的十進(jìn)制值,如果想要十六進(jìn)制的值,可以使用toString方法轉(zhuǎn)換一下。
var s = '?a'; s.codePointAt(0).toString(16) // "20bb7" s.codePointAt(2).toString(16) // "61"
實(shí)際上codePointAt方法的參數(shù),仍然是不正確的。上面代碼中,字符a在字符串s的正確位置序號應(yīng)該是1,但是必須向codePointAt方法傳入2。解決這個(gè)問題的一個(gè)辦法是使用for...of循環(huán),因?yàn)樗鼤_識別32位的UTF-16字符。
var s = '?a'; for (let ch of s) { console.log(ch.codePointAt(0).toString(16)); } // 20bb7 // 61
String.fromCodePoint()
ES5提供String.fromCharCode方法,用于從碼點(diǎn)返回對應(yīng)字符,但是這個(gè)方法不能識別32位的UTF-16字符(Unicode編號大于0xFFFF)。
下面代碼中,String.fromCharCode不能識別大于0xFFFF的碼點(diǎn),所以0x20BB7就發(fā)生了溢出,最高位2被舍棄了,最后返回碼點(diǎn)U+0BB7對應(yīng)的字符,而不是碼點(diǎn)U+20BB7對應(yīng)的字符。
String.fromCharCode(0x20BB7) // "?"
ES6提供了String.fromCodePoint方法,可以識別0xFFFF的字符,彌補(bǔ)了String.fromCharCode方法的不足。在作用上,正好與codePointAt方法相反。
String.fromCodePoint(0x20BB7) // "?" String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y' // true
上面代碼中,如果String.fromCodePoint方法有多個(gè)參數(shù),則它們會被合并成一個(gè)字符串返回。
注意,fromCodePoint方法定義在String對象上,而codePointAt方法定義在字符串的實(shí)例對象上。
字符串的遍歷器接口
ES6為字符串添加了遍歷器接口(詳見《Iterator》一章),使得字符串可以被for...of循環(huán)遍歷。
for (let codePoint of 'foo') { console.log(codePoint) } // "f" // "o" // "o"
at()
目前,ES6有一個(gè)提案,提出字符串實(shí)例的at方法,可以識別Unicode編號大于0xFFFF的字符,返回正確的字符。
'abc'.at(0) // "a" '?'.at(0) // "?"
normalize()
許多歐洲語言有語調(diào)符號和重音符號。為了表示它們,Unicode提供了兩種方法。一種是直接提供帶重音符號的字符,比如ǒ(\u01D1)。另一種是提供合成符號(combining character),即原字符與重音符號的合成,兩個(gè)字符合成一個(gè)字符,比如O(\u004F)和ˇ(\u030C)合成ǒ(\u004F\u030C)。
這兩種表示方法,在視覺和語義上都等價(jià),但是JavaScript不能識別。
'\u01D1'==='\u004F\u030C' //false '\u01D1'.length // 1 '\u004F\u030C'.length // 2
上面代碼表示,JavaScript將合成字符視為兩個(gè)字符,導(dǎo)致兩種表示方法不相等。
ES6提供字符串實(shí)例的normalize()方法,用來將字符的不同表示方法統(tǒng)一為同樣的形式,這稱為Unicode正規(guī)化。
'\u01D1'.normalize() === '\u004F\u030C'.normalize() // true
normalize方法可以接受一個(gè)參數(shù)來指定normalize的方式,參數(shù)的四個(gè)可選值如下。
NFC,默認(rèn)參數(shù),表示“標(biāo)準(zhǔn)等價(jià)合成”(Normalization Form Canonical Composition),返回多個(gè)簡單字符的合成字符。所謂“標(biāo)準(zhǔn)等價(jià)”指的是視覺和語義上的等價(jià)。
NFD,表示“標(biāo)準(zhǔn)等價(jià)分解”(Normalization Form Canonical Decomposition),即在標(biāo)準(zhǔn)等價(jià)的前提下,返回合成字符分解的多個(gè)簡單字符。
NFKC,表示“兼容等價(jià)合成”(Normalization Form Compatibility Composition),返回合成字符。所謂“兼容等價(jià)”指的是語義上存在等價(jià),但視覺上不等價(jià),比如“囍”和“喜喜”。(這只是用來舉例,normalize方法不能識別中文。)
NFKD,表示“兼容等價(jià)分解”(Normalization Form Compatibility Decomposition),即在兼容等價(jià)的前提下,返回合成字符分解的多個(gè)簡單字符。
下面代碼表示,NFC參數(shù)返回字符的合成形式,NFD參數(shù)返回字符的分解形式。
不過,normalize方法目前不能識別三個(gè)或三個(gè)以上字符的合成。這種情況下,還是只能使用正則表達(dá)式,通過Unicode編號區(qū)間判斷。
'\u004F\u030C'.normalize('NFC').length // 1 '\u004F\u030C'.normalize('NFD').length // 2
includes(), startsWith(), endsWith()
傳統(tǒng)上,JavaScript只有indexOf方法,可以用來確定一個(gè)字符串是否包含在另一個(gè)字符串中。ES6又提供了三種新方法。
includes():返回布爾值,表示是否找到了參數(shù)字符串。
startsWith():返回布爾值,表示參數(shù)字符串是否在源字符串的頭部。
endsWith():返回布爾值,表示參數(shù)字符串是否在源字符串的尾部。
var s = 'Hello world!'; s.startsWith('Hello') // true s.endsWith('!') // true s.includes('o') // true
這三個(gè)方法都支持第二個(gè)參數(shù),表示開始搜索的位置。
下面代碼表示,使用第二個(gè)參數(shù)n時(shí),endsWith的行為與其他兩個(gè)方法有所不同。它針對前n個(gè)字符,而其他兩個(gè)方法針對從第n個(gè)位置直到字符串結(jié)束。
var s = 'Hello world!'; s.startsWith('world', 6) // true s.endsWith('Hello', 5) // true s.includes('Hello', 6) // false
repeat()
repeat方法返回一個(gè)新字符串,表示將原字符串重復(fù)n次。
參數(shù)如果是小數(shù),會被取整。
如果repeat的參數(shù)是負(fù)數(shù)或者Infinity,會報(bào)錯(cuò)。
'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" 'na'.repeat(0) // "" 'na'.repeat(2.9) // "nana" 'na'.repeat(Infinity) // RangeError 'na'.repeat(-1) // RangeError
padStart(),padEnd()
ES7推出了字符串補(bǔ)全長度的功能。如果某個(gè)字符串不夠指定長度,會在頭部或尾部補(bǔ)全。padStart用于頭部補(bǔ)全,padEnd用于尾部補(bǔ)全。
'x'.padStart(5, 'ab') // 'ababx' 'x'.padStart(4, 'ab') // 'abax' 'x'.padEnd(5, 'ab') // 'xabab' 'x'.padEnd(4, 'ab') // 'xaba'
上面代碼中,padStart和padEnd一共接受兩個(gè)參數(shù),第一個(gè)參數(shù)用來指定字符串的最小長度,第二個(gè)參數(shù)是用來補(bǔ)全的字符串。
模板字符串
模板字符串(template string)是增強(qiáng)版的字符串,用反引號(`)標(biāo)識。它可以當(dāng)作普通字符串使用,也可以用來定義多行字符串,或者在字符串中嵌入變量。
$('#result').append(` There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale! `);
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“ES6中字符串怎么用”這篇文章對大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。