Décoder le tri des Emoji JavaScript avec l'échelle de Fitzpatrick

Lorsque nous pensons au tri de tableaux en JavaScript, nous imaginons généralement des chaînes, des nombres ou même des objets organisés par ordre croissant ou décroissant. Mais que se passe-t-il lorsque les éléments du tableau sont des emojis ? La réponse pourrait vous surprendre, surtout lorsque les modificateurs de teint entrent en jeu !

Dans ce blog, nous allons découvrir comment JavaScript gère le tri des emojis, explorer l'échelle de Fitzpatrick qui influence ce comportement et présenter quelques exemples originaux en cours de route.

---

L'exemple

Commençons par l'extrait de code de la capture d'écran :

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

Une fois exécuté, ce code produit le résultat suivant :

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

À première vue, vous pourriez vous demander : Que vient-il de se passer ? Les emojis ont été triés dans un ordre « du clair au foncé ». Pour comprendre pourquoi cela se produit, nous devons jeter un coup d'œil sous le capot de JavaScript et d'Unicode.

---

Que se passe-t-il réellement ?

1. Comment fonctionnent les émojis

Chaque emoji est représenté par un point de code Unicode unique. Par exemple :

• ? est représenté par U 1F469.
• ? (un modificateur de teint) est représenté par U 1F3FF.

Quand un emoji comme "??" s'affiche, il s'agit en fait d'une combinaison de deux caractères Unicode :

• L'emoji de base (?).
• Un modificateur de teint (?).

2. Tri en JavaScript

La méthode .sort() en JavaScript fonctionne en comparant les valeurs Unicode des éléments du tableau, en les traitant comme des chaînes par défaut. Cela signifie que l'ordre de tri des emojis est déterminé par leurs valeurs Unicode sous-jacentes.

3. Échelle de Fitzpatrick

L'échelle de Fitzpatrick est un système de classification des tons de peau humaine, allant du type I (le plus clair) au type VI (le plus foncé). Unicode a adopté cette échelle pour introduire la diversité des tons chair dans les emojis. Voici comment les modificateurs correspondent à l'échelle de Fitzpatrick :

• ? (Type I) : Lumière
• ? (Type II) : Léger-Moyen
• ? (Type III) : Moyen
• ? (Type IV) : Moyen-Foncé
• ? (Type V) : Sombre

Lors du tri des emojis avec ces modificateurs, JavaScript les classe essentiellement en fonction de la valeur numérique des modificateurs de teint, qui correspond à l'échelle de Fitzpatrick.

---

Voyons cela en action

Voici une démonstration pratique :

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

Le décomposer

• La méthode .sort() compare les valeurs Unicode de chaque emoji.
• Les modificateurs de teint (?, ?, etc.) ont des valeurs Unicode croissantes.
• Cela permet de trier les emojis du plus clair (?) au plus foncé (?).

---

Expériences amusantes

Essayons quelques variantes et observons les résultats.

1. Emojis mixtes

Que se passe-t-il si nous incluons des émojis de base sans modificateurs de teint ?

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

Sortie :

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

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

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

Ici, l'emoji de base ? vient en premier car il a la plus petite valeur Unicode, suivi des variantes de tons chair triées.

---

2. Tri d'autres groupes Emoji

Et si nous triions d'autres groupes d'emojis avec des modificateurs, comme des gestes de la main ?

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

Sortie :

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

Encore une fois, les emojis sont triés selon l'échelle de Fitzpatrick.

---

Unicode dans les coulisses

Pour comprendre plus en profondeur le comportement de tri, inspectons les valeurs Unicode de chaque emoji :

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

Cela enregistrera les valeurs Unicode de l'emoji de base et de ses modificateurs. Vous remarquerez l’augmentation progressive des valeurs des modificateurs de teint.

---

Lectures complémentaires

• Norme technique Unicode n°51
• MDN : Array.prototype.sort()

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!