Comment convertir des chaînes en nombres en JavaScript : Number(), parseInt(), parseFloat() et meilleures pratiques

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction

JavaScript est l’un des langages de programmation les plus largement utilisés dans le développement web. Parmi ses nombreuses fonctionnalités, la conversion de chaînes en nombres est une opération fondamentale souvent requise dans les applications réelles.

Par exemple, les valeurs saisies par les utilisateurs dans les formulaires ou les données récupérées depuis des API sont souvent traitées comme des chaînes. Ces valeurs ne peuvent pas être utilisées directement pour des calculs ou des comparaisons à moins d’être converties en types numériques.

Dans cet article, nous expliquerons des méthodes concrètes pour convertir des chaînes en nombres en JavaScript. Nous couvrirons le fonctionnement de chaque fonction et technique, leurs différences, ainsi que les points importants à garder à l’esprit. Utilisez ce guide comme référence pratique.

2. Aperçu des types de données en JavaScript

JavaScript est connu comme un langage à typage dynamique, ce qui signifie que le type d’une variable est déterminé automatiquement pendant l’exécution du programme. Bien que cela offre de la flexibilité, cela peut également entraîner des erreurs ou des comportements inattendus si la conversion de type n’est pas gérée avec soin.

Types de données principaux

Les types de données JavaScript peuvent être grossièrement divisés en les deux catégories suivantes.

1. Types primitifs

• Number : représente les nombres entiers et à virgule flottante.
• String : représente les données textuelles.
• Boolean : ne possède que vrai ou faux.
• Undefined : indique qu’aucune valeur n’a été assignée.
• Null : représente explicitement l’absence de valeur.
• Symbol : utilisé comme identifiant unique.

1. Types d’objets

• Inclut les tableaux (Array), les fonctions (Function), les dates (Date), et plus encore.

Typage dynamique et pièges de conversion de type

En JavaScript, les types de variables peuvent être convertis implicitement ou explicitement. Une attention particulière est requise lorsqu’on travaille avec des chaînes et des nombres.

Exemple :

console.log("10" + 5); // Output: "105" (string concatenation)
console.log("10" - 5); // Output: 5 (numeric calculation)

Comme le montre l’exemple ci‑dessus, le même opérateur peut se comporter différemment selon le contexte. La conversion de type explicite est essentielle pour éviter des résultats inattendus.

3. Méthodes de conversion des chaînes en nombres

JavaScript propose plusieurs façons de convertir des chaînes en nombres. Cette section explique en détail quatre méthodes couramment utilisées.

La fonction Number()

La fonction Number() est la manière la plus basique de convertir une chaîne en nombre.

Exemples :

console.log(Number("42"));    // Output: 42
console.log(Number("3.14"));  // Output: 3.14
console.log(Number(""));      // Output: 0 (empty string becomes 0)
console.log(Number("abc"));   // Output: NaN (returns NaN if conversion fails)

Caractéristiques :

• Convertit à la fois les entiers et les nombres à virgule flottante.
• Une chaîne vide est convertie en 0.
• Retourne NaN (Not‑a‑Number) si la conversion échoue.

Remarque importante :
NaN est une valeur numérique spéciale qui ne peut pas être utilisée dans des calculs. L’utiliser par inadvertance peut entraîner un comportement inattendu.

La fonction parseInt()

La fonction parseInt() convertit une chaîne en entier. Elle analyse la chaîne depuis le début et s’arrête au premier caractère non numérique.

Exemples :

console.log(parseInt("42"));         // Output: 42
console.log(parseInt("42.99"));      // Output: 42 (decimal part is ignored)
console.log(parseInt("10abc"));      // Output: 10
console.log(parseInt("abc10"));      // Output: NaN

Spécification de la base :

console.log(parseInt("10", 2)); // Output: 2 (binary)
console.log(parseInt("A", 16)); // Output: 10 (hexadecimal)

Caractéristiques :

• Utile lorsque seule la partie entière est requise.
• Prend en charge la conversion depuis différents systèmes numériques.

Attention :
Si la base (radix) est omise, le résultat peut dépendre du format de la chaîne, ce qui peut provoquer des résultats inattendus.

La fonction parseFloat()

La fonction parseFloat() convertit une chaîne en nombre à virgule flottante.

Exemples :

console.log(parseFloat("3.14"));     // Output: 3.14
console.log(parseFloat("3.14abc"));  // Output: 3.14
console.log(parseFloat("abc3.14"));  // Output: NaN

Caractéristiques :

• Idéal pour gérer les valeurs décimales.
• Fonctionne correctement également pour les valeurs entières.

Attention :

• Comme parseInt(), il ignore les caractères après la partie numérique.

L’opérateur unaire plus (+)

L’opérateur unaire plus (+) offre un moyen court et simple d’effectuer une conversion de type.

Exemples :

console.log(+"42");      // Output: 42
console.log(+"3.14");    // Output: 3.14
console.log(+"abc");     // Output: NaN

Caractéristiques :

• Produit un code concis.
• Se comporte de la même manière que Number().

Attention :
Bien que concis, cette approche peut réduire la lisibilité. Pour des bases de code destinées aux débutants ou en équipe, Number() est souvent plus clair.

Résumé

La section suivante explique les différences entre ces méthodes et comment choisir la bonne.

4. Différences entre les méthodes de conversion et comment choisir

