前端使用Unicode小结

最近做到一个有趣的需求，在表格里展示数据所属的国家，那么很快啊，一上来我就想到用 base64 data URL 啊，但是emoji小国旗行不行呢

经过一通百度，原来emoji可不是乱来的啊，他都是有对应的Unicode的，只是在不同平台上显示的样子不同，那么就愉快采用emoji了呀（比base64短呀，有表可查呀 Full Emoji List）

然后怎么让这些小国旗正确的在浏览器上显示呢。。。这就踩了Unicode的坑了

在HTML中，使用字符实体，例如   这个空格大家都认识，但他还有一种用码点的写法   ，所以说，HTML中就是以 & 开头，; 结束，中间写 # 加上码点（10进制数）。但是Unicode一般是写成16进制的，所以网上找到emoji的Unicode，还要加个 x 表示是16进制，例如   其实就还是那个空格。好了，那么我们的国旗呢，Unicode是 U+1F1E8 U+1F1F3 ，所以用在HTML中就是 🇨🇳 了。可是我们Vue项目也不写HTML了呀，那就 v-html 呗

在JS中，使用转义字符，JS默认支持UTF-16编码，例如 '\u597D' 就是中文的“好”字，格式就是 反斜杠 + u + 码点（4位16进制） 。所以我们国旗就写成 '\u1F1E8\u1F1F3' ，哈哈识别不了吧，曾经超过4位的编码就是识别不了的，但是强大的ES6支持了，只需要再包一层大括号，所以正确写法是 '\u{1F1E8}\u{1F1F3}'

在CSS中，也能用，例如伪元素必需的 content 属性，就可以写Unicode字符，而且只需要 反斜杠 + 码点 ，例如我们国旗就是 content: '\1F1E8\1F1F3';

EOF