字符的Unicode表示法

JavaScript允許采用\uxxxx形式表示一個(gè)字符，其中“xxxx”表示字符的碼點(diǎn)。

"\u0061"
// "a"

但是，這種表示法只限于\u0000——\uFFFF之間的字符。超出這個(gè)范圍的字符，必須用兩個(gè)雙字節(jié)的形式表達(dá)。

"\uD842\uDFB7"
// "𠮷"
"\u20BB7"
// " 7"

上面代碼表示，如果直接在\u后面跟上超過(guò)0xFFFF的數(shù)值（比如\u20BB7），JavaScript會(huì)理解成\u20BB+7。由于\u20BB是一個(gè)不可打印字符，所以只會(huì)顯示一個(gè)空格，后面跟著一個(gè)7。

ES6 對(duì)這一點(diǎn)做出了改進(jìn)，只要將碼點(diǎn)放入大括號(hào)，就能正確解讀該字符。

下面代碼中，最后一個(gè)例子表明，大括號(hào)表示法與四字節(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é)儲(chǔ)存的字符，返回一個(gè)字符的碼點(diǎn)。

var s = '𠮷a';
s.codePointAt(0) // 134071
s.codePointAt(1) // 57271
s.codePointAt(2) // 97

codePointAt方法的參數(shù)，是字符在字符串中的位置（從0開(kāi)始）。上面代碼中，JavaScript將“𠮷a”視為三個(gè)字符，codePointAt方法在第一個(gè)字符上，正確地識(shí)別了“𠮷”，返回了它的十進(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的正確位置序號(hào)應(yīng)該是1，但是必須向codePointAt方法傳入2。解決這個(gè)問(wèn)題的一個(gè)辦法是使用for...of循環(huán)，因?yàn)樗鼤?huì)正確識(shí)別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)返回對(duì)應(yīng)字符，但是這個(gè)方法不能識(shí)別32位的UTF-16字符（Unicode編號(hào)大于0xFFFF）。

下面代碼中，String.fromCharCode不能識(shí)別大于0xFFFF的碼點(diǎn)，所以0x20BB7就發(fā)生了溢出，最高位2被舍棄了，最后返回碼點(diǎn)U+0BB7對(duì)應(yīng)的字符，而不是碼點(diǎn)U+20BB7對(duì)應(yīng)的字符。

String.fromCharCode(0x20BB7)
// "ஷ"

ES6提供了String.fromCodePoint方法，可以識(shí)別0xFFFF的字符，彌補(bǔ)了String.fromCharCode方法的不足。在作用上，正好與codePointAt方法相反。

String.fromCodePoint(0x20BB7)
// "𠮷"
String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'
// true

上面代碼中，如果String.fromCodePoint方法有多個(gè)參數(shù)，則它們會(huì)被合并成一個(gè)字符串返回。

注意，fromCodePoint方法定義在String對(duì)象上，而codePointAt方法定義在字符串的實(shí)例對(duì)象上。

字符串的遍歷器接口

ES6為字符串添加了遍歷器接口（詳見(jiàn)《Iterator》一章），使得字符串可以被for...of循環(huán)遍歷。

for (let codePoint of 'foo') {
 console.log(codePoint)
}
// "f"
// "o"
// "o"

at()

目前，ES6有一個(gè)提案，提出字符串實(shí)例的at方法，可以識(shí)別Unicode編號(hào)大于0xFFFF的字符，返回正確的字符。

'abc'.at(0) // "a"
'𠮷'.at(0) // "𠮷"

normalize()

許多歐洲語(yǔ)言有語(yǔ)調(diào)符號(hào)和重音符號(hào)。為了表示它們，Unicode提供了兩種方法。一種是直接提供帶重音符號(hào)的字符，比如Ǒ（\u01D1）。另一種是提供合成符號(hào)（combining character），即原字符與重音符號(hào)的合成，兩個(gè)字符合成一個(gè)字符，比如O（\u004F）和ˇ（\u030C）合成Ǒ（\u004F\u030C）。
這兩種表示方法，在視覺(jué)和語(yǔ)義上都等價(jià)，但是JavaScript不能識(shí)別。