JavaScript offre plusieurs façons de convertir des chaînes en nombres, chacune avec un comportement distinct. Comprendre ces différences est essentiel pour choisir la bonne méthode.

Number() vs parseInt()

Number() évalue toute la chaîne comme une valeur numérique, tandis que parseInt() extrait uniquement la partie entière.

Exemple :

console.log(Number("42.5"));     // Output: 42.5
console.log(parseInt("42.5"));  // Output: 42

Directives d’utilisation :

• Utilisez Number() lorsque des valeurs numériques précises sont requises.
• Utilisez parseInt() lorsque les décimales doivent être ignorées.

parseInt() vs parseFloat()

parseInt() est limité aux entiers, tandis que parseFloat() gère les valeurs décimales.

Exemple :

console.log(parseInt("42.75"));     // Output: 42
console.log(parseFloat("42.75"));  // Output: 42.75

Directives d’utilisation :

• Utilisez parseInt() pour les nombres entiers comme les âges ou les identifiants.
• Utilisez parseFloat() pour les prix ou les mesures.

Number() vs opérateur unaire plus (+)

Number() et l’opérateur unaire plus se comportent de manière similaire, mais la lisibilité diffère.

Exemple :

console.log(Number("42"));  // Output: 42
console.log(+"42");         // Output: 42

Directives d’utilisation :

• Number() exprime clairement l’intention et est recommandé pour les projets d’équipe.
• L’opérateur unaire plus est utile lorsque la concision est privilégiée.

Gestion des cas spéciaux

Chaînes vides et valeurs invalides

Exemple :

console.log(Number(""));           // Output: 0
console.log(parseInt(""));         // Output: NaN
console.log(+"");                  // Output: 0
console.log(Number("abc"));        // Output: NaN
console.log(parseFloat("abc123")); // Output: NaN

Points clés :

• Utilisez Number() ou l’opérateur unaire + lorsque les chaînes vides doivent devenir 0.
• Soyez prudent avec parseInt() et parseFloat(), car un parsing partiel peut se produire.

Résumé

5. Gestion des erreurs lors de la conversion

Une gestion appropriée des erreurs est essentielle lors de la conversion de chaînes en nombres, surtout lorsqu’il s’agit d’entrées utilisateur ou de données externes.

Gestion de NaN (Not-a-Number)

Lorsque la conversion échoue, JavaScript renvoie NaN, qui est techniquement un type nombre mais ne peut pas être utilisé dans les calculs.

Exemple :

console.log(Number("abc"));      // Output: NaN
console.log(parseInt("xyz"));    // Output: NaN
console.log(+"test");            // Output: NaN

Points clés :

• Tout calcul impliquant NaN donne NaN.
• NaN === NaN renvoie false.

Utilisation de isNaN()

La fonction isNaN() vérifie si une valeur est NaN.

Exemple :

console.log(isNaN("abc")); // true
console.log(isNaN(42));    // false
console.log(isNaN(NaN));   // true

Attention :
isNaN() effectue une conversion de type implicite.

Utilisation de Number.isNaN()

Number.isNaN() effectue une vérification stricte sans conversion de type.

Exemple :

console.log(Number.isNaN("abc"));      // false
console.log(Number.isNaN(NaN));        // true
console.log(Number.isNaN(undefined));  // false

Recommandation :

• Utilisez Number.isNaN() pour une vérification d’erreur fiable.

Exemple : Gestion des entrées invalides

function safeConvert(input) {
  let value = Number(input);
  return Number.isNaN(value) ? 0 : value;
}

6. Exemples pratiques

Cette section présente des cas d’utilisation réels, incluant les entrées utilisateur, les tableaux, les formulaires et les données JSON.

1. Conversion des entrées utilisateur

function processUserInput(input) {
  let value = Number(input);

  if (Number.isNaN(value)) {
    console.log("Error: Please enter a number.");
    return null;
  }

  console.log("Entered value: " + value);
  return value;
}

2. Conversion des valeurs de chaîne dans les tableaux

let data = ["10", "20", "30", "40"];
let numbers = data.map(Number);
console.log(numbers);

3. Traitement des données de formulaire

function calculateTotalPrice(priceInput, quantityInput) {
  let price = parseFloat(priceInput);
  let quantity = parseInt(quantityInput);

  if (Number.isNaN(price) || Number.isNaN(quantity)) {
    console.log("Error: Please enter valid numbers.");
    return null;
  }

  let total = price * quantity;
  console.log("Total price: " + total);
  return total;
}

4. Conversion des données JSON

let jsonData = '[{"id": "1", "price": "120.5"}, {"id": "2", "price": "200"}]';
let products = JSON.parse(jsonData);

let total = products.reduce((sum, product) => {
  let price = Number(product.price);
  return sum + (Number.isNaN(price) ? 0 : price);
}, 0);

console.log("Total price: " + total);

7. Conclusion

Dans cet article, nous avons couvert la conversion de chaîne en nombre en JavaScript, des fondamentaux aux cas d’utilisation avancés.

Les points clés incluent la compréhension des types de données, le choix de la bonne méthode de conversion et la mise en œuvre d’une gestion d’erreurs appropriée.

La conversion de chaîne en nombre est une compétence de base mais essentielle pour le développement JavaScript réel. Pratiquez les exemples fournis ici et appliquez-les à vos propres projets pour améliorer la fiabilité et la précision.