Avoir une liste de string et la trier dans un ordre alphabétique (ou inverse) en Javascript parait être un exercice à première vue plutôt simple.

Mais en réalité, il renferme son lot de complication, et également, une solution très simple à mettre en place.

Examinons d'abord le problème

Problème

Voici un simple exemple de l'utilisation de la méthode .sort() sur un tableau de chaînes de caractères, qui donne des résultats... étranges :

/* Tri avec la méthode sort()*/

const arr = ["Chien", "abricot", "électron","résistance", "Tomate"];
const sortedArray = arr.sort();

console.log(sortedArray);
// Fail -> Array(5) [ "Chien", "Tomate", "abricot", "résistance", "électron" ]

Si l'on prend simplement les premières lettres de chaque mot dans la liste triée "c, t, a, r, é", on voit déjà un problème, mais qu'elle est l'explication ?

Javascript va tout simplement trouver un moyen mathématique de trier cette liste, et choisir de regarder dans le tableau ascii la valeur numérique de chaque lettre, et les comparer entres-elles.

En l’occurrence, les valeurs des lettres majuscules sont toujours plus petites (65+) que les minuscules (97+), et les lettres accentuées sont beaucoup plus grandes (128+).

Solution

Heureusement il existe une méthode spéciale en Javascript pour comparer deux caractères ensemble, en tenant compte de la langue de l'utilisateur, et couplé à la méthode sort, on arrive finalement à un réel tri par ordre alphabétique, sans problème d'accent ni de majuscule :

/* Tri avec la méthode sort() et localeCompare()*/

const arr = ["Chien", "abricot", "électron","résistance", "Tomate"];
const sortedArray = arr.sort(function (a, b) {
    return a.localeCompare(b);
});

console.log(sortedArray);
// Hourra ! -> Array(5) [ "abricot", "Chien", "électron", "résistance", "Tomate" ]

J'espère que cet article vous aura été utile, et à bientôt sur le blog !

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi formateur/coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et recevoir des offres exclusives !