Emoji膚色修飾符：程序化處理指南

Emoji擁有多種膚色，這早已不是秘密。尤其是在文本和社交媒體中，它們非常受歡迎。??（舉起的黑色拳頭）表情符號(hào)甚至被Emojipedia的世界表情符號(hào)獎(jiǎng)評(píng)為“2020年最佳表情符號(hào)”。

每個(gè)膚色都是一個(gè)修飾符，許多表情符號(hào)由修飾符和基本編碼組成，這些編碼對(duì)應(yīng)于特定的字符。不幸的是，并非每個(gè)表情符號(hào)庫(kù)都支持修飾符。但鑒于其流行程度，表情符號(hào)膚色修飾符遠(yuǎn)不止是“錦上添花”的功能。此外，它們也是一種巧妙的工作方式，因?yàn)樗鼈兪刮覀兡軌蚓帉懜K化和更高效的代碼。

因此，本文的目的就是：弄清楚如何以編程方式處理表情符號(hào)修飾符。這樣，如果您遇到不支持膚色的情況，或者想要?jiǎng)?chuàng)建其他表情符號(hào)的自定義變體，您就知道該怎么做了！

Fitzpatrick膚色分級(jí)法

膚色修飾符作為Unicode 8.0的一部分，于2015年正式添加到表情符號(hào)中。它們基于Fitzpatrick膚色分級(jí)法，這是一種對(duì)人類膚色的正式分類。下表顯示了表情符號(hào)字符如何與Fitzpatrick類型匹配：

在最簡(jiǎn)單的用例中，當(dāng)這些字符之一附加到支持膚色修飾符的表情符號(hào)時(shí)，它會(huì)更改表情符號(hào)的膚色。

換句話說(shuō)：? ? = ??

使用CSS應(yīng)用膚色修飾符

要使用CSS在表情符號(hào)膚色之間切換，我們將從基本表情符號(hào)字符（?）開(kāi)始，然后使用::after偽選擇器附加膚色。

除了使用渲染的表情符號(hào)字符外，我們還可以使用Unicode十六進(jìn)制代碼：

使用JavaScript移除和切換膚色修飾符

如果正在處理的表情符號(hào)已經(jīng)應(yīng)用了膚色修飾符怎么辦？為此，我們需要超越CSS。以下是一個(gè)使用JavaScript的示例：

這里發(fā)生了什么？首先，我們從一個(gè)具有Fitzpatrick 4型的嬰兒表情符號(hào)開(kāi)始。然后將其傳遞給removeModifier函數(shù)，該函數(shù)搜索任何膚色修飾符并將其從字符串中刪除。現(xiàn)在我們有了沒(méi)有修飾符的表情符號(hào)，我們可以添加任何我們喜歡的修飾符。

雖然這種方法適用于許多表情符號(hào)，但在引入其他修飾符時(shí)我們會(huì)遇到問(wèn)題。這就是為什么我們現(xiàn)在需要討論……

處理ZWJ序列

零寬度連接符（ZWJ）序列就像Unicode的復(fù)合詞。它們由兩個(gè)或多個(gè)由零寬度連接符U 200D連接的表情符號(hào)組成。

ZWJ序列最常用于向表情符號(hào)添加性別修飾符。例如，舉重的人加上ZWJ，加上女性符號(hào)，等于一個(gè)舉重的女人（??? ♀? = ???♀?）。

處理ZWJ序列時(shí)，需要注意以下幾點(diǎn)：

• 這些序列只是建議。它們來(lái)自Unicode聯(lián)盟，并非保證在每個(gè)平臺(tái)上都受支持。如果平臺(tái)不支持它們，則將顯示常規(guī)表情符號(hào)的回退序列。
• 如果存在膚色修飾符，則必須將其包含在表情符號(hào)之后但在ZWJ之前。
• 一些ZWJ序列包含多個(gè)表情符號(hào)，每個(gè)表情符號(hào)都有不同的膚色修飾符。

鑒于此信息，我們需要對(duì)之前的代碼示例進(jìn)行以下更改：

• 膚色修飾符需要插入到任何基本表情符號(hào)之后，而不僅僅是附加到表情符號(hào)的末尾。
• 如果ZWJ序列中有多個(gè)表情符號(hào)具有膚色修飾符，則需要替換每個(gè)表情符號(hào)的修飾符。

限制

從這個(gè)例子中，您可以注意到一致性的局限性。編輯器視圖分別顯示ZWJ序列中的每個(gè)字符，膚色修飾符除外，它們會(huì)立即應(yīng)用于其對(duì)應(yīng)的表情符號(hào)。另一方面，控制臺(tái)或結(jié)果視圖將嘗試渲染整個(gè)序列的字符。

對(duì)這一點(diǎn)的支持因平臺(tái)而異。一些編輯器可能會(huì)嘗試渲染ZWJ序列，并且并非所有瀏覽器都支持相同的ZWJ序列集。

此外，在ZWJ序列中添加膚色需要知道什么被用作基本表情符號(hào)。雖然在表情符號(hào)由已知集合提供的情況下這相對(duì)簡(jiǎn)單，但如果我們想要能夠處理用戶的任意輸入，事情就會(huì)變得更加困難。

另外，請(qǐng)注意，本文中的CSS解決方案與ZWJ序列不兼容。

指導(dǎo)開(kāi)發(fā)的問(wèn)題

我整理了一些問(wèn)題，您在設(shè)計(jì)需要處理表情符號(hào)膚色修飾符的系統(tǒng)時(shí)可能需要自問(wèn)：

• 我是否可以控制我的系統(tǒng)將與哪些表情符號(hào)交互？
• 我的表情符號(hào)庫(kù)是否包含有關(guān)哪些表情符號(hào)支持膚色修飾符的信息？
• 我的系統(tǒng)是否需要添加、刪除或更改修飾符？
• 我的平臺(tái)是否支持ZWJ序列？如果是，哪些？
• 我的系統(tǒng)是否需要支持具有多個(gè)膚色修飾符的ZWJ序列？

希望通過(guò)對(duì)這些問(wèn)題的解答以及我們?cè)诖颂幙吹降氖纠?，您將擁有在需要時(shí)支持表情符號(hào)膚色修飾符所需的一切。

以上是編程更改表情符號(hào)膚色的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！