Emoji表情输入

常用的utf8编码，最多只会达到3字节，如MySQL的utf8编码。但像emoji表情等Unicode是4字节的（UCS-4），在编码为utf8时，也会占用4字节。在MySQL中，就要使用utf8mb4（most bytes 4）编码，否则插入时会报错。

在某些场景下，我们并不希望文本中出现emoji表情等非常用字符，那么如何过滤呢？

对于字符过滤，一般我们第一个想到的大多是正则表达式。然而，实际使用中，由于emoji表情的不断增加或正则表达式本身的缺陷，往往达不到过滤的效果。

发现问题

欢迎来到王者荣耀😊😊

字符数量10，字符串长度12

一次开发中，使用了el-input的字符数统计属性show-word-limit，发现输入emoji表情统计到的字符数量和实际看到的字符数量不一致。

然后，尝试通过字符串分割成数组，再比较长度，发现str.split('')得到的数组长度和统计到的字符数是一样的，但是和肉眼看到的字符数量还是不一致。

var str = '欢迎来到王者荣耀😊😊'

var arr = str.split('')

console.log(str.length) // 12

console.log(arr.length) // 12

解决问题

那么，是否可以通过字符串的字符数量和字符串长度来判断是否输入了emoji表情呢？

要验证这个问题，关键的是获取到字符串中字符的数量。

那么如何获取字符串中字符的数量呢，通过研究（百度）发现，分割utf8字符串的正确方法是使用 Array.from(str) 而不是str.split('')。

Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

var str = '欢迎来到王者荣耀😊😊'

var arr2 = Array.from(str)

console.log(str.length) // 12

console.log(arr2.length) // 10

一个大胆的猜想

emoji表情判断，可以通过字符串长度和字符数量的比较判断是否存在emoji表情，当长度和数量不一致的时候，有emoji表情。

isEmojiStr(str) { 

    if (typeof (str) === 'string') {

        const arr = Array.from(str); 

        if (str.length !== arr.length) { 

            return true; 

        }

    }

    return false; 

}

参考

# Emoji Unicode Tables

# 深入理解Emoji(一) —— 字符集，字符集编码

# 深入理解Emoji(二) —— 字节序和BOM

# 深入理解Emoji(三) —— Emoji详解