Comment convertir des nombres en chaînes de caractères en JavaScript : guide complet avec exemples

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

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

1. Introduction

JavaScript est un langage de programmation d’une importance cruciale dans le développement web. En particulier, la conversion de types joue un rôle clé dans de nombreux scénarios, tels que la validation des entrées de formulaire et le formatage des réponses d’API.
Dans cet article, nous fournissons une explication détaillée sur la façon de convertir des nombres en chaînes de caractères en JavaScript, couvrant tout, des usages de base aux techniques avancées.

En lisant cet article, même les débutants seront capables de comprendre comment convertir des nombres en chaînes et d’appliquer ces techniques efficacement dans des projets de développement réels.

2. Méthodes de base pour convertir des nombres en chaînes en JavaScript

JavaScript propose plusieurs manières de convertir des nombres en chaînes. Dans cette section, nous expliquons trois des méthodes les plus couramment utilisées.

2.1 Utilisation de la fonction String()

La façon la plus simple de convertir un nombre en chaîne est d’utiliser la fonction intégrée String().

Exemple d’utilisation

let num = 123;
let str = String(num);
console.log(typeof str); // "string"

Explication

• En écrivant simplement String(number), la valeur numérique est convertie en chaîne.
• Le nombre original n’est pas modifié ; à la place, une nouvelle valeur de chaîne est renvoyée.

Avantages et considérations

• Le code est simple et très lisible.
• Le type de données est explicitement garanti, réduisant la probabilité d’erreurs.
• Cependant, il ne prend pas en charge le retrait des espaces ou l’application d’un formatage spécial.

2.2 Utilisation de la méthode toString()

La méthode toString() est une méthode intégrée des objets nombre JavaScript et permet des conversions plus flexibles.

Exemple d’utilisation

let num = 456;
let str = num.toString();
console.log(str); // "456"

Explication

• Étant donné qu’il s’agit d’une méthode de l’objet nombre, elle peut être appelée directement sur des valeurs numériques.
• Elle prend également en charge la conversion vers différents systèmes numériques, comme le binaire ou l’hexadécimal.

Exemple avec spécification de la base

let num = 255;
let binaryStr = num.toString(2); // binary
console.log(binaryStr); // "11111111"

Avantages et considérations

• En spécifiant une base, vous pouvez convertir des nombres en chaînes tout en changeant le système numérique.
• Une erreur se produira si la valeur est undefined ou null, il faut donc vérifier le type au préalable.

2.3 Utilisation des littéraux de gabarit

Dans le JavaScript moderne, les littéraux de gabarit (backticks) offrent une façon simple et intuitive de convertir des nombres en chaînes.

Exemple d’utilisation

let num = 789;
let str = `${num}`;
console.log(str); // "789"

Explication

• Les littéraux de gabarit permettent une conversion de chaîne intuitive.
• Ils peuvent être facilement combinés avec d’autres chaînes, permettant un formatage flexible.

Avantages et considérations

• La syntaxe est simple et visuellement facile à comprendre.
• Prend en charge le formatage complexe, y compris les expressions.
• Les littéraux de gabarit sont pris en charge depuis ES6, il faut donc faire attention aux navigateurs plus anciens.

3. Sujets avancés : conversion et formatage des valeurs numériques spéciales

Dans cette section, nous explorons des techniques avancées pour convertir des nombres en chaînes en JavaScript. En particulier, la gestion des valeurs décimales et la spécification de formats de sortie sont fréquemment requises dans des scénarios de développement réels.

3.1 Gestion des décimales et spécification du format

Lors de la conversion de nombres contenant des points décimaux en chaînes, vous pouvez utiliser des méthodes qui vous permettent de contrôler le format d’affichage.

1. Utilisation de la méthode toFixed()

La méthode toFixed() génère une chaîne tout en spécifiant le nombre de chiffres après le point décimal.

Exemple d’utilisation

