您知道很多 Emoji 都有不同的肤色吗？Emoji 肤色非常受欢迎，尤其是在文本和社交媒体上。握紧的黑色拳头表情符号 (✊🏿) 被 Emojipedia 的世界 Emoji 奖评为 “2020 年最佳 Emoji”。
每个肤色都是一个修饰符，许多 Emoji 由修饰符和基本编码组成，这些编码映射到特定的字符。不幸的是，并非每个 Emoji 库都支持修饰符。但是，鉴于它们的普及程度，Emoji 肤色修饰符不仅仅是“锦上添花”的功能。此外，它们是一种智能的工作方式，因为它们允许我们编写更模块化和更高效的代码。
因此，这就是我们在本文中要做的：找出如何以编程方式处理 Emoji 修饰符。这样，如果您遇到没有肤色支持的情况——或者想要创建其他 Emoji 的自定义变体——那么您就会知道如何操作！
了解菲茨帕特里克量表
肤色修饰符于 2015 年作为 Unicode 8.0 的一部分正式添加到 Emoji 中。它们基于 菲茨帕特里克量表，该量表是对人类肤色的正式分类。下表显示了 Emoji 字符如何与菲茨帕特里克类型匹配
| 肤色字符 | 菲茨帕特里克类型 |
|---|---|
| 🏻 | 1-2 |
| 🏼 | 3 |
| 🏽 | 4 |
| 🏾 | 5 |
| 🏿 | 6 |
在最简单的用例中，当这些字符之一附加到支持肤色修饰符的 Emoji 时，它将更改 Emoji 的肤色。
换句话说：👶 +🏽 = 👶🏽
使用 CSS 应用肤色修饰符
要使用 CSS 在 Emoji 肤色之间切换，我们将从基本 Emoji 字符 (👶) 开始，然后使用 ::after 伪选择器附加肤色。
除了使用渲染的 Emoji 字符外，我们还可以使用 Unicode 十六进制代码。
使用 JavaScript 删除和交换肤色修饰符
如果正在处理的 Emoji 已经应用了肤色修饰符怎么办？为此，我们需要超越 CSS。这是一个使用 JavaScript 的示例
这里发生了什么？首先，我们从一个带有菲茨帕特里克类型 4 的婴儿 Emoji 开始。然后，我们将其传递给函数 removeModifier，该函数搜索任何肤色修饰符并将其从字符串中删除。现在我们有了没有修饰符的 Emoji，我们可以添加任何我们喜欢的修饰符。
虽然这种方法适用于许多 Emoji，但在引入其他修饰符时我们会遇到问题。这就是为什么我们现在需要讨论……
使用 ZWJ 序列
零宽连接符 (ZWJ) 序列 就像 Unicode 的复合词。它们由两个或多个通过零宽连接符 U+200D 连接的表情符号组成。
ZWJ 序列最常用于向 Emoji 添加性别修饰符。例如，举重的人加上 ZWJ，再加上女性符号，等于一个举重的女人 (️🏋️ + ♀︎ = 🏋️♀️)。
在处理 ZWJ 序列时，需要牢记以下几点
- 这些序列 仅为建议。它们来自 Unicode 联盟，并且不能保证在每个平台上都受支持。如果平台不支持它们，则将显示常规 Emoji 的回退序列。
- 如果存在肤色修饰符，则必须将其包含在 Emoji 之后但在 ZWJ 之前。
- 一些 ZWJ 序列包含多个 Emoji，每个 Emoji 都有不同的肤色修饰符。
鉴于此信息，我们需要对之前的代码示例进行以下更改
- 肤色修饰符需要插入到任何基本 Emoji 之后，而不仅仅是附加到 Emoji 的末尾。
- 如果 ZWJ 序列中有多个 Emoji 具有肤色修饰符，则需要为每个 Emoji 替换这些修饰符。
局限性
从此示例中，您可能会注意到一致性的局限性。编辑器视图分别显示 ZWJ 序列中的每个字符，除了肤色修饰符，这些修饰符会立即应用于其对应的 Emoji。另一方面，控制台或结果视图将尝试渲染整个序列的字符。
对此的支持因平台而异。一些编辑器可能会尝试渲染 ZWJ 序列，并非所有浏览器都支持相同的 ZWJ 序列集。
此外，在 ZWJ 序列中添加肤色需要知道哪些字符用作基本 Emoji。虽然在 Emoji 由已知集合提供的情况下，这相对简单，但如果我们想要能够处理用户提供的任意输入，事情就会变得更加困难。
此外，请注意，本文中的 CSS 解决方案与 ZWJ 序列不兼容。
指导开发的问题
我整理了一些问题，在设计需要处理 Emoji 肤色修饰符的系统时，您可能需要自问这些问题
- 我是否可以控制我的系统将与哪些 Emoji 交互？
- 我的 Emoji 库是否有关于哪些 Emoji 支持肤色修饰符的信息？
- 我的系统是否需要添加、删除或更改修饰符？
- 我的平台是否支持 ZWJ 序列？如果是，哪些序列？
- 我的系统是否需要支持具有 多个肤色修饰符 的 ZWJ 序列？
希望通过对这些问题的回答以及我们在这里看到的示例，您将拥有在需要时支持 Emoji 肤色修饰符所需的一切。