JavaScript Academy · Leçon

Tri adapté aux paramètres régionaux

Triez correctement les chaînes avec Intl.Collator.

Tri adapté aux paramètres régionaux est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Pourquoi le tri par défaut échoue

La méthode sort() des tableaux compare les chaînes selon les unités de code UTF-16. Elle place les majuscules avant les minuscules et gère mal les accents, ce qui ne convient pas aux listes destinées à être lues par des personnes.

const words = ["banana", "Apple", "cherry"];
console.log([...words].sort()); // ["Apple","banana","cherry"] — capital wins

localeCompare

String.prototype.localeCompare compare deux chaînes selon les règles des paramètres régionaux et renvoie une valeur négative, nulle ou positive.

console.log("apple".localeCompare("banana")); // -1
console.log("banana".localeCompare("apple")); // 1

Trier avec localeCompare

Passez cette méthode comme comparateur pour obtenir un ordre adapté à la lecture.

const words = ["banana", "Apple", "cherry"];
console.log([...words].sort((a, b) => a.localeCompare(b)));
// ["Apple", "banana", "cherry"] — case-insensitive ordering

Intl.Collator

Pour trier de nombreux éléments, Intl.Collator est plus rapide : créez-le une seule fois et réutilisez sa méthode compare.

const collator = new Intl.Collator("en-US");
const words = ["banana", "Apple", "cherry"];
console.log([...words].sort(collator.compare));

Accents et signes diacritiques

Les collateurs classent correctement les caractères accentués selon les paramètres régionaux, contrairement à la comparaison des unités de code.

const words = ["zebra", "ela", "elf", "elan"];
const collator = new Intl.Collator("fr");
console.log([...words].sort(collator.compare));

Sensibilité

sensitivity contrôle les différences prises en compte : "base" ignore la casse et les accents, "accent" ignore uniquement la casse et "variant" distingue toutes les différences.

const c = new Intl.Collator("en", { sensitivity: "base" });
console.log(c.compare("apple", "APPLE")); // 0 (treated equal)

Tri numérique

numeric: true trie les nombres intégrés selon leur valeur : « file2 » vient donc avant « file10 ».

const files = ["file10", "file2", "file1"];
const c = new Intl.Collator("en", { numeric: true });
console.log([...files].sort(c.compare)); // ["file1","file2","file10"]

Ordre selon la casse

caseFirst: "upper" ou "lower" détermine si les majuscules sont placées avant les minuscules lorsque les autres différences sont identiques.

const c = new Intl.Collator("en", { caseFirst: "upper" });
console.log(["b", "B", "a", "A"].sort(c.compare));

Les paramètres régionaux influencent l’ordre

Les langues n’utilisent pas toutes le même ordre alphabétique. En suédois, certaines lettres accentuées sont classées après z et non près de a.

const words = ["z", "a", "o"];
console.log([...words].sort(new Intl.Collator("sv").compare));

Rechercher avec l’usage

usage: "search" adapte le collateur à la recherche plutôt qu’au classement, ce qui est utile pour filtrer sans tenir compte des accents.

const c = new Intl.Collator("en", { usage: "search", sensitivity: "base" });
function matches(a, b) { return c.compare(a, b) === 0; }
console.log(matches("cafe", "CAFE")); // true

Trier des objets

Utilisez le collateur sur une clé lorsque vous triez des tableaux d’objets.

const people = [{ name: "Bob" }, { name: "alice" }, { name: "Carol" }];
const c = new Intl.Collator("en");
console.log(people.sort((a, b) => c.compare(a.name, b.name)).map((p) => p.name));

Vérification rapide

Testez le tri selon les paramètres régionaux.

Récapitulatif : tri selon les paramètres régionaux

Vous avez compris pourquoi sort() par défaut produit un mauvais résultat, utilisé localeCompare et le plus rapide Intl.Collator, géré les accents, la sensibilité, le tri numérique et l’ordre selon la casse, ainsi que les alphabets propres à chaque langue et la recherche. Cela termine le cours Intl.

Questions Fréquemment Posées

La leçon « Tri adapté aux paramètres régionaux » est-elle gratuite ?

Oui — le texte complet de « Tri adapté aux paramètres régionaux » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Tri adapté aux paramètres régionaux » ?

Triez correctement les chaînes avec Intl.Collator. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Tri adapté aux paramètres régionaux » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy