Convertir une chaîne en nombre en JavaScript : guide complet pour débutants

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

Introduction : pourquoi est-ce important ?



Imaginez la situation : vous écrivez une calculatrice de pourboire en JavaScript. L'utilisateur saisit le montant de la facture dans un champ de saisie, appuie sur un bouton — et obtient... undefined ou, pire encore, la chaîne "10010" au lieu du nombre 110. Cela vous dit quelque chose ? Si vous débutez en programmation, le problème de la conversion d'une chaîne en nombre en JavaScript est l'un de ces "pièges" sur lesquels tout le monde tombe.



Sur Stack Overflow, la question "How can I convert a string to an integer in JavaScript?" a recueilli des milliers de vues et des centaines de réponses. Cela signifie que même les développeurs expérimentés se perdent parfois dans les nuances. Aujourd'hui, nous allons une fois pour toutes comprendre comment convertir correctement une chaîne en nombre en JavaScript, quelles méthodes fonctionnent, lesquelles ne fonctionnent pas, et pourquoi le résultat est parfois inattendu.



Prêt ? Alors, c'est parti !



Pourquoi convertir une chaîne en nombre ?



JavaScript est un langage à typage dynamique. C'est génial, car vous n'avez pas à penser aux types de données… jusqu'à ce que vous rencontriez un bug. Le problème est que les données provenant de prompt(), des champs de formulaire input, des paramètres d'URL ou des API arrivent toujours sous forme de chaînes. Même si l'utilisateur a saisi "42", JavaScript ne voit pas un nombre, mais un ensemble de caractères.



Essayez d'additionner deux chaînes :



let a = "10";let b = "20";console.log(a + b); // "1020"


Vous voyez ? Au lieu de la somme 30, vous obtenez une concaténation. Pour éviter cela, vous devez indiquer explicitement à JavaScript : "Hé, ce sont des nombres, travaille avec eux comme avec des nombres !".



Méthode n°1 : parseInt() — le grand classique



La façon la plus courante de convertir une chaîne en nombre entier en JavaScript est la fonction parseInt(). Elle prend une chaîne et en "extrait" le nombre entier, en ignorant tout ce qui vient après les chiffres.



Syntaxe et exemples



let str = "42";let num = parseInt(str);console.log(num); // 42 (nombre)

// Fonctionne même avec des "déchets" après les chiffresconsole.log(parseInt("123px")); // 123console.log(parseInt("10.99")); // 10 (ignore la partie décimale)

// Mais si la chaîne ne commence pas par un chiffre...console.log(parseInt("abc123")); // NaNconsole.log(parseInt(" 7")); // 7 (les espaces au début sont ignorés)


Important : parseInt() s'arrête au premier caractère non numérique. Si la chaîne commence par une lettre — vous obtenez NaN (Not a Number).



Deuxième argument — la base numérique



Peu de gens le savent, mais parseInt() a un deuxième paramètre — radix (la base du système numérique). Cela évite les bugs avec les nombres octaux :



// Sans radix, il peut y avoir confusionconsole.log(parseInt("010")); // 10 (dans les anciens IE, cela pouvait être 8)

// Indiquez toujours 10 pour le système décimalconsole.log(parseInt("010", 10)); // 10console.log(parseInt("FF", 16)); // 255 (hexadécimal)


Conseil de pro : passez toujours le deuxième argument 10 si vous travaillez avec des nombres décimaux. Cela rend le code plus clair et plus sûr.



Méthode n°2 : Number() — strict mais honnête



La fonction Number() est une manière plus stricte de convertir une chaîne en nombre en JavaScript. Contrairement à parseInt(), elle ne tolère aucun caractère étranger.



console.log(Number("42"));     // 42console.log(Number("10.99"));  // 10.99 (conserve la partie décimale)console.log(Number("123px"));  // NaN (la chaîne contient des caractères supplémentaires)console.log(Number(""));       // 0 (chaîne vide = 0)console.log(Number(" "));      // 0


Quand l'utiliser : si vous êtes 100% sûr que la chaîne ne contient qu'un nombre (par exemple, après validation du formulaire). Pour la saisie utilisateur, parseInt() ou

Blogs

Book Recommendations