es6让操作unicode字符集更加简单
我们知道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);