es6讓操縱unicode字符集越發簡樸

2023年9月24日 291次阅读 来源: changli

我們曉得unicode字符集的局限是U+0000到U+10ffff
个中每一個unicode碼點對應一個字符,假如這個碼點還沒有設置字符,默許會是?
假如字符在U+0000到U+ffff我們能夠輕鬆地運用Unicode轉義序列舉行示意

'a' === '\u0061'

然則假如局限大於U+ffff時我們就需要兩個如許的序列來示意，也叫代辦對,比方

'?' === '\ud83d\udebe'

這顯然是異常貧苦的
es6針對unicode新增了一個新的轉義序列,能夠叫為碼點轉義序列

'?' === '\u{1f6be}'

運用一個大括號圍困一串對應碼點的16進制數值,數值能夠為1到6位數

除了新增示意字符的要領外,也新增了讀取字符碼點的要領
我們曉得js的字符在內存中是按UTF-16對字符舉行編碼,也就是說js操縱字符的基本單位是
2個字節,因而es6之前的要領對操縱由代辦對天生的字符會出現問題,比方chartAt,charCodeAt,length，slice,indexOf等都不能返回你所希冀的效果,比方

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

為了獵取準確的碼點值我們能夠運用 codePointAt

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

經由過程碼點值我們也能夠獵取響應的字符 運用的是fromCodePoint這個靜態要領，傳入的是一個數值

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);
    原文作者：changli
    原文地址: https://segmentfault.com/a/1190000014599487
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