你真的會(huì)字符串反轉(zhuǎn)、計(jì)算字符串長(zhǎng)度么？

1fe1se 發(fā)布于2019-08-22 11:07 / 1342人閱讀

摘要：你真的會(huì)字符串反轉(zhuǎn)計(jì)算字符串長(zhǎng)度么字符串編碼問(wèn)題一個(gè)常見(jiàn)的問(wèn)題如何將字符串反轉(zhuǎn)一個(gè)常見(jiàn)的解答再如，如何得到一個(gè)字符串的長(zhǎng)度答這些答案都不是完全正確，或者說(shuō)并不是對(duì)于所有的字符都是適用的，例如這其中的原因涉及到了的字符串編碼。

你真的會(huì)字符串反轉(zhuǎn)、計(jì)算字符串長(zhǎng)度么？ Javascript 字符串編碼 問(wèn)題

一個(gè)常見(jiàn)的問(wèn)題：如何將字符串反轉(zhuǎn)?

一個(gè)常見(jiàn)的解答：

"abcd".split("").reverse().join("") // dcba

再如，如何得到一個(gè)字符串的長(zhǎng)度？

答：

"abcd".length // 4

這些答案都不是完全正確，或者說(shuō)并不是對(duì)于所有的字符都是適用的，例如：

"a?bc".split("").reverse().join("")  cb??a
"a?bc".lenght // 5

"aa?bc".split("").reverse().join("")  cb?aa
"aa?bc".length // 5

這其中的原因涉及到了 Javascript 的字符串編碼。

Unicode 及編碼

Unicode 是一套包含了人類所有的字符、編碼、展示的標(biāo)準(zhǔn)。

Unicode 對(duì)于每一個(gè)字符（character）給了唯一的數(shù)字標(biāo)示，稱為「代碼點(diǎn)」（code point）。也就是說(shuō) Unicode 利用一個(gè)抽象的數(shù)字，即 code point 來(lái)代表字符。Unicode 定義了 1,114,112 個(gè) code point，十六進(jìn)制為 0 到 10FFFF，一般的表示方式為「U+」開(kāi)頭，后面接十六進(jìn)制表示的 code point，例如：「A」的 code point 為 U+0041。¹

在實(shí)際的使用、傳輸 Unicode 中為了減少數(shù)據(jù)大小等需求，一般會(huì)將 code point 編碼（encoding）。一般的 encoding 方式為「UCS-2」、「UTF-16」、「UTF-8」。

UCS-2：用 16 bit 來(lái)表示 code point?，F(xiàn)在 code point 的范圍已經(jīng)超越了 16 bit 可以表示的了。

UTF-16：對(duì)于可以使用 16 bit 范圍內(nèi)的 code point，就與 UCS-2 相同；否則：

code point 減 0x010000

結(jié)果前 10 bit 加 0xD800，后 10 bit 加 0xDC00

這樣就會(huì)得到兩個(gè) 16 bit 的結(jié)果，范圍分別為：0xD800 - 0xDBFF，和 0xDC00 - 0xDFFF，這兩個(gè)值就代表了相應(yīng)的 code point，一般稱這兩個(gè)值為「surrogate pairs」。

Unicode 標(biāo)準(zhǔn)保證了所有的 code point 都可以用 UTF-16 表示。

UTF-8：

code point 小于 0x7F，則編碼為其本身。

code point 大于 0x7F 小于 0x7FF，編碼為 110+code point 前五位，10+code point 剩下的。

code point 大于 0x7FF 小于 0xFFFF，編碼為 1110+code point 前四位，10+code point 剩下的。

剩下的 code point 編碼為 11110+code point 前三位，10+code point 剩下的六位。

術(shù)語(yǔ)

Unicode 中有很多概念需要厘清，和本文關(guān)系不大，但是對(duì)于更好的理解編碼、或者后續(xù)的更深入的學(xué)習(xí)也是有好處的。

character：

The smallest component of written language that has semantic value; refers to the abstract meaning and/or shape, rather than a specific shape (see also glyph), though in code tables some form of visual representation is essential for the reader’s understanding. 。

