Comment analyser des nombres en JavaScript

Lorsque vous lisez une valeur depuis un champ de formulaire, un paramètre d’URL ou une réponse d’API JSON, elle arrive presque toujours sous forme de chaîne de caractères. Avant de pouvoir effectuer des calculs avec, vous devez la convertir en nombre. JavaScript vous offre plusieurs méthodes pour y parvenir, et elles se comportent suffisamment différemment pour que choisir la mauvaise provoque des bugs subtils. Cet article couvre les principales méthodes, quand utiliser chacune, et les cas limites qui piègent le plus souvent les développeurs.

Comparaison rapide : méthodes de conversion chaîne-vers-nombre en JavaScript

parseInt() : analyse partielle pour les entiers

parseInt(string, radix) lit les caractères de gauche à droite et s’arrête dès qu’elle rencontre quelque chose qu’elle ne peut pas analyser. Cela la rend utile pour des chaînes comme "24px" ou "10rem", où le nombre vient en premier.

parseInt("24px", 10)   // 24
parseInt("3.99", 10)   // 3  (le point décimal arrête l'analyse)
parseInt("abc", 10)    // NaN (le premier caractère est invalide)

Passez toujours le paramètre radix. Sans lui, parseInt traite les chaînes commençant par 0x comme hexadécimales et analyse sinon en base 10. Bien que les moteurs modernes utilisent par défaut la base 10, omettre le radix est une source bien connue de bugs et rend votre intention peu claire.

parseInt("0xFF", 16)   // 255 — analyse hexadécimale explicite
parseInt("011", 10)    // 11  — le radix évite toute ambiguïté

Un comportement non évident : parseInt s’arrête au point décimal dans "6.022e23", donc parseInt("6.022e23", 10) retourne 6, pas 602200000000000000000000. N’utilisez pas parseInt pour tronquer de grands nombres à virgule flottante. Utilisez plutôt Math.trunc().

parseFloat() : analyse partielle pour les décimaux

parseFloat() fonctionne de la même manière que parseInt mais préserve la partie décimale. Elle n’a pas de paramètre radix et analyse toujours en base 10.

parseFloat("3.14rem")  // 3.14
parseFloat("1e3")      // 1000 — comprend la notation scientifique
parseFloat("px10")     // NaN  — le premier caractère est invalide

Utilisez parseFloat lorsque l’entrée peut contenir une valeur décimale et que vous souhaitez la préserver.

Number() et l’opérateur unaire + : conversion stricte

Number() et l’opérateur unaire + exigent tous deux que la chaîne entière soit un nombre valide. Si une partie ne l’est pas, vous obtenez NaN. Cette rigueur est un avantage lorsque vous travaillez avec des réponses d’API ou des données de formulaire validées, où une analyse partielle serait une erreur silencieuse.

Number("42")     // 42
Number("3.14")   // 3.14
Number("42px")   // NaN — plus strict que parseInt
Number("")       // 0   — attention à ce cas
+"42"            // 42  — comportement identique, syntaxe plus courte

Le cas limite de la chaîne vide est important dans le traitement des formulaires. Number("") retourne 0, pas NaN, ce qui peut masquer une valeur manquante. Vérifiez toujours l’entrée vide avant de convertir.

Les séparateurs numériques ne fonctionnent pas à l’exécution

Le code source JavaScript autorise 1_000_000 comme littéral numérique, mais cette syntaxe ne se transpose pas à l’analyse de chaînes.

parseInt("1_000", 10)   // 1 — l'analyse s'arrête au trait de soulignement
Number("1_000")         // NaN

Si votre API ou saisie utilisateur utilise des traits de soulignement comme séparateurs de milliers, supprimez-les d’abord avec str.replace(/_/g, "").

BigInt() : analyse de grands entiers

Le type Number de JavaScript perd en précision au-delà de Number.MAX_SAFE_INTEGER (2⁵³ − 1). Pour des valeurs plus grandes — identifiants de base de données, valeurs cryptographiques, entiers financiers — utilisez BigInt().

BigInt("9007199254740993")   // 9007199254740993n — exact
Number("9007199254740993")   // 9007199254740992  — décalé d'une unité

Passez la chaîne directement à BigInt(). Ne la passez pas d’abord par parseInt, car la précision est déjà perdue à ce stade. Notez que les valeurs BigInt ne peuvent pas être mélangées avec des valeurs Number ordinaires dans des opérations arithmétiques sans conversion explicite.

Analyse tenant compte des paramètres régionaux

JavaScript n’a pas de fonction intégrée pour analyser des nombres formatés selon les paramètres régionaux comme "1.234,56" (courant dans les locales allemandes ou espagnoles). Vous devez normaliser la chaîne manuellement avant l’analyse :

const raw = "1.234,56"
const normalized = raw.replace(/\./g, "").replace(",", ".")
parseFloat(normalized) // 1234.56

Quelle méthode devriez-vous utiliser ?

• Saisie utilisateur ou valeurs CSS avec unités → parseInt(str, 10) ou parseFloat()
• Réponses d’API ou données strictement validées → Number() ou opérateur unaire +
• Entiers au-delà de 2⁵³ − 1 → BigInt()
• Toujours valider que le résultat n’est pas NaN avant de l’utiliser :

const qty = parseInt(input, 10)
if (Number.isNaN(qty)) {
  // gérer l'entrée invalide
}

Utilisez Number.isNaN(), pas la fonction globale isNaN(). La version globale convertit d’abord son argument, ce qui signifie que isNaN("") retourne false même si "" n’est pas un nombre.

Conclusion

La bonne méthode d’analyse de nombres en JavaScript dépend de ce que vous savez sur votre entrée. Utilisez parseInt ou parseFloat lorsque l’analyse partielle est acceptable et attendue. Utilisez Number() ou l’opérateur unaire + lorsque la chaîne entière doit être un nombre valide. Recourez à BigInt() lorsque la précision compte pour de grands entiers. Dans tous les cas, vérifiez la présence de NaN avant d’utiliser le résultat.

FAQ

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.