Chargement...

Conversion de types

Vous séparez déjà null et undefined. Étape suivante : changer volontairement le type d’une valeur — nombre en texte pour une étiquette, texte en nombre pour calculer. C’est la conversion de types. Ici, trois helpers clairs : String(), Number() et Boolean() — plus une surprise fréquente avec +.

Qu’est-ce que la conversion de types en JavaScript ?

Conversion de types = faire passer une valeur d’un genre à un autre. Préférez l’explicite : String(42) donne "42", Number("7") donne 7, Boolean(0) donne false. Si Number ne comprend pas le texte, vous obtenez NaN. Avec +, une chaîne d’un côté concatène souvent au lieu d’additionner — loguez-le une fois.

Boîte à outils de conversion

📊 Conversion de types pour débutants

Outil / idée Exemple Résultat / note
String(...) String(42) "42" (texte)
Number(...) Number("7") 7 (nombre)
Boolean(...) Boolean(0) false (aperçu falsy)
Texte non numérique Number("hello") NaN — typeof reste "number"
Vide → booléen Boolean("") false
Mélange avec + 5 + "2" "52" (concat, pas 7)

String() — produire du texte

Pour une étiquette ou un message, enveloppez la valeur dans String(...). Nombres, booléens, null et undefined deviennent des chaînes à afficher ou coller.

conversions avec String()

javascript 
console.log(String(42));
console.log(String(true));
console.log(String(null));
console.log(String(undefined));
console.log(typeof String(42));

Number() — produire un nombre

Utilisez Number(...) quand le texte doit servir aux calculs. Les chaînes de chiffres convertissent bien. Un texte non numérique devient NaN.

conversions avec Number()

javascript 
console.log(Number("7"));
console.log(Number("3.5"));
console.log(Number(true));
console.log(Number(false));
console.log(typeof Number("7"));

Quand Number échoue — NaN

Number("hello") donne NaN. Souvenez-vous : typeof NaN reste "number". Traitez NaN comme une conversion ratée, pas une quantité utilisable.

piège Number devient NaN

javascript 
console.log(Number("hello"));
console.log(typeof Number("hello"));
console.log(Number(""));
console.log(Number(null));

Number("") et Number(null) deviennent 0 — autre piège débutant. Pour un vrai montant, donnez une chaîne de chiffres claire.

Boolean() — oui/non à partir d’une valeur

Boolean(...) transforme en true ou false. Les vides comme 0, "", null, undefined et NaN donnent false. Chaînes non vides et la plupart des nombres donnent true. La liste complète truthy / falsy vient ensuite — ici le helper suffit.

conversions avec Boolean()

javascript 
console.log(Boolean(1));
console.log(Boolean(0));
console.log(Boolean("hi"));
console.log(Boolean(""));
console.log(Boolean(null));

Surprise du + — concaténer ou additionner

Si un côté de + est une chaîne, JavaScript colle souvent du texte. Pour faire des maths, convertissez d’abord avec Number().

le plus peut concaténer

javascript 
console.log(5 + 2);
console.log(5 + "2");
console.log(Number("5") + Number("2"));
console.log("Score: " + 10);

Afficher les conversions sur la page

Convertissez quelques valeurs puis écrivez de courtes étiquettes avec textContent.

Étiquettes de page après conversion

html 
<!DOCTYPE html>
<html>
<head>
<title>Type conversion — labels</title>
</head>
<body>
<p id="out">…</p>
<script>
let raw = "12";
let asNumber = Number(raw);
let asText = String(asNumber);
let flag = Boolean(asNumber);
document.getElementById("out").textContent =
"raw=" + raw +
" | number=" + asNumber +
" | text=" + asText +
" | flag=" + flag;
</script>
</body>
</html>

Le paragraphe montre la même idée sous trois formes. Mettez raw à "0", actualisez : flag devient false tandis que le nombre reste 0.

À essayer vous-même

  1. Loguez String(99), String(false) et typeof String(99).
  2. Loguez Number("8") et Number("8") + 2 — du calcul, pas "82".
  3. Loguez Number("oops") et son typeof (NaN, toujours "number").
  4. Loguez Boolean("") et Boolean("ok").
  5. Loguez 3 + "4" puis réécrivez avec Number("3") + Number("4").
  6. Dans la démo HTML, raw = "0", actualisez et lisez le nouveau flag.

Erreurs fréquentes

  • Croire que + additionne toujours — une chaîne peut concaténer
  • Ignorer NaN après Number("hello") et calculer quand même
  • Penser que cette leçon remplace truthy / falsy — Boolean() n’est qu’un aperçu
  • Attendre que String(null) soit "" — c’est le texte "null"
  • Oublier typeof quand le résultat paraît étrange

Résumé

  • Conversion de types : changer volontairement le genre d’une valeur
  • Préférez String(), Number(), Boolean() pour une intention claire
  • Texte non numérique → NaN ; typeof NaN reste "number"
  • + avec une chaîne concatène souvent — convertissez avant d’additionner
  • Suite : truthy et falsy — quelles valeurs agissent comme true ou false dans les conditions

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
8
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 14 de 16
Javascript Tutoriel