Trier le contenu de listes est un exercice courant lorsqu’on développe des applications ou un site web. Aussi, si vous travaillez avec JavaScript, vous serez amené à utiliser la méthode sort() qui permet de trier les éléments d’un tableau. Ceci étant dit, trier des nombres fonctionne très bien avec cette méthode. Mais trier des chaînes de caractères peut vous apporter quelques surprises.

Je vous propose dans ce billet de vous présenter les deux possibilités : trier des nombres (facile) puis trier des chaînes de caractère.

On plante le décor

Avant de pouvoir s’amuser follement à trier en JavaScript, on besoin d’un peu de matière à manipuler. Imaginons un jeux de rôle avec de fiers guerriers caractérisés par un nom, un age et une arme :

Nous allons utiliser un affichage du résultat directement sur la console : je vous entends déjà vous esclaffer : « il ne se foule pas trop le gars 😉 ».
Et bien oui, et j’en suis fière.

De toute façon, une fois la méthode comprise, vous pouvez adapter ce script pour répondre à vos souhaits les plus fous…

Bref, revenons à nos lignes de codes : je vous propose d’utiliser une fonction qui aura pour mission d’afficher le résultat du trie.
L’utilisation d’une fonction permet d’éviter de recopier la même portion de code à de nombreux endroits (Cool !) :

Dans le corps de votre page HTML, on va ajouter deux boutons qui permettrons de lancer le trie par age et le trie par nom. A chaque bouton on associe une action qui lance la fonction ad hoc.
Jusque là tout va bien…

Voyons de plus près ces jolies fonctions :

Trier des nombres

Comme annoncé en début de billet, la méthode sort() fait très bien le boulot et trier l’age de nos valeureux guerriers est un jeux d’enfants :

Tada ! Voilà ce que nous retourne la console lorsqu’on lance le trie par age :

Trier des chaînes de caractères (String)

Trier des chaînes de caractères (String) pose des soucis car le tri s’effectue par défaut selon les points de code Unicode de la chaine de caractères.
Oui mais encore…

Typiquement, cela veut dire que chaque caractère est converti en son code Unicode qui sert à faire le trie.
On peut se retrouver devant un résultat retourner par la machine qui peut laisser perplexe l’être humain que nous sommes : « Cian » sera trié avant « bleu ». Dans un tri numérique, 9 sera trié avant 80, mais comme ces nombres sont convertis en chaînes de caractères, « 80 » arrive avant « 9 » selon l’ordre Unicode.

Notre fonction qui trie par nom les courageux guerriers se traduit comme suit :

Pour donner un coup de main à la fonction de trie, on passe par une transformation des lettres en majuscules (tous les mots sont logés à la même enseigne…).

reTada ! Quel beau trie par nom, n’est-ce pas ?

Trier des chaînes de caractère (String) avec JavaScript

Et voilà le tour est joué !
Alors sautez sur votre éditeur de code préféré pour mettre en application le trie de données en JavaScript.

Cette proposition de solution pour trier des données en JavaScript n’est évidemment pas la seule et unique possibilité. Vous pouvez très bien développer d’autres méthodes ou fonctions pour arriver au même résultat. Comme j’adore échanger, vous pouvez laisser un commentaire ou partager votre avis ou méthode.

Pour aller plus loin dans le développement JavaScript, je vous conseille un peu de lecture :

Apprendre à développer avec JavaScript (2e édition)

Ce livre sur l’apprentissage du développement avec JavaScript s’adresse à des lecteurs qui souhaitent maîtriser cette brique incontournable des développements Web. En effet, même si des solutions logicielles existent pour contourner la connaissance du langage JavaScript, sa maîtrise est un atout essentiel pour acquérir une expertise dans le domaine des technologies du Web 2.0.

Catégories : La minute coding

Claude BUENO

Je suis passionné par les technologies de l'information et de la communication. Ma mission : accompagner les clients dans leur transformation digitale. Je blogue depuis 2008 sur les sujets numériques. Je suis fan de Star Wars, Vikings et Game of Thrones. J'habite à Tours.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Articles similaires

La minute coding

Comment créer votre premier projet Angular ?

Dans cet article, je vous propose de découvrir les bases du framework web Angular en vous montrant comment créer votre premier projet. Après une petite introduction à Angular et les quatre piliers de sa conception, Lire la suite…

La minute coding

Comment créer votre première application mobile avec Cordova ?

Depuis quelque temps je m’intéresse au développement pour mobiles et plus précisément pour Android. A travers ce billet, je vais vous présenter comment créer votre première application mobile avec Cordova sans connaître le langage natif Lire la suite…

La minute coding

Comment gérer son code avec Git et GitHub ?

Collègue développeur, je viens te parler d’un moyen efficace de suivre l’évolution de ton code sans rien perdre des modifications que tu as pu faire tout au long de la vie de ton projet. Le Lire la suite…