Trier des chaînes de caractères en Javascript
Quand la méthode sort() fait des siennes avec les strings en Javascript !

Améliorez vos compétences en dev !
Des cours complets, créés par des experts, pour tous niveaux et accessibles en illimité grâce à notre abonnement !
19,99€/mois

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 !
Les articles les plus populaires du blog
Envie de continuer à lire des articles autour du développement web (entre autres) ? Voici la sélection des articles de mon blog les plus lus par la communauté !
Voir la sélection 🚀Recevez les articles de la semaine par e-mail pour ne rien manquer !
S'abonner à la newsletter 📧
À 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 !