Convertir une chaîne de caractères en nombre en JavaScript
Publié le
Vous récupérez "42" depuis un champ de formulaire ou
une API, mais vous avez besoin d'un vrai nombre pour faire une addition. Le problème est
discret et facile à rater : JavaScript ne lève pas d'erreur, il concatène simplement les
deux chaînes. Résultat, "5" + 3 ne donne pas
8 mais "53". Il
existe plusieurs façons de convertir correctement une chaîne en nombre. Voici ce qu'il
faut savoir pour choisir la bonne.
Number() : la méthode la plus sûre
Number() est la conversion explicite et stricte. Elle
tente de transformer la chaîne entière en nombre. Si la chaîne contient autre chose
qu'un nombre (même un seul caractère parasite), elle renvoie
NaN.
Number("42.5"); // → 42.5
Number(" 42 "); // → 42 (les espaces sont ignorés)
Number(""); // → 0
Number("42px"); // → NaN
Number("abc"); // → NaN
C'est la méthode à privilégier quand vous contrôlez la source de la donnée : champ numérique d'un formulaire, valeur d'une API bien typée, paramètre d'URL que vous avez déjà nettoyé. Elle est prévisible et ne laisse rien passer silencieusement.
Number() avec une vérification
isNaN() si la chaîne peut être invalide :
const n = Number(str); if (isNaN(n)) { /* gérer l'erreur */ }
parseInt() : pour obtenir un entier
parseInt() lit la chaîne de gauche à droite et
s'arrête dès qu'elle rencontre un caractère non numérique. Elle renvoie la partie
entière de ce qu'elle a pu lire, ou NaN si le premier
caractère n'est pas un chiffre.
parseInt("42.8", 10); // → 42 (partie décimale ignorée)
parseInt("42px", 10); // → 42 (le "px" est ignoré)
parseInt("abc", 10); // → NaN
10, les anciens moteurs JavaScript peuvent interpréter
une chaîne commençant par 0 en base 8.
parseInt("08") pouvait renvoyer
0 dans ces environnements.
parseInt("08", 10) renvoie toujours
8.
parseFloat() : pour garder les décimales
parseFloat() fonctionne comme
parseInt() mais conserve la partie décimale. Elle est
particulièrement utile quand vous travaillez avec des valeurs CSS qui mélangent nombre
et unité.
parseFloat("42.8px"); // → 42.8 (l'unité est ignorée)
parseFloat("2.5rem"); // → 2.5
parseFloat(""); // → NaN (≠ Number("") qui renvoie 0)
parseFloat("abc"); // → NaN
La différence principale avec Number() : une chaîne
vide renvoie NaN avec
parseFloat(), et
0 avec Number().
Selon votre contexte, l'un ou l'autre peut être le bon comportement.
L'opérateur + unaire : pratique, mais à manier avec
soin
Placer un + devant une chaîne la convertit en nombre.
Le résultat est identique à Number() dans la
quasi-totalité des cas. C'est une syntaxe courante dans les bases de code existantes, et
il est utile de la reconnaître.
+"42.5"; // → 42.5
+"42px"; // → NaN
+""; // → 0
+str peut être confondu avec une addition ou passer
inaperçu lors d'une relecture. Réservez cette syntaxe aux cas simples où vous contrôlez
déjà la donnée. Pour tout le reste, Number() est plus
explicite.
Tableau récapitulatif
Pour y voir clair d'un coup d'œil, voici comment chaque méthode se comporte sur les cas les plus courants :
| Méthode |
"42"
|
"42.8"
|
"42px"
|
""
|
"abc"
|
|---|---|---|---|---|---|
Number()
|
42 | 42.8 | NaN | 0 | NaN |
parseInt()
|
42 | 42 | 42 | NaN | NaN |
parseFloat()
|
42 | 42.8 | 42.8 | NaN | NaN |
Opérateur +
|
42 | 42.8 | NaN | 0 | NaN |
Un piège à connaître : parseInt() sur un nombre, pas
sur une chaîne
parseInt() est conçu pour convertir des
chaînes en entiers. L'utiliser directement sur un nombre flottant très petit
peut produire un résultat surprenant, à cause de la notation scientifique que JavaScript
utilise en interne pour représenter ces valeurs.
// Parce que 0.0000005.toString() === "5e-7"
// et parseInt s'arrête au "e", renvoyant 5
// La bonne approche pour obtenir un entier depuis un nombre :
Math.floor(0.0000005); // → 0
La règle est simple : parseInt() sert à convertir des
chaînes, Math.floor(),
Math.ceil() ou
Math.round() servent à arrondir des nombres déjà
numériques. Ne les interchangez pas.
Quand utiliser quelle méthode ?
En pratique, le bon choix dépend de ce que contient la chaîne et de ce que vous voulez en faire.
-
Chaîne provenant d'un champ texte ou d'une API, contenu purement numérique : utilisez
Number()et vérifiez avecisNaN(). -
Valeur CSS avec unité (
"42px","2.5rem") : utilisezparseFloat(). -
Vous avez besoin d'un entier et la chaîne peut contenir du texte après le nombre :
utilisez
parseInt(chaîne, 10). -
Donnée déjà nettoyée, contexte où la concision compte : l'opérateur
+est acceptable, mais restez cohérent dans votre base de code.
Number(). C'est la méthode la plus prévisible, la plus
lisible et la plus facile à déboguer. Passez aux autres uniquement quand votre cas
d'usage le justifie clairement.
Conclusion
JavaScript offre plusieurs façons de convertir une chaîne en nombre, et elles ne sont
pas interchangeables. Number() est stricte et
prévisible. parseInt() extrait un entier en ignorant
le reste. parseFloat() fait la même chose en
conservant les décimales. L'opérateur + est compact
mais moins lisible. Comprendre ces différences, c'est éviter une catégorie entière de
bugs silencieux, ceux qui ne lèvent pas d'erreur mais calculent faux depuis le début.
