表情符号选择器：搜索并复制表情
包含 3,700+ 个 Unicode 15.1 表情的选择器。按名称搜索、浏览 9 个分类、选择肤色，点击即可复制。
什么是表情符号选择器？
我做这个选择器，是因为厌烦了打开系统表情面板就只是为了找那五张相同的笑脸,结果还要滑动两分钟。输入、点击、粘贴——整个流程就这样。数据集是 Unicode 15.1（3,700 多个表情），分成九个分类，搜索框同时匹配名称和关键词,人物表情提供六种 Fitzpatrick 肤色,还有一个会记住你这次会话里复制过什么的"最近"行。
主要功能
数据集是 Unicode 15.1——直到 2023 年新增的每一张脸、每只手、每种食物、每面旗帜和每个符号,直接来自标准。九个分类按 Unicode 联盟的定义来:笑脸与情感、人物与身体、动物与自然、食物与饮料、旅行与地点、活动、物品、符号、旗帜。"最近"行紧挨在分类按钮旁边,记录会话期间你复制过的内容——保存在 localStorage 的 RECENT_EMOJIS_KEY 下,上限为 MAX_RECENT_EMOJIS 条。
搜索同时查询表情的名称和关键词列表,所以输入 heart 不仅返回 ❤️,还会带出 💛、💚、💙、💘。肤色使用 Fitzpatrick 量表(默认 + 五种修饰符);选中一种就会作用于所有支持修饰符的人物表情,而 hasSkinTone === false 的表情(物品、旗帜、食物)会忽略选择。点击表情会写入剪贴板,在格子上闪一个 1.5 秒的绿色对勾覆盖层,并弹出一个提示——三层反馈,因为剪贴板写入很容易被忽略。
栅格是响应式的:手机屏幕 8 列、平板 10 列、桌面 12 列。高度固定为 400px,较大的分类用纵向滚动来承载。
怎么使用
打开即将推出: 表情符号选择器——它从"笑脸与情感"开始。点其他任何分类按钮就能切换。如果想要肤色,在点击表情之前,先在分类上方那一排六个挥手按钮里选一个;选定的肤色会在复制时套用,所以选了中等肤色再点 👋,剪贴板里就是 👋🏽。叫得出名字的内容,搜索比滑动更快:输入 coffee,☕、🧋 立刻浮出来。清空输入框就回到分类浏览。
"最近"行(时钟图标,分类栏最左)按复制顺序保留这次会话的历史记录。"最近"存的是不带肤色修饰符的基础表情——你当前选定的肤色会在复制时再次套用,所以切换肤色不会打乱历史。
实用示例
写一条 Slack 上的发版消息:
搜索:fire → 点 🔥
搜索:rocket → 点 🚀两次复制都进入"最近",下条消息可以接着用。
不记得国家旗帜在哪一行也能选出来:
分类:旗帜 → 搜索:brazil → 点 🇧🇷让一条消息里的肤色保持一致:
肤色:深色(第 5 个按钮)→ 点 👍、🙏、🤝
剪贴板依次得到 👍🏿 → 🙏🏿 → 🤝🏿提示与最佳实践
肤色和分类的选择保存在组件状态里,可以从预设(高级会员功能)恢复——保存的预设会同时记录 selectedSkinTone 和 selectedCategory。
搜索没有相关性排序。结果按数据集自然顺序输出,所以 heart 或 face 这类宽泛词会返回很多;anguished 这类窄词只返回一两个。如果搜索为空,试试同义词:用 sob 代替 cry、用 grin 代替 big smile、brown 出不来时试 poop。数据集的名称是正式的 Unicode 名称,不一定和口语说法一致。
肤色修饰符只对 hasSkinTone === true 的表情生效。旗帜、食物、物品、符号无论选哪种肤色都保持黄色。
常见问题与排查
复制了好几次,"最近"还是空的。 列表是从 localStorage 读取的。隐私/无痕窗口和禁用了 localStorage 的浏览器不会持久化——本次会话的复制仍然在内存里,但刷新就会重置。
粘贴出来的表情显示成方框或问号。 接收的应用或平台不支持那个 Unicode 15.1 码点。2022–2023 年新增的表情可能在旧版本 Android、旧操作系统或没有更新表情字体的应用里渲染不出来。2015–2019 年的老表情各处都能用。
提示说"已复制",但剪贴板里的肤色不对。 选中了肤色修饰符。点最左边(默认)的肤色按钮去掉修饰符,然后再复制一次。
隐私与安全
搜索、分类筛选、肤色套用和剪贴板写入都在本地运行。完整的表情数据集随页面 JavaScript 一起打包。任何查询、复制的字符和使用数据都不会被送往任何地方。"最近"使用的表情只存在 localStorage 里,留在你的设备上。首次加载之后,选择器可以离线使用。
常见问题
肤色选择是怎么工作的?
Unicode 中的肤色使用 Fitzpatrick 量表的修饰符码点(U+1F3FB 至 U+1F3FF),附在基础表情码点之后。选择器调用 applySkintone(emoji.emoji, selectedSkinTone),在表情的 hasSkinTone 标志为 true 时拼接修饰符。不支持肤色的表情会原样复制。
"最近"最多能保存多少个表情?
"最近"列表上限为 MAX_RECENT_EMOJIS 条。新复制的会推到最前面;到达上限时最旧的会被丢掉。重复复制同一个表情会把它移到最前面,而不是产生重复。
能用英语以外的语言搜索吗?
不行。搜索查询的是数据集里的名称和关键词,这些都是 Unicode 标准的正式英文名。请用英文关键词。
为什么点击表情会出现绿色覆盖层?
那是复制成功的可视化确认。覆盖层保留 1.5 秒(setTimeout(() => setCopiedEmoji(null), 1500)),之后淡出。旁边的提示会确认具体复制了哪个字符。
立即试用表情符号选择器:即将推出: 表情符号选择器
相关工具
- 即将推出: ASCII 表 — 查询 ASCII 范围内非表情字符的字符代码。
- 即将推出: 随机选择器 — 从自定义列表中随机选取。