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

pf_miles 發(fā)布于2019-08-29 15:11 / 810人閱讀

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

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

"a" === "u0061"

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

"?" === "ud83dudebe"

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

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

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

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

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

為了獲取正確的碼點值我們可以使用 codePointAt

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

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

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

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

為了正確獲取字符的長度,我們可以利用新增的es6擴展運算符

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

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

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

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

  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);

GPU云服務器云服務器 unicode字符集 unicode字符 es6字符串擴展 Unicode值轉(zhuǎn)字符串

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113150.html

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

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

Genng 2019-08-22 16:44 評論0 收藏0
es6讓操作unicode字符集更加簡單

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

honhon 2019-08-02 10:18 評論0 收藏0
ES6、ES7、ES8、ES9、ES10新特性一覽

摘要：規(guī)范最終由敲定。提案由至少一名成員倡導的正式提案文件，該文件包括事例。箭頭函數(shù)這是中最令人激動的特性之一。數(shù)組拷貝等同于展開語法和行為一致執(zhí)行的都是淺拷貝只遍歷一層。不使用對象中必須包含屬性和值，顯得非常冗余。 ES全稱ECMAScript，ECMAScript是ECMA制定的標準化腳本語言。目前JavaScript使用的ECMAScript版本為ECMA-417。關于ECMA的最新資訊可以...

Muninn 2019-05-23 16:24 評論0 收藏0
ECMAScript正則表達式6個最新特性

摘要：年，添加了對正則表達式的支持。這篇博客將介紹正則表達式的最新特性模式選項斷言規(guī)范遺留特性模式選項這個特性已經(jīng)在正式發(fā)布了。參考阮一峰入門博客正則表達式進階指南關于專注于微信小程序微信小游戲支付寶小程序和實時監(jiān)控。譯者按：還沒學好ES6？ECMAScript 2018已經(jīng)到來啦！原文：ECMAScript regular expressions are getting bett...

kumfo 2019-08-23 11:35 評論0 收藏0
精讀《正則 ES2018》

摘要：雖然正則中可以匹配任何字符，但卻無法匹配換行符。精讀文中列舉的四個新特性是加入到正則中的。討論地址是精讀正則如果你想?yún)⑴c討論，請點擊這里，每周都有新的主題，周末或周一發(fā)布。 1. 引言本周精讀的文章是 regexp-features-regular-expressions。這篇文章介紹了 ES2018 正則支持的幾個重要特性： Lookbehind assertions - 后行...

JellyBool 2019-08-23 15:16 評論0 收藏0