es6讓操作unicode字符集更加簡(jiǎn)單

honhon 發(fā)布于2019-08-02 10:18 / 3062人閱讀

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

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

"a" === "u0061"

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

"?" === "ud83dudebe"

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

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

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

除了新增表示字符的方法外,也新增了讀取字符碼點(diǎn)的方法
我們知道js的字符在內(nèi)存中是按UTF-16對(duì)字符進(jìn)行編碼,也就是說js操作字符的基本單位是
2個(gè)字節(jié),因此es6之前的方法對(duì)操作由代理對(duì)生成的字符會(huì)出現(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這個(gè)靜態(tài)方法，傳入的是一個(gè)數(shù)值

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

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

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

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

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

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

可以說es6新增的方法基本上全面考慮到unicode的整個(gè)字符集,
下面的方法可以非常方便地獲取整個(gè)字符集,如果不怕死機(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);

云服務(wù)器 GPU云服務(wù)器 unicode字符集 unicode字符 es6字符串?dāng)U展 Unicode值轉(zhuǎn)字符串

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52266.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

honhon

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

如何制作數(shù)碼管顯示程序

閱讀 2335·2021-10-08 10:04
通配符證書有什麼好處？常用通配符SSL證書有哪些？

閱讀 1112·2021-09-03 10:40
Codepen 每日精選（2018-4-14）

閱讀 1160·2019-08-30 15:53
移動(dòng)端解決方案學(xué)習(xí)記錄

閱讀 3317·2019-08-30 13:13
CSS外掛：Sass 之規(guī)則(Rules)和指令(Directives)

閱讀 2934·2019-08-30 12:55
拓端數(shù)據(jù)|避開數(shù)據(jù)海洋的“暗礁”：識(shí)別用戶異常行為

閱讀 2287·2019-08-29 13:21
徹底搞懂js里的__proto__和prototype到底有什么區(qū)別？

閱讀 1364·2019-08-26 12:12
前端硬核面試專題之 HTML 24 問

閱讀 2764·2019-08-26 10:37

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

es6讓操作unicode字符集更加簡(jiǎn)單

相關(guān)文章