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

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

每個膚色都是一個修飾符，許多表情符號由修飾符和基本編碼組成，這些編碼對應(yīng)於特定的字符。不幸的是，並非每個表情符號庫都支持修飾符。但鑑於其流行程度，表情符號膚色修飾符遠(yuǎn)不止是“錦上添花”的功能。此外，它們也是一種巧妙的工作方式，因為它們使我們能夠編寫更模塊化和更高效的代碼。

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

Fitzpatrick膚色分級法

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

在最簡單的用例中，當(dāng)這些字符之一附加到支持膚色修飾符的表情符號時，它會更改表情符號的膚色。

換句話說：? ? = ??

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

要使用CSS在表情符號膚色之間切換，我們將從基本表情符號字符（?）開始，然後使用::after偽選擇器附加膚色。

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

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

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

這裡發(fā)生了什麼？首先，我們從一個具有Fitzpatrick 4型的嬰兒表情符號開始。然後將其傳遞給removeModifier函數(shù)，該函數(shù)搜索任何膚色修飾符並將其從字符串中刪除?，F(xiàn)在我們有了沒有修飾符的表情符號，我們可以添加任何我們喜歡的修飾符。

雖然這種方法適用於許多表情符號，但在引入其他修飾符時我們會遇到問題。這就是為什麼我們現(xiàn)在需要討論……

處理ZWJ序列

零寬度連接符（ZWJ）序列就像Unicode的複合詞。它們由兩個或多個由零寬度連接符U 200D連接的表情符號組成。

ZWJ序列最常用於向表情符號添加性別修飾符。例如，舉重的人加上ZWJ，加上女性符號，等於一個舉重的女人（??? ♀? = ???♀?）。

處理ZWJ序列時，需要注意以下幾點：

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

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

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

限制

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

對這一點的支持因平臺而異。一些編輯器可能會嘗試渲染ZWJ序列，並且並非所有瀏覽器都支持相同的ZWJ序列集。

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

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

指導(dǎo)開發(fā)的問題

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

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

希望通過對這些問題的解答以及我們在此處看到的示例，您將擁有在需要時支持表情符號膚色修飾符所需的一切。

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