当前位置: 首页 > Web前端 > CSS

es6让操作unicode字符集更简单

时间:2023-03-30 16:06:35 CSS

我们知道unicode字符集的范围是从U+0000到U+10ffff,其中每个unicode码位对应一个字符。如果代码点没有设置字符,默认是?如果字符在U+0000到U+ffff之间我们可以很方便的用Unicode转义序列来表示'a'==='\u0061'但是如果范围大于U+ffff,我们就需要两个这样的序列来表示,也称为代理对,例如“?”==='\ud83d\udebe'这显然很麻烦。ES6为unicode增加了一个新的转义序列,可以称为代码点转义序列'?'==='\u{1f6be}'使用大括号括起codepoint对应的一串16进制值,值可以是1到6位数字另外增加一个表示字符的方法,一个读取字符的方法还添加了代码点。我们知道js字符是通过UTF-16编码字符存储在内存中的,也就是说js操作字符的基本单位是2个字节,所以es6之前的方法操作代理对生成的字符会有问题,比如chartAt,charCodeAt,length,slice,indexOf不能返回你期望的结果,例如'?'.length===2'?'.charCodeAt(0)===55357为了得到正确的代码点值我们可以使用codePointAt'?'.codePointAt(0)===128702128702..toString(16)==='1f6be'通过码点值,我们也可以使用静态方法fromCodePoint获取对应的字符,输入为avalueString.fromCodePoint(0x1f6be)==="?"String.fromCodePoint(128702)==="?"利用这个方法,我们可以很方便的枚举所有Unicode字符集对应的字符。我搜索了一下,发现了很多有趣的字符'?','?','°','±','?','??','?','Ⅸ','?','⒇','?','?','?','?','?','?''?','?','?','?','?','?','?','?','?','?','?'为了正确获取字符的长度,我们可以使用新加入的es6扩展操作符[...'?'].length===1为字符匹配,正则表达式还要加上/u修饰符/\u{1f6be}/.test('?')===false/\u{1f6be}/u.test('?')===true可以说es6的新方法基本兼顾了unicode的整个字符集。下面的方法可以很方便的获取到整个字符集,如果不怕崩溃的话可以一下子获取到。functionrenderUnicode(min,max){letdiff=1024;functionrender(){constele=document.getElementsByClassName('box')[0];consttextNode=ele.firstChild;让str=''for(leti=min;i最大){警报('完成');返回;}requestAnimationFrame(渲染);}使成为();}renderUnicode(0x0000,0xffff);//BMP平面//renderUnicode(0x10000,0x1ffff);//renderUnicode(0x20000,0x2ffff);//renderUnicode(0x30000,0x3ffff);//renderUnicode(0x40000,0x4ffff);//renderUnicode(0x50000,0x5ffff);//renderUnicode(0x60000,0x6ffff);//使成为统一码(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);