在数据库中支持存储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,你懂的。

推荐阅读更多精彩内容