When we think of sorting arrays in JavaScript, we usually imagine strings, numbers, or even objects being organized in ascending or descending order. But what happens when the elements of the array are emojis? The answer might surprise you, especially when skin-tone modifiers come into play!
In this blog, we’ll dive into how JavaScript handles sorting emojis, explore the Fitzpatrick scale that influences this behavior, and showcase some quirky examples along the way.
The Example
Let’s start with the code snippet from the screenshot:
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏿</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏾</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏽</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏼</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏻</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">].</span><span style="color:var(--syntax-name-color)">sort</span><span style="color:var(--syntax-text-color)">();</span>
</code></span></span>When executed, this code produces the following output:
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏻</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏼</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏽</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏾</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏿</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">]</span>
</code></span></span>At first glance, you might wonder, What just happened? The emojis were sorted in a "light-to-dark" order. To understand why this happens, we need to peek under the hood of JavaScript and Unicode.
What’s Really Happening?
1. How Emojis Work
Every emoji is represented by a unique Unicode code point. For example:
- 👩 is represented by .
U+1F469 - 🏿 (a skin-tone modifier) is represented by .
U+1F3FF
When an emoji like "👩🏿" is displayed, it is actually a combination of two Unicode characters:
- The base emoji ().
👩 - A skin-tone modifier ().
🏿
2. Sorting in JavaScript
The method in JavaScript works by comparing the Unicode values of array elements, treating them as strings by default. This means that the sorting order of emojis is determined by their underlying Unicode values..sort()
3. Fitzpatrick Scale
The Fitzpatrick scale is a classification system for human skin tones, ranging from Type I (lightest) to Type VI (darkest). Unicode adopted this scale to introduce skin-tone diversity in emojis. Here’s how the modifiers correspond to the Fitzpatrick scale:
- 🏻 (Type I): Light
- 🏼 (Type II): Light-Medium
- 🏽 (Type III): Medium
- 🏾 (Type IV): Medium-Dark
- 🏿 (Type V): Dark
When sorting emojis with these modifiers, JavaScript essentially orders them based on the numeric value of the skin-tone modifiers, which corresponds to the Fitzpatrick scale.
Let’s See This in Action
Here’s a practical demonstration:
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">// Array of emojis with skin-tone modifiers</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">emojis</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏿</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏾</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏽</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏼</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏻</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">];</span>
<span style="color:var(--syntax-comment-color)">// Sort the array</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">sortedEmojis</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">emojis</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">sort</span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-comment-color)">// Log the sorted array</span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">sortedEmojis</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// Output: ["👩🏻", "👩🏼", "👩🏽", "👩🏾", "👩🏿"]</span>
</code></span></span>Breaking It Down
- The method compares the Unicode values of each emoji.
.sort() - The skin-tone modifiers (, , etc.) have increasing Unicode values.
🏻🏼 - This results in the emojis being sorted from lightest (🏻) to darkest (🏿).
Fun Experiments
Let’s try a few variations and observe the results.
1. Mixed Emojis
What happens if we include base emojis without skin-tone modifiers?
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">mixedEmojis</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏿</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏾</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏽</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏼</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏻</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">];</span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">mixedEmojis</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">sort</span><span style="color:var(--syntax-text-color)">());</span>
</code></span></span>Output:
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏻</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏼</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏽</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏾</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏿</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">]</span>
</code></span></span>Here, the base emoji comes first because it has the smallest Unicode value, followed by the sorted skin-tone variants.👩
2. Sorting Other Emoji Groups
What if we sort other emoji groups with modifiers, like hand gestures?
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">handEmojis</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👍🏿</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👍🏽</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👍🏻</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👍🏼</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👍🏾</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">];</span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">handEmojis</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">sort</span><span style="color:var(--syntax-text-color)">());</span>
</code></span></span>Output:
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👍🏻</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👍🏼</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👍🏽</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👍🏾</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👍🏿</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">]</span>
</code></span></span>Once again, the emojis are sorted based on the Fitzpatrick scale.
Unicode Behind the Scenes
To understand the sorting behavior more deeply, let’s inspect the Unicode values of each emoji:
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">emojiUnicode</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">emojis</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">map</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">codePointAt</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">).</span><span style="color:var(--syntax-name-color)">toString</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-literal-color)">16</span><span style="color:var(--syntax-text-color)">));</span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">emojiUnicode</span><span style="color:var(--syntax-text-color)">);</span>
</code></span></span>This will log the Unicode values of the base emoji and its modifiers. You’ll notice the incremental increase in values for the skin-tone modifiers.
使用 Fitzpatrick 量表解码 JavaScript 表情符号排序
当我们想到在 JavaScript 中对数组进行排序时，我们通常会想象字符串、数字甚至对象按升序或降序组织。但是当数组的元素是 emoji 时会发生什么呢？答案可能会让您大吃一惊，尤其是当肤色修饰剂发挥作用时！
在这篇博客中，我们将深入探讨 JavaScript 如何处理对 emoji 进行排序，探索影响这种行为的 Fitzpatrick 量表，并在此过程中展示一些古怪的例子。
示例
让我们从屏幕截图中的代码片段开始：
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏿</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏾</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏽</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏼</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏻</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">].</span><span style="color:var(--syntax-name-color)">sort</span><span style="color:var(--syntax-text-color)">();</span>
</code></span></span></span>执行时，此代码将生成以下输出：
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏻</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏼</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏽</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏾</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏿</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">]</span>
</code></span></span></span>乍一看，您可能想知道，刚刚发生了什么？表情符号按“从浅到黑”的顺序排序。要了解为什么会发生这种情况，我们需要深入了解 JavaScript 和 Unicode 的底层。
到底发生了什么？
1. 表情符号如何运作
每个表情符号都由一个唯一的 Unicode 码位表示。例如：
- 👩 由 表示。
U+1F469 - 🏿 （肤色修饰符）由 表示。
U+1F3FF
当显示类似 “👩🏿” 的表情符号时，它实际上是两个 Unicode 字符的组合：
- 基本表情符号 （）。
👩 - 肤色修饰符 （）。
🏿
2. 在 JavaScript 中排序
JavaScript 中的方法是比较数组元素的 Unicode 值，默认将它们视为字符串。这意味着表情符号的排序顺序由其基础 Unicode 值决定。.sort()
3. 菲茨帕特里克量表
菲茨帕特里克量表是人类肤色的分类系统，范围从 I 型（最浅）到 VI 型（最深）。Unicode 采用此量表在表情符号中引入肤色多样性。以下是修饰符与 Fitzpatrick 量表的对应方式：
- 🏻 （I 型）：浅色
- 🏼 （类型 II）：轻-中
- 🏽 （III 型）：中等
- 🏾 （类型 IV）：中深
- 🏿 （类型 V）：深色
当使用这些修饰符对 emoji 进行排序时，JavaScript 基本上是根据肤色修饰符的数值对它们进行排序，该值对应于 Fitzpatrick 量表。
Let’s See This in Action
Here’s a practical demonstration:
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">// Array of emojis with skin-tone modifiers</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">emojis</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏿</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏾</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏽</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏼</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏻</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">];</span>
<span style="color:var(--syntax-comment-color)">// Sort the array</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">sortedEmojis</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">emojis</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">sort</span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-comment-color)">// Log the sorted array</span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">sortedEmojis</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// Output: ["👩🏻", "👩🏼", "👩🏽", "👩🏾", "👩🏿"]</span>
</code></span></span></span>Breaking It Down
- The method compares the Unicode values of each emoji.
.sort() - 肤色修饰符（、 等）的 Unicode 值不断增加。
🏻🏼 - 这会导致表情符号从最浅 （） 🏻 到最暗 （） 🏿 排序。
有趣的实验
让我们尝试一些变化并观察结果。
1. 混合表情符号
如果我们包含没有肤色修饰符的基本表情符号，会发生什么情况？
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">mixedEmojis</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏿</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏾</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏽</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏼</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏻</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">];</span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">mixedEmojis</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">sort</span><span style="color:var(--syntax-text-color)">());</span>
</code></span></span></span>输出：
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏻</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏼</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏽</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏾</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👩🏿</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">]</span>
</code></span></span></span>在这里，基本 emoji 排在第一位，因为它的 Unicode 值最小，然后是排序的肤色变体。👩
2. 对其他 Emoji 组进行排序
如果我们使用修饰符（如手势）对其他表情符号组进行排序，该怎么办？
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">handEmojis</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👍🏿</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👍🏽</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👍🏻</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👍🏼</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👍🏾</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">];</span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">handEmojis</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">sort</span><span style="color:var(--syntax-text-color)">());</span>
</code></span></span></span>输出：
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👍🏻</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👍🏼</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👍🏽</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👍🏾</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">👍🏿</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">]</span>
</code></span></span></span>再次，表情符号根据 Fitzpatrick 量表进行排序。
Unicode 幕后花絮
为了更深入地了解排序行为，让我们检查每个表情符号的 Unicode 值：
<span style="color:#171717"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">emojiUnicode</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">emojis</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">map</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">codePointAt</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">).</span><span style="color:var(--syntax-name-color)">toString</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-literal-color)">16</span><span style="color:var(--syntax-text-color)">));</span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">emojiUnicode</span><span style="color:var(--syntax-text-color)">);</span>
</code></span></span></span>这将记录基本 emoji 及其修饰符的 Unicode 值。您会注意到肤色修饰符的值逐渐增加。