es6让操作unicode字符集更加简单

2024年5月26日 96次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