es6讓操作unicode字符集更加簡單

Genng 發(fā)布于2019-08-22 16:44 / 3221人閱讀

摘要：我們知道字符集的范圍是到其中每個碼點(diǎn)對應(yīng)一個字符如果這個碼點(diǎn)還沒有設(shè)置字符默認(rèn)會是如果字符在到我們可以輕松地使用轉(zhuǎn)義序列進(jìn)行表示但是如果范圍大于時(shí)我們就需要兩個這樣的序列來表示，也叫代理對例如這顯然是非常麻煩的針對新增了一個新的轉(zhuǎn)義序列可以

我們知道unicode字符集的范圍是U+0000到U+10ffff
其中每個unicode碼點(diǎn)對應(yīng)一個字符,如果這個碼點(diǎn)還沒有設(shè)置字符,默認(rèn)會是?
如果字符在U+0000到U+ffff我們可以輕松地使用Unicode轉(zhuǎn)義序列進(jìn)行表示

"a" === "u0061"

但是如果范圍大于U+ffff時(shí)我們就需要兩個這樣的序列來表示，也叫代理對,例如

"?" === "ud83dudebe"

這顯然是非常麻煩的
es6針對unicode新增了一個新的轉(zhuǎn)義序列,可以叫為碼點(diǎn)轉(zhuǎn)義序列

"?" === "u{1f6be}"

使用一個大括號包圍一串對應(yīng)碼點(diǎn)的16進(jìn)制數(shù)值,數(shù)值可以為1到6位數(shù)

除了新增表示字符的方法外,也新增了讀取字符碼點(diǎn)的方法
我們知道js的字符在內(nèi)存中是按UTF-16對字符進(jìn)行編碼,也就是說js操作字符的基本單位是
2個字節(jié),因此es6之前的方法對操作由代理對生成的字符會出現(xiàn)問題,例如chartAt,charCodeAt,length，slice,indexOf等都不能返回你所期望的結(jié)果,例如

"?".length === 2
"?".charCodeAt(0) === 55357

為了獲取正確的碼點(diǎn)值我們可以使用 codePointAt

"?".codePointAt(0) === 128702
128702..toString(16) === "1f6be"

通過碼點(diǎn)值我們也可以獲取相應(yīng)的字符使用的是fromCodePoint這個靜態(tài)方法，傳入的是一個數(shù)值

String.fromCodePoint(0x1f6be) === "?"
String.fromCodePoint(128702) === "?"

利用這個方法我們就可以非常方便地枚舉出全部Unicode字符集對應(yīng)的字符了
我找了一下找到挺多有趣的字符
"?","?","°","±","?","??","?","Ⅸ","?","⒇","?","?","?","?","?","?"
"?","?","?","?","?","?","?","?","?","?","?"

為了正確獲取字符的長度,我們可以利用新增的es6擴(kuò)展運(yùn)算符

[..."?"].length === 1

對于字符的匹配,正則表達(dá)式也增加了/u修飾符

/u{1f6be}/.test("?") === false
/u{1f6be}/u.test("?") === true

可以說es6新增的方法基本上全面考慮到unicode的整個字符集,
下面的方法可以非常方便地獲取整個字符集,如果不怕死機(jī)可以一次全部獲取

  function renderUnicode(min,max) {
        let diff = 1024;
        function render() {
            const ele = document.getElementsByClassName("box")[0];
            const textNode = ele.firstChild;
            let str = ""
            for (let i = min; i < min + diff; i++) {
                str += String.fromCodePoint(i);
            }
            min = min + diff;
            textNode.appendData(str);
            if (min > max) {
                alert("done");
                return;
            }
            requestAnimationFrame(render);
        }
        render();
    }
    renderUnicode(0x0000, 0xffff);//BMP平面
    // renderUnicode(0x10000, 0x1ffff);
    // renderUnicode(0x20000, 0x2ffff);
    // renderUnicode(0x30000, 0x3ffff);
    // renderUnicode(0x40000, 0x4ffff);
    // renderUnicode(0x50000, 0x5ffff);
    // renderUnicode(0x60000, 0x6ffff);
    // renderUnicode(0x70000, 0x7ffff);
    // renderUnicode(0x80000, 0x8ffff);
    // renderUnicode(0x90000, 0x9ffff);
    // renderUnicode(0xA0000, 0xAffff);
    // renderUnicode(0xB0000, 0xBffff);
    // renderUnicode(0xC0000, 0xCffff);
    // renderUnicode(0xD0000, 0xDffff);
    // renderUnicode(0xE0000, 0xEffff);
    // renderUnicode(0xf0000, 0xfffff);
    // renderUnicode(0x100000, 0x10ffff);