Conversion de type — Number / String / parseInt et conversion implicite

Une quantité tapée dans un champ de saisie, ou un montant enfoui dans des données d'une source externe. Même quand ça se ressemble à l'écran — les deux 1200 — que JavaScript le stocke comme une chaîne ou un nombre change ce qu'un calcul en fait.

Cet article couvre deux choses : la conversion de type explicite (changer le type d'une valeur toi-même en appelant quelque chose comme Number), et la conversion de type implicite (les opérateurs qui alignent automatiquement les types avant de calculer).

Vérifier le type actuel — typeof

Aligner les types commence par savoir de quel type est déjà quelque chose. Des bugs comme un total décalé, ou une comparaison qui ne sort pas comme prévu, remontent généralement à une valeur que tu supposais être un nombre qui s'avère être une chaîne.

D'abord, voyons comment vérifier le type d'une valeur sur le coup.

Mets typeof (un opérateur qui renvoie le nom du type d'une valeur sous forme de chaîne) devant une valeur, et tu obtiens son type. typeof 1200 vaut "number", et typeof "1200" vaut "string".

Ce qui revient n'est pas le type lui-même — c'est une chaîne nommant le type — donc quand tu l'utilises dans une vérification, compare-le à une chaîne entre guillemets, comme dans typeof price === "number".

const orderId = "A-1042";   // numéro de commande

console.log(typeof orderId);   // string
console.log(typeof 500);       // number
console.log(typeof true);      // boolean

// Fonctionne aussi sur les résultats d'expressions, pas seulement les variables
console.log(typeof (500 + 100));            // number
console.log(typeof (500 > 100));            // boolean
console.log(typeof `Commande ${orderId}`);      // string

Vérifie les types de 3 valeurs venant d'un écran d'édition de produit. inputPrice / stockCount / isPublished sont déjà déclarés.

① Affiche le type de inputPrice.

② Affiche le type de stockCount.

③ Affiche le type de isPublished.

④ Vérifie et affiche si inputPrice N'EST PAS de type number.

(Si tout s'exécute correctement, une explication apparaîtra.)

Conversion implicite — seul + devient concaténation de chaînes

Calcule avec des valeurs de types différents, et JavaScript ne s'arrête pas avec une erreur. L'opérateur aligne d'abord les types, puis continue simplement.

Le même comportement que tu as vu == faire avant de comparer apparaît aussi dans les opérateurs arithmétiques. Comme ça ne s'arrête jamais, tu ne remarqueras pas le décalage avant de voir le résultat.

Le piège, c'est que + fait un choix différent des autres opérateurs. + choisit la concaténation de chaînes si l'un des côtés est une chaîne. Le côté nombre se fait convertir en chaîne, donc "3" + 1 devient "31".

- * / %, en revanche, n'ont aucun sens pour joindre des chaînes ensemble, donc ils convertissent le côté chaîne en nombre et calculent.

Si un champ total affiche deux montants côte à côte, c'est un signe qu'ils ont été additionnés avant d'être convertis.

const inputQuantity = "3";   // valeur du champ de quantité (chaîne)

// L'affichage seul ne distingue pas le nombre 31 de la chaîne "31" — utilise typeof ci-dessous
console.log(inputQuantity + 1);   // 31   joint comme la chaîne "31"
console.log(inputQuantity - 1);   // 2    converti en nombre avant de soustraire
console.log(inputQuantity * 2);   // 6    la multiplication convertit aussi
console.log(inputQuantity / 3);   // 1    la division convertit aussi

// typeof confirme que seul le résultat de + a un type différent
console.log(typeof (inputQuantity + 1));   // string
console.log(typeof (inputQuantity - 1));   // number

Traite les valeurs venant de l'extérieur comme des chaînes

Les nombres d'un champ de saisie, ou enfouis dans des données d'une source externe, arrivent normalement comme des chaînes. Si une addition que tu voulais comme 1200 + 300 apparaît comme "1200300" côte à côte, c'est un signe qu'un côté est resté une chaîne. Convertis-la en nombre avant d'additionner.

Conversion explicite — Number / String / Boolean

Laisser la conversion à l'opérateur signifie que la direction dans laquelle il convertit est fixée par opérateur, donc ton intention ne se voit pas dans le code. Aligne les types toi-même avant un calcul, et le résultat devient plus facile à suivre.

JavaScript fournit une fonction de conversion pour chaque type.

Number(value) convertit en nombre, String(value) en chaîne, et Boolean(value) en booléen — chacune renvoie une nouvelle valeur. La variable d'origine reste inchangée.

Boolean suit exactement les règles falsy : "" et 0 deviennent false, et une chaîne non vide devient true. Remarque que Number("") renvoie 0, pas NaN, donc convertir un champ vide directement en nombre le traite comme un montant de 0.

const inputQuantity = "3";   // valeur du champ de quantité
const shippingFee = 500;     // frais de port (nombre)

console.log(Number(inputQuantity));         // 3     chaîne vers nombre
console.log(Number(inputQuantity) + 1);     // 4     l'addition marche maintenant comme un nombre
console.log(String(shippingFee));           // 500   nombre vers chaîne
console.log(typeof String(shippingFee));    // string

console.log(Boolean("Paris"));   // true    une chaîne non vide
console.log(Boolean(""));        // false   une chaîne vide est falsy
console.log(Number(""));         // 0       une chaîne vide devient 0

// La variable d'origine reste une chaîne même après conversion
console.log(typeof inputQuantity);   // string

Calcule un sous-total de panier à partir d'une quantité venue d'un champ de saisie et d'un prix unitaire. inputQuantity / unitPrice / inputCoupon sont déjà déclarés.

① Affiche le résultat de la conversion de inputQuantity en nombre.

② Calcule et affiche le sous-total à partir du nombre de ① et unitPrice.

③ Affiche le type obtenu en convertissant le sous-total de ② en chaîne.

④ Affiche le résultat de la conversion du champ coupon vide, inputCoupon, en booléen.

Conversions échouées — NaN et Number.isNaN

Passe à Number une chaîne qu'il ne peut pas transformer en nombre, et JavaScript ne lève pas d'erreur. Il renvoie plutôt NaN (une valeur signifiant que le résultat n'a pas pu devenir un nombre) et continue simplement au calcul suivant.

C'est pourquoi un champ de montant avec un caractère bizarre ou une virgule mélangée peut laisser un total planté sur NaN jusqu'à l'écran. Après conversion, tu dois vérifier toi-même si ça a vraiment fonctionné.

Écrire total === NaN ne fonctionne pas comme vérification ici. NaN n'est même pas égal à lui-même, donc le résultat est toujours false.

typeof NaN renvoie aussi "number", donc le type ne le distingue pas non plus. Utilise plutôt Number.isNaN (une fonction qui renvoie si la valeur qu'on lui passe est NaN) pour la vérification.

const inputAmount = "1 200";   // un montant tapé avec un espace

console.log(Number(inputAmount));         // NaN   un espace au milieu ne peut pas être converti
console.log(Number(inputAmount) + 500);   // NaN   un calcul après ça reste NaN aussi

// Ni la comparaison ni le type ne peuvent le distinguer
console.log(Number(inputAmount) === NaN);   // false
console.log(typeof NaN);                    // number

// Utilise la fonction dédiée pour vérifier
console.log(Number.isNaN(Number(inputAmount)));   // true

Vérifie si une valeur tapée dans un champ de montant peut être traitée comme un nombre, et affiche un message seulement quand ce n'est pas le cas. inputAmount / validAmount sont déjà déclarés.

① Affiche le résultat de la conversion de inputAmount en nombre.

② Vérifie et affiche si le résultat de ① est une conversion échouée.

③ Fais la même vérification sur validAmount et affiche le résultat.

④ Seulement quand la conversion de inputAmount a échoué, affiche « Merci de saisir le montant en chiffres. »

Lire une chaîne qui commence par un nombre — parseInt et parseFloat

Parfois on te donne une chaîne comme "240px" ou "12.5%" — des chiffres suivis d'une unité. Number lit toute la chaîne comme un nombre, donc le texte d'unité restant transforme le résultat en NaN.

Quand tu veux juste les chiffres de tête, utilise une fonction différente.

parseInt (une fonction qui extrait ce qui, depuis le début, peut se lire comme un entier) récupère 240 de "240px". Le 10 que tu passes comme deuxième argument signifie « lis-le en base 10 habituelle, chiffres 0 à 9 ». Tu peux l'omettre, mais l'écrire rend ton intention claire pour quiconque le lit.

Quand tu veux lire jusqu'à la virgule aussi, utilise parseFloat (une fonction qui extrait ce qui, depuis le début, peut se lire comme un décimal). Les deux renvoient NaN s'il n'y a rien de lisible comme un nombre juste au début.

const cardWidth = "240px";   // largeur lue depuis une valeur de style

console.log(Number(cardWidth));         // NaN    ne peut pas tout convertir
console.log(parseInt(cardWidth, 10));   // 240    seulement ce qui est lisible depuis le début

console.log(parseFloat("12.5%"));       // 12.5   lit jusqu'à la virgule
console.log(parseInt("12.5%", 10));     // 12     lire comme entier abandonne le décimal

// Rien n'est lu si ça ne commence pas par un chiffre
console.log(parseInt("environ 240px", 10));   // NaN

Lire seulement le début peut cacher une troncature silencieuse

parseInt s'arrête dès qu'il ne peut plus lire plus loin. Le "1 200" séparé par un espace devient 1, et "12.5" devient 12. Aucun des deux ne lève d'erreur, donc utilise Number pour des valeurs comme un montant où tu as besoin de tout lire, et garde parseInt pour les chaînes avec une unité attachée.

Extrais juste la partie numérique d'une valeur de style et d'une chaîne d'affichage. cardWidth / discountText sont déjà déclarés.

① Affiche le résultat de la conversion de cardWidth en nombre en une seule chaîne.

② Extrais la partie numérique de cardWidth comme entier et affiche-la.

③ Extrais la partie numérique de discountText comme décimal et affiche-la.

④ Affiche la valeur de ② doublée.