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

pf_miles 发布于2019-08-29 15:11 / 782人阅读

摘要：我们知道字符集的范围是到其中每个码点对应一个字符如果这个码点还没有设置字符默认会是如果字符在到我们可以轻松地使用转义序列进行表示但是如果范围大于时我们就需要两个这样的序列来表示，也叫代理对例如这显然是非常麻烦的针对新增了一个新的转义序列可以

我们知道unicode字符集的范围是U+0000到U+10ffff
其中每个unicode码点对应一个字符,如果这个码点还没有设置字符,默认会是?
如果字符在U+0000到U+ffff我们可以轻松地使用Unicode转义序列进行表示

"a" === "u0061"

但是如果范围大于U+ffff时我们就需要两个这样的序列来表示，也叫代理对,例如

"?" === "ud83dudebe"

这显然是非常麻烦的
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);

GPU云服务器云服务器 unicode字符集 unicode字符 es6字符串扩展 Unicode值转字符串

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113150.html

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

摘要：我们知道字符集的范围是到其中每个码点对应一个字符如果这个码点还没有设置字符默认会是如果字符在到我们可以轻松地使用转义序列进行表示但是如果范围大于时我们就需要两个这样的序列来表示，也叫代理对例如这显然是非常麻烦的针对新增了一个新的转义序列可以我们知道unicode字符集的范围是U+0000到U+10ffff其中每个unicode码点对应一个字符,如果这个码点还没有设置字符,默认会是?如...

Genng 2019-08-22 16:44 评论0 收藏0
es6让操作unicode字符集更加简单

摘要：我们知道字符集的范围是到其中每个码点对应一个字符如果这个码点还没有设置字符默认会是如果字符在到我们可以轻松地使用转义序列进行表示但是如果范围大于时我们就需要两个这样的序列来表示，也叫代理对例如这显然是非常麻烦的针对新增了一个新的转义序列可以我们知道unicode字符集的范围是U+0000到U+10ffff其中每个unicode码点对应一个字符,如果这个码点还没有设置字符,默认会是?如...

honhon 2019-08-02 10:18 评论0 收藏0
ES6、ES7、ES8、ES9、ES10新特性一览

摘要：规范最终由敲定。提案由至少一名成员倡导的正式提案文件，该文件包括事例。箭头函数这是中最令人激动的特性之一。数组拷贝等同于展开语法和行为一致执行的都是浅拷贝只遍历一层。不使用对象中必须包含属性和值，显得非常冗余。 ES全称ECMAScript，ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMA-417。关于ECMA的最新资讯可以...

Muninn 2019-05-23 16:24 评论0 收藏0
ECMAScript正则表达式6个最新特性

摘要：年，添加了对正则表达式的支持。这篇博客将介绍正则表达式的最新特性模式选项断言规范遗留特性模式选项这个特性已经在正式发布了。参考阮一峰入门博客正则表达式进阶指南关于专注于微信小程序微信小游戏支付宝小程序和实时监控。译者按：还没学好ES6？ECMAScript 2018已经到来啦！原文：ECMAScript regular expressions are getting bett...

kumfo 2019-08-23 11:35 评论0 收藏0
精读《正则 ES2018》

摘要：虽然正则中可以匹配任何字符，但却无法匹配换行符。精读文中列举的四个新特性是加入到正则中的。讨论地址是精读正则如果你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。 1. 引言本周精读的文章是 regexp-features-regular-expressions。这篇文章介绍了 ES2018 正则支持的几个重要特性： Lookbehind assertions - 后行...

JellyBool 2019-08-23 15:16 评论0 收藏0