在数据库中支持存储emoji，并在前端页面中显示

首页图来自 看大图,侵删

引言：在前端开发中，经常用到在数据库中存取emoji表情的情况，但是直接往数据库存放的话经常会在页面中显示成? 或者口口这样。

出现该问题的原因是由于编码方式和字符集的问题，圈子里对这个问题的说明已经非常多了,也可以找谷歌老师或者百度老师，或者看我在最后给出的链接。

解决方案：

• 如果是MySQL，将版本升级到5.5以上，并设置字符集为utf8mb4，这是一个支持存储emoji字节的字符集。
• 如果无法升级或者不方便升级，可以使用替代方案，比如，在存放的时候存放编码后的字段，比如假设我们用'%F0%9F%98%81'这个字符串代表😁，那么，我们可以在数据库中存放'%F0%9F%98%81'这个字段，然后在显示的时候再解码。

方法2在js中使用encodeURI(),decodeURI()函数，在php中使用urlencode()和urldecode()函数。但是注意，这种方法会导致数据库查询结果非常不友好，因为在编码后，其他字符串也会一起编码，这样用SQL语句查询的结果就是一串看不懂的字符编码。

方法2补充：如果要避免数据库显示错乱，也可以用正则表达式仅将emoji编码，这样就能让其他数据显示正常。即：仅编码emoji。

附上emoji的正则表达式：\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]

当然，对于前端only开发者来说，其实不需过多关注数据库的存储方式，我们只需要和后台协调好，知晓返回的数据是否需要解码就可以。ps：这种编码解码方式也经常用于网址参数的编码解码。

附上js的demo:

function uploadEmojiString(str){
    // str：可能含有emoji的字符串
    var pattern = /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/;
    str.replace(pattern,function(emoji){
    // 将emoji编码
        return encodeURI(emoji);
    });
    // str：将str中的字符串编码
    // 此时可以上传至数据库了。
}

function loadEmojiString(){
    var str = '从数据库取到的字符串，可能含有编码后的emoji';
    // 解码emoji
    return decodeURI(str);
}

参考资料

某些资料可能需要科学上网。lantern，shadowsock，你懂的。

• 十分钟搞清字符集和字符编码
• PHP-emoji转换表
• unicode Emoji Symbols
• emoji图标和unicode对应关系
• 谈谈Unicode编码，简要解释UCS、UTF、BMP、BOM等名词
• Emoji表情图标在iOS与PHP之间通信及MySQL存储
• Mysql中校对集utf8_unicode_ci与utf8_general_ci的区别
• Mysql排序规则utf8_unicode_ci与utf8_general_ci的区别
• Unicode Character Sets
• MySQL设置utf8mb4编码
• andriod支持emoji解决方案
• Supporting New Emojis on iOS 6
• 让MySql支持Emoji表情（MySQL中4字节utf8字符保存方法）
• 如何处理emoji等4字节的Unicode字符
• suppoting new emoji for ios6
• UTF-8格式emoji