當(dāng)我們想到在 JavaScript 中對(duì)陣列進(jìn)行排序時(shí)，我們通常會(huì)想像字串、數(shù)字甚至物件按升序或降序組織。但是當(dāng)數(shù)組的元素是表情符號(hào)時(shí)會(huì)發(fā)生什麼？答案可能會(huì)讓您感到驚訝，尤其是當(dāng)膚色修飾符發(fā)揮作??用時(shí)！

在本部落格中，我們將深入探討 JavaScript 如何處理排序表情符號(hào)，探索影響此行為的 Fitzpatrick 量表，並在此過(guò)程中展示一些古怪的範(fàn)例。

---

範(fàn)例

讓我們從螢?zāi)唤貓D中的程式碼片段開始：

["??", "??", "??", "??", "??"].sort();

執(zhí)行時(shí)，此程式碼會(huì)產(chǎn)生以下輸出：

["??", "??", "??", "??", "??"]

乍一看，您可能會(huì)想，剛剛發(fā)生了什麼事？ 表情符號(hào)依「從淺到深」的順序排序。為了理解為什麼會(huì)發(fā)生這種情況，我們需要深入了解 JavaScript 和 Unicode。

---

到底發(fā)生了什麼事？

1. 表情符號(hào)的工作原理

每個(gè)表情符號(hào)都由唯一的Unicode 代碼點(diǎn) 表示。例如：

• ？代表為U 1F469。
• ？ （膚色修飾語(yǔ)）以 U 1F3FF 表示。

當(dāng)出現(xiàn)「??」這樣的表情符號(hào)時(shí)顯示出來(lái)的，其實(shí)是兩個(gè)Unicode字元的組合：

• 基本表情符號(hào) (?)。
• 膚色修飾劑（？）。

2. JavaScript 排序

JavaScript 中的 .sort() 方法透過(guò)比較陣列元素的 Unicode 值來(lái)運(yùn)作，預(yù)設(shè)將它們視為字串。這意味著表情符號(hào)的排序順序由其底層 Unicode 值決定。

3. 菲茨帕特里克量表

菲茨帕特里克等級(jí)是人類膚色的分類系統(tǒng)，範(fàn)圍從 I 型（最淺）到 VI 型（最深）。 Unicode 採(cǎi)用這種比例來(lái)在表情符號(hào)中引入膚色多樣性。以下是修飾詞與菲茨派翠克尺度的對(duì)應(yīng)關(guān)係：

• ？ （類型 I）：輕
• ？ （類型 II）：輕-中
• ？ （類型 III）：中
• ？ （型 IV）：中深色
• ？ （型 V）：深色

當(dāng)使用這些修飾符對(duì)錶情符號(hào)進(jìn)行排序時(shí)，JavaScript 本質(zhì)上是根據(jù)膚色修飾符的數(shù)值對(duì)它們進(jìn)行排序，該數(shù)值對(duì)應(yīng)於菲茨帕特里克等級(jí)。

---

讓我們來(lái)看看實(shí)際效果

這是一個(gè)實(shí)際示範(fàn)：

["??", "??", "??", "??", "??"].sort();

分解

• .sort() 方法比較每個(gè)表情符號(hào)的 Unicode 值。
• 膚色修飾因子（?、? 等）的 Unicode 值不斷增加。
• 這會(huì)導(dǎo)致表情符號(hào)從最淺 (?) 到最深 (?) 排序。

---

有趣的實(shí)驗(yàn)

讓我們嘗試一些變化並觀察結(jié)果。

1.混合表情符號(hào)

如果我們包含沒(méi)有膚色修飾符的基本表情符號(hào)，會(huì)發(fā)生什麼事？

["??", "??", "??", "??", "??"]

輸出：

// Array of emojis with skin-tone modifiers
const emojis = ["??", "??", "??", "??", "??"];

// Sort the array
const sortedEmojis = emojis.sort();

// Log the sorted array
console.log(sortedEmojis); 
// Output: ["??", "??", "??", "??", "??"]

這裡，基本表情符號(hào)？首先是因?yàn)樗哂凶钚〉?Unicode 值，其次是排序後的膚色變體。

---

2.對(duì)其他表情符號(hào)組進(jìn)行排序

如果我們用手勢(shì)等修飾符對(duì)其他表情符號(hào)組進(jìn)行排序會(huì)怎麼樣？

const mixedEmojis = ["??", "??", "?", "??", "??", "??"];
console.log(mixedEmojis.sort());

輸出：

["?", "??", "??", "??", "??", "??"]

表情符號(hào)再次根據(jù)菲茨帕特里克等級(jí)進(jìn)行排序。

---

Unicode 幕後花絮

為了更深入地了解排序行為，讓我們檢查每個(gè)表情符號(hào)的 Unicode 值：

const handEmojis = ["??", "??", "??", "??", "??"];
console.log(handEmojis.sort());

這將記錄基本表情符號(hào)及其修飾符的 Unicode 值。您會(huì)注意到膚色修改器的數(shù)值逐漸增加。

---

延伸閱讀

• Unicode 技術(shù)標(biāo)準(zhǔn) #51
• MDN：Array.prototype.sort()

以上是使用 Fitzpatrick 量表解碼 JavaScript 表情符號(hào)排序的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！