grapheme：

A minimally distinctive unit of writing in the context of a particular writing system

例如，英語(yǔ)中的 和，就是兩種不同的grapheme；和 <ɑ> 就是同一個(gè) grapheme，是字母 a 不同表示。

一個(gè) grapheme 可以用一個(gè)或多個(gè) code point 表示，例如「?」的 code point 為 U+0063 U+0327

String.fromCodePoint(0x0063, 0x0327); // ?

多個(gè) grapheme 也可能只有一個(gè) code point 表示，例如「?」的 code point 為 U+FDFA，但是「?」是有多個(gè) grapheme 組成的。

Sting.fromCodePoint(0xFDFA); // ?

glyph：對(duì)于 grapheme 的可視化的表示。

可以看出，我們一般理解中，「字符」都是為「grapheme」；「字體」、「字號(hào)」等都是「glyph」。
原因
ECMAScript 對(duì)于字符的編碼方式并沒(méi)有嚴(yán)格的約定，但是大部分引擎的實(shí)現(xiàn)都是 UTF-16，但是，Javascript 對(duì)于一個(gè)字符的定義（注意和 Unicode 中「character」的區(qū)別）：

the word “character” will be used to refer to a 16-bit unsigned value used to represent a single 16-bit unit of text ²

，不嚴(yán)格的說(shuō)字符串就是一個(gè)個(gè) 16 bit 字符組成的串（從這個(gè)角度來(lái)說(shuō)又和 UCS-2 很相似），也稱為（code units）。

"a?bc"[0] // a "a?bc"[1] // ? "a?bc"[2] // ? "a?bc"[3] // b "a?bc"[4] // c "aa?bc"[0] // a "aa?bc"[1] // a "aa?bc"[2] // ? "aa?bc"[3] // b "aa?bc"[4] // c

「?」的 code point 長(zhǎng)度大于 16 bit 的使用 UTF-16 的「surrogate pairs」即，兩個(gè) 16 bit 來(lái)表示，但同時(shí)，內(nèi)部的很多處理都是按照字符（16 bit）, 例如：

"a?bc".length === 5

所以就產(chǎn)生了上面字符串反轉(zhuǎn)的問(wèn)題：

String.fromCodePoint(0xD83D, 0xDCA9) ?

將 0xD83D 0xDCA9 反轉(zhuǎn)為 0xDCA9 0xD83D 導(dǎo)致錯(cuò)誤的字符串。

「a?」則是由字符「a」和一個(gè) combining marks 「 ?」組合成的一個(gè)字符：

String.fromCodePoint(0x0061, 0x0303) a?

類似的將其按照 16 bit 反轉(zhuǎn)后就會(huì)有問(wèn)題。
解答
根據(jù) UTF-16 對(duì)于「surrogate pairs」的定義和「combining marks」的 code point 位置，我們可以自己處理字符串反轉(zhuǎn)的問(wèn)題，

以「surrogate pairs」為例：

const regexSurrogatePair = /([uD800-uDBFF])([uDC00-uDFFF])/g const reverse = (string) => { return string.replace(regexSurrogatePair, ($0, $1, $2) => { return $2 + $1 // 先將「surrogate pairs」反轉(zhuǎn) }).split("").reverse().join("") } reverse("a?bc") // cb?a

更全面的庫(kù) esrever。

而對(duì)于「長(zhǎng)度」問(wèn)題：

[..."a?bc"].length // 4

或

let count = 0 for (let codePoint of "a?bc") { count++ } count // 4

因?yàn)?b>String.prototype[@@iterator]()是遍歷的 code point。

總結(jié)

Javascript 字符串對(duì)外并沒(méi)有暴露 code point ，而是以 16 bit 為單位（UCS-2）提供，導(dǎo)致了 code point 長(zhǎng)度大于 16 bit 的字符（non-BMP）在某些操作上會(huì)有問(wèn)題（反轉(zhuǎn)、取長(zhǎng)度），所以在對(duì)于這種字符就需要特別處理。

https://en.wikipedia.org/wiki... ?

http://es5.github.io/x6.html#x6 ?