let num = 123.456;
let str = num.toFixed(2);
console.log(str); // "123.46"

Explication

• La valeur est arrondie au nombre de décimales spécifié en argument.
• La valeur de retour est une chaîne, donc aucune conversion supplémentaire n’est nécessaire.

Avantages et considérations

• Les valeurs peuvent être arrondies davantage que prévu, il peut donc être nécessaire de gérer cela lorsque la précision est critique.
• Si aucun argument n’est spécifié, la valeur par défaut est zéro décimale.

Exemple pratique : affichage de la devise

let price = 1234.5;
let formattedPrice = "$" + price.toFixed(2);
console.log(formattedPrice); // "$1234.50"

2. Utilisation de la méthode toPrecision()

La méthode toPrecision() génère une chaîne en spécifiant le nombre total de chiffres significatifs.

Exemple d’utilisation

let num = 123.456;
let str = num.toPrecision(4);
console.log(str); // "123.5"

Explication

• En spécifiant le nombre de chiffres significatifs, l’arrondi et le formatage sont appliqués simultanément.

Avantages et considérations

• Le résultat peut être affiché en notation exponentielle, ce qui le rend inadapté lorsqu’un format fixe est requis.

3.2 Conversion aux formats monétaire et pourcentage

Lors de l’affichage de données, il est souvent nécessaire de formater les valeurs en tant que monnaie ou pourcentage.

1. Formatage monétaire avec Intl.NumberFormat

L’objet Intl.NumberFormat vous permet de formater facilement les nombres en tant que monnaie.

Exemple d’utilisation

let price = 1234567.89;
let formatted = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(price);
console.log(formatted); // "￥1,234,568"

Explication

• En spécifiant la locale et le code de la monnaie, le nombre est automatiquement formaté correctement.
• Les séparateurs de milliers sont appliqués automatiquement, éliminant le besoin de traitement manuel.

Exemple pratique : formatage en USD

let usdPrice = 1234.56;
let formattedUSD = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(usdPrice);
console.log(formattedUSD); // "$1,234.56"

2. Conversion au format pourcentage

L’exemple suivant montre comment formater facilement les nombres en pourcentage.

Exemple d’utilisation

let rate = 0.1234;
let percent = new Intl.NumberFormat('en-US', { style: 'percent', minimumFractionDigits: 2 }).format(rate);
console.log(percent); // "12.34%"

Explication

• Les valeurs décimales sont converties en notation pourcentage, avec un contrôle sur le nombre de décimales.

4. Considérations importantes et gestion des erreurs lors de la conversion de nombres et de chaînes

Bien que JavaScript facilite la conversion entre nombres et chaînes, des erreurs ou des comportements inattendus peuvent survenir dans certains cas. Cette section présente les principales considérations ainsi que des exemples pratiques de gestion des erreurs.

4.1 Détection et gestion de NaN (Not a Number)

En JavaScript, NaN (Not a Number) apparaît lorsque des opérations numériques ou des conversions échouent. Passons en revue comment le détecter et le gérer correctement.

1. Détection de base de NaN

Exemple : génération de NaN

let result = "abc" * 2; // Invalid operation
console.log(result); // NaN

Comme indiqué ci-dessus, les opérations entre chaînes et nombres sont invalides, ce qui entraîne NaN.

Exemple : utilisation de isNaN()

let value = "abc" * 2;
console.log(isNaN(value)); // true

2. Utilisation de Number.isNaN()

En ES6, Number.isNaN() a été introduit pour une détection plus précise.

Exemple : détection stricte

console.log(isNaN("123"));          // false (due to type coercion)
console.log(Number.isNaN("123"));   // false (no type coercion)

Points clés

• isNaN() effectue une coercition de type, ce qui peut conduire à des résultats inattendus.
• Number.isNaN() ne réalise pas de coercition de type, ce qui le rend plus fiable.

4.2 Techniques pour prévenir les erreurs de conversion de type

