首頁 >web前端 >js教程 >使用 Fitzpatrick 量表解碼 JavaScript 表情符號排序

使用 Fitzpatrick 量表解碼 JavaScript 表情符號排序

Susan Sarandon原創: 2025-01-03 21:30:44955瀏覽

Decoding JavaScript Emoji Sorting with the Fitzpatrick Scale

當我們想到在 JavaScript 中對陣列進行排序時，我們通常會想像字串、數字甚至物件按升序或降序組織。但是當數組的元素是表情符號時會發生什麼？答案可能會讓您感到驚訝，尤其是當膚色修飾符發揮作用時！

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

範例

讓我們從螢幕截圖中的程式碼片段開始：

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

執行時，此程式碼會產生以下輸出：

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

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

到底發生了什麼事？

1. 表情符號的工作原理

每個表情符號都由唯一的Unicode 代碼點 表示。例如：

？代表為U 1F469。
？（膚色修飾語）以 U 1F3FF 表示。

當出現「??」這樣的表情符號時顯示出來的，其實是兩個Unicode字元的組合：

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

2. JavaScript 排序

JavaScript 中的 .sort() 方法透過比較陣列元素的 Unicode 值來運作，預設將它們視為字串。這意味著表情符號的排序順序由其底層 Unicode 值決定。

3. 菲茨帕特里克量表

菲茨帕特里克等級是人類膚色的分類系統，範圍從 I 型（最淺）到 VI 型（最深）。 Unicode 採用這種比例來在表情符號中引入膚色多樣性。以下是修飾詞與菲茨派翠克尺度的對應關係：

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

當使用這些修飾符對錶情符號進行排序時，JavaScript 本質上是根據膚色修飾符的數值對它們進行排序，該數值對應於菲茨帕特里克等級。

讓我們來看看實際效果

這是一個實際示範：

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

分解

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

有趣的實驗

讓我們嘗試一些變化並觀察結果。

1.混合表情符號

如果我們包含沒有膚色修飾符的基本表情符號，會發生什麼事？

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

輸出：

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

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

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

這裡，基本表情符號？首先是因為它具有最小的 Unicode 值，其次是排序後的膚色變體。

2.對其他表情符號組進行排序

如果我們用手勢等修飾符對其他表情符號組進行排序會怎麼樣？

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

輸出：

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

表情符號再次根據菲茨帕特里克等級進行排序。

Unicode 幕後花絮

為了更深入地了解排序行為，讓我們檢查每個表情符號的 Unicode 值：

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

這將記錄基本表情符號及其修飾符的 Unicode 值。您會注意到膚色修改器的數值逐漸增加。