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

JavaScript est assez flexible et offre de nombreuses façons différentes de convertir entre Types de données. Dans ce court tutoriel, nous verrons comment vous pouvez convertir un nombre en une chaîne en JavaScript. Vous souhaiterez peut-être le faire afin de rendre les données numériques plus lisibles pour les utilisateurs, par exemple, pour afficher le nombre dans le cadre d’une phrase.

Ce didacticiel explore quatre façons de convertir un nombre en chaîne en JavaScript. Nous recommandons différentes approches en fonction de vos besoins spécifiques et de votre cas d’utilisation :

• Interpolation de chaîne: Lors de l’insertion d’une valeur numérique dans une chaîne. Par exemple, afficher du texte sur une page Web comme « Vous avez utilisé sept crédits sur 24”. Vous pouvez aussi utiliser Enchaînement mais méfiez-vous.
• Chaîne de caractères ou toString(): Lors du changement du type d’une valeur numérique en une chaîne. Par exemple, utiliser des nombres comme entrées de fonctions ou d’API qui attendent une chaîne. String et toString() sont pour la plupart les mêmes, mais traitez undefined et null variables différemment.

Vous pourriez également être intéressé à comment convertir une chaîne en nombre si vous cherchez à faire l’action inverse.

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

Interpolation est probablement la manière la plus lisible d’utiliser des nombres dans des chaînes. Au lieu de convertir manuellement le nombre en chaîne, vous pouvez l’insérer dans une chaîne à l’aide de cette méthode.

Pour utiliser l’interpolation, enveloppez une chaîne avec des backticks (`) au lieu de guillemets (" ou '). Ensuite, dans la chaîne, vous pouvez insérer n’importe quelle variable en utilisant`${}` comme espace réservé. Cela s’appelle un modèle littéral et a une variété d’autres grands avantages.

Par exemple:

const number = 99;
console.log(`${number} percent of people love JavaScript`); 

Étant donné que la chaîne qui est connectée à la console est entourée de backticks, vous pouvez insérer une variable dans la chaîne en utilisant ${}.

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

Voir le stylo
Interpolation de chaînes en JavaScript par SitePoint (@SitePoint)
sur CodePen.

Convertir un nombre en chaîne à l’aide de la concaténation de chaînes

La deuxième approche est la concaténation de chaînes. Vous pouvez convertir un nombre en une chaîne à l’aide de la + opérateur.

Par exemple:

console.log(10 + "USD"); 
console.log(10 + ""); 

Voir le stylo
Convertir un nombre en chaîne avec concaténation par SitePoint (@SitePoint)
sur CodePen.

Bien que cette approche soit efficace (car elle nécessite le moins de code), elle peut rendre le code moins lisible.

Une mise en garde sur la concaténation de chaînes

Lorsque vous utilisez cette approche avec plusieurs nombres, un résultat inattendu peut se produire.

Par exemple:

const a = 2000;
const b = 468;
console.log(a + b + " motorway"); 

Depuis a + b est évalué avant d’atteindre la chaîne, l’opération est une addition numérique plutôt qu’une concaténation de chaînes. Une fois qu’une variable de chaîne ou un littéral est atteint, l’opération devient une concaténation de chaînes. Donc, le résultat est 2468 motorway.

Cependant, essayez de modifier le code comme suit :

const a = 2000;
const b = 468;
console.log("it is " + a + b + " motorway"); 

Car "it is" + a est évalué en premier, le + L’opérateur est utilisé pour la concaténation de chaînes pour le reste de l’expression. Ainsi, au lieu d’une opération d’addition entre a et b comme dans l’exemple précédent, il devient une opération de concaténation de chaînes entre les deux.

Cela peut être résolu en utilisant des parenthèses :

const a = 2000;
const b = 468;
console.log("it is " + (a + b) + " motorway"); 

L’addition entre a et b est effectuée en premier, ce qui conduit à l’opération d’addition entre les deux variables. Ensuite, la concaténation de chaînes est utilisée pour le reste de l’expression puisque le premier opérande est "it is".

Convertir un nombre en chaîne à l’aide de toString

La troisième approche utilise le toString() méthode. Cette méthode est disponible pour tous Types de données JavaScript, y compris les chiffres. Il convertit la valeur du nombre sur lequel il est utilisé et le renvoie.

Par exemple:

const number = 10;
console.log(number); 
console.log(typeof number); 

const numberStr = number.toString();
console.log(numberStr); 
console.log(typeof numberStr); 

Cet exemple montre le même résultat que celui de la première approche. Vous pouvez également le voir en action dans la démo CodePen suivante.

Voir le stylo
JS Convertir un nombre en chaîne en utilisant toString() par SitePoint (@SitePoint)
sur CodePen.

Convertir un nombre en chaîne à l’aide de chaîne

La quatrième approche utilise le String() fonction constructeur. Cette fonction accepte la variable à convertir comme premier paramètre. Il convertit le paramètre en chaîne et le renvoie.

Par exemple:

const number = 10;
console.log(number); 
console.log(typeof number); 

const numberStr = String(number);
console.log(numberStr); 
console.log(typeof numberStr); 

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

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

Voir le stylo
JS Convertir un nombre en chaîne en utilisant String () par SitePoint (@SitePoint)
sur CodePen.

Conclusion

Ce tutoriel vous montre quatre approches que vous pouvez utiliser pour convertir un nombre en chaîne en JavaScript. Bien que ces méthodes puissent produire les mêmes résultats lorsqu’elles sont utilisées avec des nombres, il existe des cas où une approche serait meilleure que les autres.

La principale différence entre l’utilisation String() et toString() est-ce String() marche avec undefined et null valeurs, tandis que toString() n’a pas. Donc, si vous avez une valeur qui doit contenir un nombre mais que vous voulez être sûr lors de sa conversion en chaîne, vous pouvez utiliser String().

En ce qui concerne l’interpolation de chaîne et la concaténation de chaîne, il est préférable de les utiliser lorsque vous utilisez des nombres dans une chaîne. Sinon, l’utilisation de ces méthodes peut rendre le code moins lisible.

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