Conversions de types en JavaScript

JavaScript est un langage à typage dynamique : une variable peut contenir une string à un instant et un nombre à l'instant suivant, sans qu'on déclare jamais le type d'une valeur à l'avance. En raison de cette flexibilité, les valeurs doivent constamment passer d'un type à l'autre — un nombre devient du texte à afficher, le texte d'un champ de formulaire devient un nombre pour un calcul, un object est testé pour sa « véracité » dans un if. Ces conversions se produisent de deux façons : explicitement, quand vous appelez vous-même une fonction comme String() ou Number(), et implicitement (aussi appelée coercition), quand le langage convertit automatiquement une valeur pour l'adapter à l'opération. Ce chapitre couvre les deux approches, les règles exactes pour chaque type cible, et les surprises qui trébuchent presque tout le monde à un moment ou à un autre.

Si vous n'avez pas encore lu la présentation des types de données disponibles, il est utile de la parcourir d'abord — les conversions n'ont de sens qu'une fois que vous savez ce que vous convertissez.

Les Trois Conversions

Presque toute conversion en JavaScript cible l'un des trois types primitifs : string, number, ou boolean. Il n'existe pas d'opération générique « convertir en type X » ; chaque cible possède ses propres règles. Nous allons les examiner chacune à leur tour, puis voir quand le langage les applique pour vous.

Conversion en String

La conversion en string transforme une valeur en sa forme textuelle. Elle se produit explicitement avec la fonction String(), et implicitement chaque fois qu'une valeur est combinée à une string par concaténation ou interpolée dans un template literal.

String(123);        // "123"
String(true);       // "true"
String(null);       // "null"
String(undefined);  // "undefined"
`Value: ${42}`;     // "Value: 42"

Les règles sont intuitives pour les primitives — la valeur est rendue exactement comme on s'y attendrait. Notez que null et undefined deviennent le texte littéral "null" et "undefined", et non une string vide.

Les objects et les arrays sont plus intéressants. Un array devient ses éléments joints par des virgules, et un object ordinaire donne l'infâme "[object Object]" :

Ainsi, un array vide se transforme en string vide, et null/undefined à l'intérieur d'un array apparaissent comme des emplacements vides (donc [null, 5] donne ",5"). Le résultat "[object Object]" pour les objects explique pourquoi on utilise JSON.stringify(obj) quand on veut vraiment lire le contenu d'un object.

Conversion Numérique

La conversion numérique transforme une valeur en nombre. La forme explicite est la fonction Number() ; implicitement, elle se produit avec l'opérateur unaire plus (+value) et avec la plupart des opérateurs arithmétiques et de comparaison.

Les règles méritent d'être mémorisées car elles ne sont pas toujours évidentes :

Quelques-uns de ces cas sont notoires. Number(null) vaut 0 mais Number(undefined) vaut NaN — les deux valeurs « vides » se comportent différemment. Une string vide devient également 0, pas NaN. Les strings sont d'abord débarrassées des espaces environnants, puis analysées ; si un élément non numérique subsiste, le résultat est NaN (qui signifie « Not a Number »).

Plus Unaire

L'opérateur unaire plus est la façon la plus concise de forcer une conversion numérique. Placé devant une valeur, +value fait exactement ce que fait Number(value) :

+"42";       // 42
+"";         // 0
+true;       // 1
+"abc";      // NaN

C'est pratique mais facile à mal lire, donc réservez-le aux endroits où l'intention est claire (par exemple +event.target.value pour lire un champ de formulaire numérique).

parseInt et parseFloat vs Number

Number() est strict : la totalité de la string doit être un nombre valide, sinon vous obtenez NaN. Les fonctions parseInt() et parseFloat() sont plus tolérantes — elles lisent depuis le début de la string et s'arrêtent au premier caractère qui ne correspond pas, renvoyant ce qu'elles ont analysé jusqu'à ce point.

Deux mises en garde avec parseInt :

• Il retourne NaN seulement si la string ne commence pas par un nombre analysable — "px12" échoue, mais "12px" réussit avec 12.
• Passez toujours le radix (base) comme second argument pour éviter les surprises : parseInt("08", 10) donne 8 de façon fiable. Sans lui, les moteurs modernes utilisent par défaut la base 10, mais être explicite supprime tout doute et documente votre intention.

parseInt("FF", 16);  // 255  (hexadecimal)
parseInt("101", 2);  // 5    (binary)
parseInt("08", 10);  // 8    (decimal, explicit radix)

Utilisez Number() (ou +) quand vous voulez valider qu'une valeur entière est numérique, et parseInt/parseFloat quand vous souhaitez délibérément extraire un nombre du début d'une string plus longue, comme "24px" en CSS.

Conversion en Boolean

La conversion en boolean répond à une seule question : cette valeur est-elle « vraie » (truthy) ou « fausse » (falsy) ? Elle se produit explicitement avec Boolean() et implicitement partout où une condition est évaluée — dans if, while, le ternaire ?, et les opérateurs logiques.

