Nombres en JavaScript
Vous savez déjà qu’une valeur peut être un number. Cette leçon reste sur ce seul type : écrire des nombres, faire des calculs du quotidien, repérer des résultats étranges comme NaN et Infinity, et afficher un décimal propre sur la page.
Comment fonctionnent les nombres en JavaScript ?
Pour les débutants, entiers et décimaux partagent un type : number. Écrivez-les sans guillemets — 42 et 3.5 sont des nombres ; "42" est une chaîne. Vous additionnez, soustrayez, multipliez, divisez et prenez le reste. Certaines opérations donnent des résultats spéciaux : NaN (« Not a Number ») quand le calcul n’est pas un nombre utilisable, et Infinity quand la valeur dépasse une limite finie (par exemple diviser par zéro). Pour l’affichage, toFixed construit une chaîne avec le nombre de décimales choisi.
Boîte à outils numérique
📊 Outils numériques que le débutant utilise d’abord
| Idée | Exemple | Résultat / note |
|---|---|---|
| Littéral entier | let n = 10; |
Entier, type number |
| Littéral décimal | let p = 2.5; |
Même type number |
| Calcul | 10 + 3, 10 % 3 |
Somme 13 ; reste 1 |
| NaN | 0 / 0 ou calcul invalide |
« pas un nombre » — typeof reste "number" |
| Infinity | 1 / 0 |
Au-delà des limites finies |
toFixed |
(3.14159).toFixed(2) |
Chaîne d’affichage "3.14" |
Écrire les nombres sans guillemets
Entiers et décimaux partagent un type. Pas besoin d’un « type entier » séparé à ce niveau.
let score = 42;
let price = 9.99;
console.log(score);
console.log(price);
console.log(typeof score);
console.log(typeof price);
Calculs du quotidien
Utilisez +, -, *, / et % (reste). Le module Opérateurs ira plus loin ; ici, voyez seulement que les nombres calculent vraiment.
let a = 10;
let b = 3;
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);
NaN — pas un nombre utilisable
NaN signifie que le résultat n’est pas un nombre utile. Fait étrange : typeof NaN reste "number". Si le calcul semble cassé, journalisez la valeur et cherchez NaN.
let broken = 0 / 0;
console.log(broken);
console.log(typeof broken);
Infinity
Diviser un nombre positif par zéro donne Infinity (dividende négatif : -Infinity). C’est un vrai résultat du moteur — utile à reconnaître en débogage.
let huge = 1 / 0;
console.log(huge);
console.log(typeof huge);
Formater les décimales avec toFixed
toFixed(n) renvoie une chaîne avec n chiffres après la virgule — pratique pour un affichage style monnaie. Souvenez-vous : le résultat est du texte ; continuez les calculs sur le nombre d’origine, pas sur la chaîne formatée.
let total = 19.999;
console.log(total.toFixed(2));
console.log(typeof total.toFixed(2));
Afficher un total sur la page
Calculez une somme, formatez-la si besoin, et placez le texte dans la page avec textContent.
<!DOCTYPE html>
<html>
<head>
<title>Numbers — total on page</title>
</head>
<body>
<p id="out">…</p>
<script>
let price = 12.5;
let tax = 1.25;
let total = price + tax;
document.getElementById("out").textContent = "Total: " + total.toFixed(2);
</script>
</body>
</html>
Le paragraphe montre un total style montant. Changez price ou tax, rechargez, et vérifiez la ligne.
À vous de jouer
- Créez deux
letnumériques (entier et décimal) ; journalisez les deux ettypeof. - Journalisez
a + b,a * beta % bpour deux petits entiers. - Journalisez
0 / 0et confirmezNaN. - Journalisez
1 / 0et confirmezInfinity. - Appelez
toFixed(2)sur un décimal ;typeofdu résultat est"string". - Dans la démo HTML, changez seulement
priceoutax, rechargez, lisez le nouveau total.
Erreurs fréquentes
- Écrire
let n = "10";et attendre un calcul numérique — les guillemets font une chaîne - Ignorer
NaNquand la Console paraît « vide » ou bizarre - S’étonner de
Infinityaprès une division par zéro - Continuer à calculer sur un résultat de
toFixed(c’est une chaîne) - Attendre un type entier séparé — le débutant a un seul type number
Résumé
- Entiers et décimaux partagent le type number ; écrivez-les sans guillemets
- Pour les calculs du quotidien :
+,-,*,/et% - NaN et Infinity sont des résultats numériques spéciaux
toFixedformate les décimales pour l’affichage et renvoie une chaîne- Ensuite : Strings — le texte plus en détail
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 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