问:'👩❤️💋👨木马~'.length 是多少呢?'😁❤️'.length 呢?'😄2333'.length 呢?
'👩❤️💋👨木马~'.length // 14
'😁❤️'.length // 4
'😄2333'.length // 6
如果要判断用户输入项的长度,1 个 emoji 算 1 个字的话,就无法直接用 inputValue.length 来判断了。(摔!!!呜呜呜呜想让 "😄2333".length === 5 怎么办 qwq
那么,emoji 是什么呢?为什么会出现这种情况呢?emoji 不也是 Unicode 编码吗?为什么和中文的编码方式不一样()
Unicode(统一码) 里面包括字符集、编码方案等,国际组织制定的可以容纳世界上所有文字和符号的字符编码方案。比如每一个中文都对应着一个 unicode,但!是!emoji 可能对应着 1 个或多个 unicode。
unescape('\u4e2d'.replace(/\\u/gi, '%u')) === '中'
unescape('\ud83d\ude04'.replace(/\\u/gi, '%u')) === '😄'
unescape('\ud83d\udc69\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68'.replace(/\\u/gi, '%u')) === '👩❤️💋👨'
// 与此同时,拼音也会有多个 Unicode 拼合而成的情况
unescape('\u0101'.replace(/\\u/gi, '%u'))
有些 emoji 是多个 emoji Unicode 的组合,比如 👩❤️💋👨 其实是 👩❤️💋👨 Unicode 的组合,比如说
👩❤️💋👨 的 Unicode 是:\ud83d\udc69\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d
\ud83d\udc68
👩❤️💋👨 的 Unicode 是:\ud83d\udc69\u200d\u2764\ufe0f\u200d\ud83d\udc8b\ud83d\udc68
🏳️🌈 的 Unicode 是:\ud83c\udff3\ufe0f\u200d
\ud83c\udf08
🏳️🌈 的 Unicode 是:\ud83c\udff3\ufe0f\ud83c\udf08
🏳️ 是:\ud83c\udff3\ufe0f
🌈 是:\ud83c\udf08
可以看出组合后的 emoji 相当于单独的多个 emoji 组合下最后一个 emoji 前多一个 \u200d
。它是什么呢?
\u200d
在 站长工具 Unicode 编码转换 中打出来看起来像是个空格,但空格的 Unicode 编码应该是 \u0020
。
Zero Width Joiner,unicodeplus 中有介绍如何键入(但我失败了 qwq,成功的小伙伴可以戳我科普一下 orz)
Windows ?: Hold Alt, then type 2 0 0 D. Release Alt.
Mac ?: Hold Alt ⌥, then type 2 0 0 D. Release Alt.
如何判断带有 emoji 字符串的长度
需求是需要提示用户输入了多少字,其中一个 emoji 算 1 个字,但问下来后端同学,如果出现多个 emoji 组合的话,会算多个,也就是真 · 一个 emoji 算一个字
大佬推荐了一种获取字符串内 emoji 个数的方法
const text = '😄23👩❤️💋👨33测试fsdsa'
const regex = /\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?|\p{Emoji_Presentation}|\p{Emoji}\uFE0F/gu
text.match(regex)
另外这里有个个人感觉比较好理解的方案,但需要一个类似字典的东西存放 emoji 中的空白拼接字符(如 \u200d
和 \ufe0f
),可以参考文档。
const text = '😄23👩❤️💋👨33测👨🏼🦳试fsdsa'
const textArr = [...text].filter(i => {
return !i.match(/\u200d|\ufe0f/)
console.log(textArr) // (19) ['😄', '2', '3', '👩', '❤', '💋', '👨', '3', '3', '测', '👨', '🏼', '🦳', '试', 'f', 's', 'd', 's', 'a']
看起来是把空字符串过滤出来了,但组合 emoji 无法用该方法区分,之后遇到会补充。