La règle est agréablement simple car la liste des valeurs falsy est courte et fixe. Ces huit valeurs se convertissent en false :

false
0
-0
0n        // BigInt zero
""        // empty string
null
undefined
NaN

Tout le reste est truthy. Ce « tout le reste » inclut certaines valeurs qui surprennent les débutants :

La string "0" est truthy car c'est une string non vide — son contenu n'a pas d'importance. De même, "false" est une string non vide tout à fait normale et se convertit en true. Et un array vide [] ou un object vide {} est truthy, même s'il « semble » vide. Mémorisez la liste des valeurs falsy ; si une valeur n'y figure pas, elle est truthy.

Coercition Implicite

Jusqu'ici, nous avons appelé nous-mêmes les fonctions de conversion. Mais dans la pratique, la plupart des conversions sont implicites — le langage coerce les valeurs pour que l'opération fonctionne. L'astuce consiste à savoir quel type cible chaque contexte attend.

Arithmétique et le Comportement Particulier de +

Chaque opérateur arithmétique convertit ses opérandes en nombres — sauf +, qui est surchargé. Si l'un ou l'autre opérande de + est une string, + devient une concaténation de strings ; sinon, il additionne des nombres. Tous les autres opérateurs (-, *, /, %) convertissent toujours en nombres.

La ligne 1 + 2 + '3' montre pourquoi l'ordre compte : + est associatif à gauche, donc 1 + 2 s'exécute en premier comme des nombres (3), puis 3 + '3' rencontre une string et concatène pour donner "33". Cette règle unique — « + avec une string concatène, tout le reste convertit en nombre » — explique une grande partie de la confusion des débutants.

Conditions et Logique

Dans tout contexte booléen — if, while, ?:, et les opérateurs logiques && / || — la valeur de contrôle passe par la conversion boolean en utilisant la liste falsy ci-dessus.

if ("0") {
  // runs: "0" is a non-empty string, therefore truthy
}

if (0 || "fallback") {
  // "fallback" is returned: 0 is falsy, so || moves to the next value
}

Comparaisons

Les opérateurs d'égalité effectuent leur propre coercition, et l'opérateur == non strict en particulier possède des règles suffisamment subtiles pour mériter leur propre chapitre. En résumé : préférez le strict ===, qui ne coerce jamais. L'ensemble des surprises (comme le fait que [] == ![] soit true) est couvert dans les opérateurs de comparaison.

Conversion Object vers Primitif

Quand un object est utilisé là où un primitif est attendu (concaténation, arithmétique, message d'alerte), JavaScript le convertit d'abord en primitif. Il le fait en appelant la méthode Symbol.toPrimitive de l'object si elle existe ; sinon, il se rabat sur valueOf() et toString(), choisissant l'ordre selon qu'un nombre ou une string est « attendu ». C'est pourquoi un object ordinaire se transforme en "[object Object]" et un array en string à virgules — cela provient du toString() par défaut. Vous pouvez personnaliser le résultat en définissant ces méthodes sur vos propres objects, mais pour le code courant, il suffit de savoir que la conversion existe et d'utiliser JSON.stringify() quand vous voulez un object lisible.

Pièges Courants

Une poignée de résultats de conversion sont responsables de la plupart des moments « attendez, quoi ? ». Gardez ceux-ci à l'esprit :

Explications des cas insolites :

• +[] vaut 0. La conversion numérique transforme d'abord l'array en string (""), puis la string vide se convertit en 0.
• +{} vaut NaN. L'object devient "[object Object]", qui n'est pas un nombre valide, donc il se convertit en NaN.
• "" + 1 vaut "1". Parce que + a rencontré une string, il a concaténé au lieu d'additionner.
• [] + [] vaut "". Chaque array se transforme en string vide, et "" + "" donne "".

Ce ne sont pas des bugs — ils suivent exactement les règles ci-dessus. Ils semblent étranges uniquement parce que deux conversions différentes s'enchaînent dans une seule expression.

Résumé

• JavaScript convertit les valeurs en string, number, ou boolean — explicitement via String(), Number(), Boolean(), ou implicitement par coercition.
• String : les primitives s'affichent sous forme de texte ; [1,2,3] devient "1,2,3", [] devient "", et un object ordinaire devient "[object Object]".
• Number : null vaut 0, undefined vaut NaN, "" vaut 0 ; les strings sont d'abord débarrassées des espaces puis analysées strictement. Utilisez +value comme raccourci, et parseInt/parseFloat (avec un radix) pour une analyse tolérante du début de string.
• Boolean : seuls false, 0, -0, 0n, "", null, undefined, et NaN sont falsy ; tout le reste — y compris "0", "false", [], et {} — est truthy.
• + concatène quand l'un des deux côtés est une string ; tout autre opérateur arithmétique convertit en nombre.
• En cas de doute, convertissez explicitement et comparez avec ===.

Vous utiliserez ces règles constamment lorsque vous travaillerez avec des nombres, des strings, et les saisies utilisateur stockées dans des variables.

Testez Vos Connaissances