首页 >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 值。您会注意到肤色修改器的值逐渐增加。