1. Exemple de vérification de type sécurisée

Pour éviter les erreurs inattendues causées par le mélange de nombres et de chaînes, vous pouvez effectuer des vérifications de type à l’avance.

Exemple : vérification du type avant le traitement

let value = "123";

if (typeof value === "number") {
  console.log(value.toString());
} else if (!isNaN(value)) {
  console.log(String(Number(value)));
} else {
  console.log("Invalid input value");
}

Explanation

• By checking the data type in advance and handling invalid values, overall safety is improved.

2. Setting Default Values

Setting default values is also an effective strategy when invalid input is provided.

Example: Applying a Default Value

function safeConvert(value) {
  return isNaN(value) ? "0" : String(value);
}

console.log(safeConvert("123")); // "123"
console.log(safeConvert("abc")); // "0"

Key Points

• By using isNaN() , processing can continue safely with a default value when errors occur.

4.3 Handling Floating-Point Precision Errors

JavaScript floating-point calculations can produce precision errors. Let’s review how to mitigate them.

1. Example of a Precision Error

let result = 0.1 + 0.2;
console.log(result); // 0.30000000000000004

2. Methods to Eliminate Precision Errors

Method 1: Using toFixed()

let result = (0.1 + 0.2).toFixed(2);
console.log(result); // "0.30"

Method 2: Using Integer Arithmetic

let result = (0.1 * 10 + 0.2 * 10) / 10;
console.log(result); // 0.3

Key Points

• Floating-point arithmetic can introduce errors, so countermeasures are necessary.
• For financial calculations or precision-critical logic, integer arithmetic is recommended.

5. FAQ: Frequently Asked Questions and Troubleshooting

When converting numbers to strings in JavaScript, developers from beginners to intermediate levels often encounter various questions and issues. This section introduces common questions and their solutions.

5.1 How can I verify that a number has been converted into a string?

Question:
I want to confirm whether a number has been successfully converted into a string. Is there a simple way to check?

Answer:
You can verify the conversion by checking the data type of the result.

Example: Using the typeof Operator

let num = 123;
let str = String(num);
console.log(typeof str); // "string"

Key Points:

• The typeof operator returns the type of a variable as a string.
• To check whether a value is a number, use typeof num === « number » .

5.2 Why do errors occur when converting numbers?

Question:
An error occurred during code execution. What could be the cause?

Answer:
Errors may occur when the value being converted is undefined or null.

Example: Handling undefined and null Safely

let value = null;

// Convert safely
let str = value !== null && value !== undefined ? String(value) : "Default value";
console.log(str); // "Default value"

Key Points:

• Checking for value existence in advance helps prevent errors.
• Setting a default value improves the stability of your code.

5.3 Why does the converted string not match the expected format?

Question:
After converting a number to a string, the number of decimal places or format is not what I expected. What should I do?

Answer:
Use toFixed() or Intl.NumberFormat to explicitly specify the format.

Example 1: Fixing Decimal Places

let num = 123.456;
let str = num.toFixed(2);
console.log(str); // "123.46"

Example 2: Adding Thousand Separators or Currency Symbols

let price = 1234567.89;
let formatted = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(price);
console.log(formatted); // "￥1,234,568"

Key Points:

• Select the appropriate method to control numeric display formats.
• International formatting should be considered when necessary.

5.4 How should I handle accidental conversion of non-numeric strings?

Question :
Une chaîne a été traitée à tort comme un nombre, provoquant une erreur. Comment puis‑je éviter les conversions incorrectes ?

Réponse :
Validez les données d’entrée à l’avance et assurez‑vous qu’elles sont numériques avant la conversion.

Exemple : Combinaison de validation et de conversion

let input = "abc"; // User input

if (!isNaN(input)) {
  let str = String(Number(input));
  console.log(str);
} else {
  console.log("Invalid input value.");
}

Points clés :

