Astuce rapide : comment convertir une chaîne en nombre en JavaScript

En JavaScript, il existe de nombreuses façons de convertir entre Types de données. Nous avons déjà couvert comment convertir un nombre en chaîne. Dans ce court tutoriel, nous verrons comment vous pouvez convertir une chaîne en nombre en JavaScript.

Il existe de nombreuses situations dans lesquelles un nombre peut être stocké sous forme de chaîne. Par exemple, les valeurs reçues d’un élément de formulaire sont toujours des chaînes.

En général, vous pouvez traiter une chaîne JavaScript qui contient un nombre (et seulement un nombre) comme s’il s’agissait d’un nombre, et JavaScript effectuera automatiquement la conversion de chaîne en nombre pour vous. Cependant, vous devez parfois extraire un nombre d’une chaîne ou exercer un contrôle accru sur la manière dont la conversion est effectuée.

Dans cette astuce rapide, nous aborderons trois manières de convertir une chaîne en nombre.

Convertir une chaîne en nombre à l’aide d’un nombre

Le moyen le plus direct de convertir une chaîne en nombre en JavaScript est d’utiliser la fonction intégrée Number fonction constructeur. Par exemple:

const str = "10"
console.log(str); 
console.log(typeof str); 

const number = Number(str);
console.log(number); 
console.log(typeof number); 

Lors de l’enregistrement de la valeur de str et son type dans la console, le résultat est 10 sous forme de chaîne et string respectivement. Après conversion, le résultat est 10 sous forme de nombre et number respectivement.

Vous pouvez voir l’exemple en action dans la démo CodePen suivante.

Voir le stylo
Convertir une chaîne en nombre avec Number() par SitePoint (@SitePoint)
sur CodePen.

Veuillez noter que si vous passez une chaîne non numérique à un nombre, NaN sera retourné.

Convertir une chaîne en nombre à l’aide de parseInt() et parseFloat()

Une autre approche utilise parseInt() et parseFloat(). Comme vous pouvez constater, parseInt() analyse une chaîne en un entier, alors que parseFloat() analyse une chaîne en un nombre avec des points décimaux.

Par exemple:

const str = "10.9"
console.log(str); 
console.log(typeof str); 

const intNumber = parseInt(str);
console.log(intNumber); 
console.log(typeof intNumber); 

const floatNumber = parseFloat(str);
console.log(floatNumber); 
console.log(typeof floatNumber); 

Semblable à la première approche, lors de l’enregistrement de la valeur de str et son type dans la console, le résultat est 10.1 sous forme de chaîne et string respectivement. Cependant, lors de l’analyse str utilisant parseIntla valeur de intNumber devient 10 et son type est number.

D’autre part, lors de l’analyse str utilisant parseFloatla valeur de floatNumber devient 10.1 sous la forme d’un nombre et son type est number.

Vous pouvez voir l’exemple en action dans la démo CodePen suivante.

Voir le stylo
Convertir une chaîne en nombre avec parseInt() et parseFloat() par SitePoint (@SitePoint)
sur CodePen.

Deuxième argument de parseInt

parseInt() prend un deuxième argument qui spécifie la base du nombre à analyser à partir de la chaîne. Cet argument est en fait facultatif, mais il est fortement recommandé de toujours le fournir.

Sans ce second argument, parseInt effectue automatiquement base détection. Autrement dit, il détecte la base d’un nombre par son format dans la chaîne. Un nombre commençant 0x ou 0X est considéré comme hexadécimal (base 16), et tous les autres nombres sont considérés comme décimaux.

Ainsi, par exemple, si vous deviez appeler parseInt("08"), la valeur d’entrée serait considérée comme un nombre octal ; mais 8 n’est pas un chiffre octal (car la numérotation octale est de 0 à 7), donc la fonction renverrait une valeur de zéro, pas de huit.

Pour éviter toute confusion, spécifiez toujours la base lors de l’utilisation parseInt().

Convertir une chaîne en nombre à l’aide de Unary Plus

La troisième façon de convertir une chaîne en nombre consiste à utiliser le plus unaire (+). Si le plus unaire est utilisé avant un opérande, il tente de le convertir en nombre. Ainsi, si l’opérande est une chaîne contenant un nombre, le plus unaire le convertira en nombre.

Par exemple:

const str = "10";
console.log(typeof str); 
console.log(+str); 
console.log(typeof +str); 

Lorsque vous enregistrez le type de strcomme prévu, c’est string. Cependant, lorsque vous enregistrez la valeur de +str et son genre, 10 et number sont respectivement connectés à la console.

Vous pouvez voir l’exemple en action dans la démo CodePen suivante.

Voir le stylo
Utiliser Unary pour convertir des chaînes par SitePoint (@SitePoint)
sur CodePen.

Comment gérer les caractères non numériques dans les chaînes

Il est important de prendre en compte les cas où une chaîne peut contenir des caractères autres que des nombres et la façon dont chaque approche gère cela.

Lors de l’utilisation Number(), si la chaîne contient des caractères autres que des chiffres, des signes plus (+) et moins (-) au début, ou des points décimaux, la valeur renvoyée est la valeur spéciale NaN (Not-a-Number). NaN est une propriété globale qui représente Not-a-Number. Il est retourné par quelques opérations numériques lorsque les opérandes ou les paramètres de ces opérations ne sont pas des nombres ou ne peuvent pas être utilisés pour cette opération mathématique spécifique.

D’autre part, parseInt() et parseFloat() analyse la chaîne si le nombre est au début de la chaîne. Il supprime le reste des caractères et prend le nombre rencontré au début de la chaîne. Cependant, si la chaîne commence par des caractères autres que des chiffres, des signes plus (+) et moins (-) au début, ou des points décimaux, la valeur renvoyée est la valeur spéciale NaN (Not-a-Number).

Vous pouvez le voir en action dans la démo CodePen suivante.

Voir le stylo
Différence entre nombre et parseInt par SitePoint (@SitePoint)
sur CodePen.

Comme tu peux le voir, Number() renvoie NaN puisque la chaîne contient px. Cependant, parseInt() Retour 10 puisque c’est au début de la chaîne.

Vous pouvez vérifier si une valeur est NaN en utilisant la fonction globale isNaN().

Conclusion

Ce court tutoriel a couvert trois façons de convertir une chaîne en nombre en JavaScript. Number() peut convertir une chaîne en nombre, qu’il s’agisse d’un flottant ou d’un entier. Cependant, si la chaîne contient d’autres caractères, elle renvoie NaN. Ceci est utile si vous souhaitez garantir une conversion stricte de la chaîne.

D’autre part, parseInt() et parseFloat() sont des approches plus flexibles en termes de gestion d’autres caractères dans le nombre. Cependant, ces deux fonctions ne peuvent pas être utilisées de manière interchangeable dans certains cas. Par exemple, si le nombre dans la chaîne est un flottant et que vous utilisez parseInt()vous obtiendrez une valeur incorrecte par rapport à la chaîne.

Bien que l’unaire soit facile à utiliser, il peut réduire la lisibilité de votre code. Quelle que soit la méthode que vous choisissez, il est important de rechercher les cas où le résultat renvoyé pourrait être NaN.

Si vous avez trouvé cet article utile, vous pouvez également profiter de ce qui suit :