'\u01D1'==='\u004F\u030C' //false
'\u01D1'.length // 1
'\u004F\u030C'.length // 2

上面代碼表示，JavaScript將合成字符視為兩個(gè)字符，導(dǎo)致兩種表示方法不相等。

ES6提供字符串實(shí)例的normalize()方法，用來(lái)將字符的不同表示方法統(tǒng)一為同樣的形式，這稱(chēng)為Unicode正規(guī)化。

'\u01D1'.normalize() === '\u004F\u030C'.normalize()
// true

normalize方法可以接受一個(gè)參數(shù)來(lái)指定normalize的方式，參數(shù)的四個(gè)可選值如下。

• NFC，默認(rèn)參數(shù)，表示“標(biāo)準(zhǔn)等價(jià)合成”（Normalization Form Canonical Composition），返回多個(gè)簡(jiǎn)單字符的合成字符。所謂“標(biāo)準(zhǔn)等價(jià)”指的是視覺(jué)和語(yǔ)義上的等價(jià)。
• NFD，表示“標(biāo)準(zhǔn)等價(jià)分解”（Normalization Form Canonical Decomposition），即在標(biāo)準(zhǔn)等價(jià)的前提下，返回合成字符分解的多個(gè)簡(jiǎn)單字符。
• NFKC，表示“兼容等價(jià)合成”（Normalization Form Compatibility Composition），返回合成字符。所謂“兼容等價(jià)”指的是語(yǔ)義上存在等價(jià)，但視覺(jué)上不等價(jià)，比如“囍”和“喜喜”。（這只是用來(lái)舉例，normalize方法不能識(shí)別中文。）
• NFKD，表示“兼容等價(jià)分解”（Normalization Form Compatibility Decomposition），即在兼容等價(jià)的前提下，返回合成字符分解的多個(gè)簡(jiǎn)單字符。

下面代碼表示，NFC參數(shù)返回字符的合成形式，NFD參數(shù)返回字符的分解形式。
不過(guò)，normalize方法目前不能識(shí)別三個(gè)或三個(gè)以上字符的合成。這種情況下，還是只能使用正則表達(dá)式，通過(guò)Unicode編號(hào)區(qū)間判斷。

'\u004F\u030C'.normalize('NFC').length // 1
'\u004F\u030C'.normalize('NFD').length // 2

includes(), startsWith(), endsWith()

傳統(tǒng)上，JavaScript只有indexOf方法，可以用來(lái)確定一個(gè)字符串是否包含在另一個(gè)字符串中。ES6又提供了三種新方法。

1. includes()：返回布爾值，表示是否找到了參數(shù)字符串。
2. startsWith()：返回布爾值，表示參數(shù)字符串是否在源字符串的頭部。
3. endsWith()：返回布爾值，表示參數(shù)字符串是否在源字符串的尾部。

var s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

這三個(gè)方法都支持第二個(gè)參數(shù)，表示開(kāi)始搜索的位置。

下面代碼表示，使用第二個(gè)參數(shù)n時(shí)，endsWith的行為與其他兩個(gè)方法有所不同。它針對(duì)前n個(gè)字符，而其他兩個(gè)方法針對(duì)從第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ù)，會(huì)被取整。

如果repeat的參數(shù)是負(fù)數(shù)或者Infinity，會(huì)報(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ǔ)全長(zhǎng)度的功能。如果某個(gè)字符串不夠指定長(zhǎng)度，會(huì)在頭部或尾部補(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ù)用來(lái)指定字符串的最小長(zhǎng)度，第二個(gè)參數(shù)是用來(lái)補(bǔ)全的字符串。

模板字符串

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

$('#result').append(`
 There are <b>${basket.count}</b> items
 in your basket, <em>${basket.onSale}</em>
 are on sale!
`);

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論