Pourquoi JavaScript affiche 23 au lieu de 5 ?
Si "2" + "3" produit "23", les deux valeurs sont du texte. Pour une addition numérique, convertissez les entrées, puis contrôlez le résultat avant de l’utiliser.
Publié par Projet Carthage · Mis à jour le
Explications & Fondations Techniques
Sur des valeurs simples, l’opérateur + peut additionner des nombres ou assembler du texte. 2 + 3 vaut 5 ; "2" + "3" vaut "23". Avec "2" + 3, la présence du texte conduit également à une concaténation.
Commencez le diagnostic avec typeof : console.log(typeof valeur) distingue "string" et "number". Une valeur lue avec input.value est une chaîne, même si le champ affiche des chiffres. Convertissez-la explicitement avec Number.
Une conversion ne suffit pas toujours : Number("abc") produit NaN, tandis que Number("") et Number(" ") produisent 0. Si une saisie vide n’est pas une réponse valable, testez trim() avant la conversion.
L’exemple sépare trois tâches : refuser les chaînes vides, convertir les deux nombres et vérifier qu’ils sont finis. La fonction renvoie ensuite leur somme. Testez un cas normal, un nombre décimal, une saisie vide et du texte.
Pour vous entraîner, modifiez la fonction afin qu’elle accepte uniquement des entiers positifs. Avant d’écrire la condition, choisissez le comportement voulu pour zéro, les nombres négatifs et les nombres décimaux.
Exemple de Code Pratique
Essayer cet exemplefunction addInputs(left, right) {
if (left.trim() === "" || right.trim() === "") {
throw new Error("Empty input");
}
const a = Number(left);
const b = Number(right);
if (!Number.isFinite(a) || !Number.isFinite(b)) {
throw new Error("Invalid number");
}
return a + b;
}
console.log(addInputs("2", "3")); // 5
console.log(addInputs("2.5", "3")); // 5.5
try {
addInputs("", "3");
} catch (error) {
console.log(error.message); // Empty input
}Pièges Fréquents & Mauvaises Pratiques
✗ Convertir trop tard
Number("2" + "3") // 23Number("2") + Number("3") // 5Dans le premier cas, la concaténation a déjà eu lieu. Convertissez chaque opérande avant l’addition.
✗ Ignorer une entrée invalide
Number("abc") + 3 // NaNconst value = Number("abc");
console.log(Number.isFinite(value)); // falseUn résultat NaN ne déclenche pas automatiquement d’exception. Prévoyez une validation et un message d’erreur compréhensible.
Questions Fréquentes
Faut-il utiliser Number ou parseInt ?▾
Number convertit la valeur complète et conserve les décimales. parseInt lit un préfixe entier : parseInt("2.5", 10) vaut 2. Pour ce formulaire numérique, Number correspond mieux au résultat attendu.
Est-ce que changer const en let résout le problème ?▾
Non. const et let contrôlent la réaffectation de la variable ; ils ne convertissent pas une chaîne en nombre. Vérifiez le type de la valeur et convertissez-la explicitement.
Maîtrisez JavaScript pas à pas
Résolvez des défis interactifs directement dans votre navigateur avec retour immédiat et indices progressifs.