• Combiner la validation des entrées avec la gestion des erreurs aide à prévenir le traitement de données invalides.
• Une prudence supplémentaire est requise lors du traitement des entrées utilisateur.

5.5 Comment maintenir la précision des nombres à virgule flottante ?

Question :
Je veux résoudre le problème où 0.1 + 0.2 donne 0.30000000000000004.

Réponse :
Comme l’arithmétique à virgule flottante introduit des erreurs de précision, utilisez l’arithmétique entière ou le formatage décimal fixe.

Exemple 1 : Utilisation de l’arithmétique entière

let result = (0.1 * 10 + 0.2 * 10) / 10;
console.log(result); // 0.3

Exemple 2 : Correction des décimales

let result = (0.1 + 0.2).toFixed(2);
console.log(result); // "0.30"

Points clés :

• Les calculs à virgule flottante peuvent produire des erreurs, il est donc nécessaire de prendre des mesures préventives.
• Séparer les données de calcul des données d’affichage améliore la sécurité et la précision.

6. Résumé et ressources associées

Cet article a fourni une explication complète de la façon de convertir des nombres en chaînes en JavaScript, couvrant les méthodes de base, les techniques avancées, les considérations importantes et les FAQ. Passons en revue les points clés.

6.1 Résumé des points clés

1. Méthodes de conversion de base

• Fonction String() : Simple et adaptée aux débutants.
• Méthode toString() : Flexible, prend en charge la conversion en fonction du radix et du système numérique.
• Littéraux de gabarits : Syntaxe moderne offrant clarté et facilité d’utilisation.

2. Formatage avancé et contrôle d’affichage

• toFixed() : Contrôle le nombre de décimales.
• Intl.NumberFormat : Simplifie le formatage des devises et des pourcentages.

3. Gestion des erreurs et bonnes pratiques

• Détection de NaN : Utilisez isNaN() et Number.isNaN() pour éviter les erreurs.
• Conversion de type sécurisée : Validez les types de données avant le traitement.
• Gestion de la précision des nombres à virgule flottante : Utilisez l’arithmétique entière ou le contrôle décimal fixe.

4. Dépannage basé sur la FAQ

• Solutions pratiques pour les erreurs d’entrée et les problèmes de formatage.
• Exemples de code concrets pour renforcer les compétences de dépannage.

6.2 Cas d’utilisation pratiques

Les techniques présentées dans cet article peuvent être appliquées dans les scénarios suivants :

• Affichages de prix e‑commerce : Améliorer la lisibilité grâce au formatage des devises.
• Outils de visualisation de données : Formater les valeurs numériques avec des unités ou des pourcentages.
• Validation des entrées de formulaire : Valider et traiter en toute sécurité les entrées utilisateur.
• Journalisation et débogage : Convertir les valeurs numériques en chaînes pour une sortie claire.

6.3 Liens et références associés

Pour ceux qui souhaitent approfondir ou consulter la documentation officielle, les ressources suivantes sont recommandées :

• Objet String en JavaScript MDN Web Docs – String
• Guide détaillé sur toFixed() et le formatage des nombres MDN Web Docs – Number.toFixed()
• Utilisation de Intl.NumberFormat MDN Web Docs – Intl.NumberFormat

6.4 Remarques finales

Convertir des nombres en chaînes en JavaScript est une compétence fondamentale utilisée dans toutes les applications web.

Compétences acquises grâce à cet article :

• Comprendre les techniques de conversion de type de base.
• Formater les données numériques de manière appropriée selon les contextes.
• Écrire du code stable et résistant aux erreurs.

Utilisez ces techniques pour créer des applications web pratiques et fiables.

Notes supplémentaires et apprentissage futur

Pour améliorer davantage vos compétences en JavaScript, envisagez d’apprendre les conversions inverses des chaînes en nombres ainsi que des techniques de manipulation de types de données plus avancées. Ces sujets seront abordés dans de futurs articles—restez à l’écoute !