Conversion de types en

À propos de Conversion de types

En JavaScript, les valeurs peuvent être de différents types. On peut changer le type d'une variable à l'aide d'une conversion de type explicite. En plus de cela, JavaScript effectue aussi une coercition de type (conversion de type implicite) lorsque le contexte l'exige.

Conversion de type

JavaScript ne dispose pas d'une construction permettant de convertir une valeur vers un (autre) type, contrairement à beaucoup d'autres langages, mais on peut utiliser à la place certains utilitaires intégrés. En particulier, les objets globaux Boolean, Number et String peuvent être utilisés comme des fonctions pour convertir une valeur vers le type correspondant.

Convertir en booléen (valeurs truthy et falsy)

Avec Boolean(value), on peut convertir n'importe quelle valeur en booléen. Comment ça marche ?

Il existe un ensemble fixe de valeurs, dites falsy, qui sont converties en false. Surtout, false, 0, la string vide, null, undefined et NaN sont falsy. L'article MDN sur « Falsy » donne la liste complète.

Pour toutes les autres valeurs, Boolean renvoie true. Ces valeurs sont appelées truthy.

Boolean(-1);
// => true

Boolean(0);
// => false

Boolean(' ');
// => true

Boolean('');
// => false

Note que, d'après les règles décrites, '0', 'false', [] et {} sont truthy en JavaScript.

Convertir en nombre

On peut utiliser Number(value) pour convertir une valeur en nombre. Les espaces au début et à la fin d'une string sont ignorés, et une string vide est convertie en 0. Si on essaie de convertir une valeur non primitive ou une string qui ne représente pas un nombre, aucune erreur ne sera levée. Le résultat est alors NaN (Not-A-Number).

Number('  -12.34  ');
// => -12.34

Number('1,2');
// => NaN

Number('1 2');
// => NaN

Number('');
// => 0

Number('10e3');
// => 10000

Number({ key: '123' });
// => NaN

Ci-dessous, on peut voir ce que Number renvoie pour d'autres valeurs primitives.

Number(true);
// => 1

Number(false);
// => 0

Number(null);
// => 0

Number(undefined);
// => NaN

Note que, contrairement au dernier exemple, Number() appelé sans aucun argument est défini comme renvoyant 0.

JavaScript fournit aussi les fonctions parseInt et parseFloat. Elles appliquent des règles plus souples sur les strings qui peuvent être converties en nombre. Pour cette raison, il vaut mieux privilégier Number comme fonction de conversion, afin d'éviter des résultats inattendus.

parseInt('123a45');
// => 123

Number('123a45');
// => NaN

Convertir en string

Avec String(value), tu peux convertir une valeur en string. Le résultat est celui que l'on attend pour des valeurs primitives.

String(12.34);
// => '12.34'

String(false);
// => 'false'

String(null);
// => 'null'

String(undefined);
// => 'undefined'

Pour les tableaux, la fonction String applique la conversion en string à chaque élément, puis joint les résultats avec une virgule. Tu peux aussi appliquer toi-même la méthode join, par exemple pour personnaliser le séparateur. Dans ces cas-là, cependant, null et undefined sont convertis en une string vide.

String([42, null, true, 'abc']);
// => '42,,true,abc'

Pour les objets, String renvoie par défaut un texte peu utile.

String({ key: 'value' });
// => '[object Object]'

Tu peux personnaliser le comportement de conversion, par exemple en fournissant une méthode toString. La section « Conversion d'un objet en valeur primitive » sur javascript.info explique les détails.

Une autre façon courante d'obtenir une meilleure représentation sous forme de string pour les objets et les tableaux est d'utiliser l'encodage JSON. Tu peux convertir en string avec JSON.stringify, puis revenir à un objet ou un tableau avec JSON.parse.

const obj = {
  name: 'Gilda Guerra',
  address: {
    city: 'Goiânia',
  },
};

JSON.stringify(obj);
// => '{"name":"Gilda Guerra","address":{"city":"Goiânia"}}'

Coercition de type

Dans certains contextes, JavaScript convertit automatiquement une valeur vers un autre type de données avant d'évaluer une instruction. Cette conversion implicite s'appelle la coercition de type.

Contexte booléen

Quand une valeur est utilisée dans un contexte booléen, JavaScript applique les mêmes règles que la fonction Boolean pour la convertir implicitement.

• Quand la condition d'une instruction if n'est pas un booléen, une coercition est appliquée pour déterminer si la condition est remplie ou non. Il en va de même pour le premier opérande de l'opérateur ternaire ?.

  const num = 0;
  if (num) {
    // this block is NOT executed because 0 is falsy
  }
  
  const name = 'Jin';
  name ? 'name was provided' : 'no name provided';
  // => 'name was provided'
  

• L'opérande de l'opérateur logique NON ! est lui aussi converti en booléen avant l'application de l'opération NON.

  const name = '';
  !name;
  // => true
  

  Une conséquence du comportement décrit est que !!value a le même effet que Boolean(value). Il vaut néanmoins mieux utiliser Boolean pour la lisibilité.

• JavaScript applique aussi une coercition aux opérandes des opérateurs ET logique (&&) et OU logique (||). Mais garde en tête que le résultat de l'expression n'est pas forcément un booléen. Elle renvoie l'un des opérandes d'origine (voir MDN sur les opérateurs logiques).

  null || 'hello';
  // => 'hello'
  

Contexte string

Si l'opérateur d'addition + est utilisé avec des valeurs primitives et qu'un opérande est une string, l'autre est lui aussi converti en string. La logique de conversion est la même que celle de la fonction String. Ensuite, les deux strings sont concaténées.

let name;
'hello ' + name;
// => 'hello undefined'

La même conversion implicite se produit pour les valeurs qui ne sont pas des strings et qui sont intégrées dans des template strings.

const degrees = 23;
`It is ${degrees} °C`;
// => 'Is is 23 °C.';

Contexte numérique

De nombreux opérateurs convertissent les opérandes en nombres (si nécessaire) selon la logique de la fonction Number expliquée plus haut.

• Opérateurs arithmétiques : + (si aucune string n'est impliquée), -, *, /, %, **
• Opérateurs plus unaire et négation unaire : +, -
• Opérateurs relationnels (pour des opérandes qui ne sont pas des strings) : >, >=, <, <=
• Opérateurs binaires : |, &, ^, ~

Consulte la liste des opérateurs MDN pour plus de détails sur chacun de ces opérateurs.

Quand un opérande peut potentiellement être une string, il vaut mieux toujours convertir explicitement avec la fonction Number pour éviter les erreurs.

'1' + '2';
// => '12'
// addition operator in string context as explained above

Number('1') + Number('2');
// => 3

Tu verras parfois l'opérateur plus unaire utilisé pour convertir une string en nombre. Ce n'est pas recommandé, car c'est bien plus difficile à lire qu'un appel explicite à Number.

const value = '42';
+value;
// => 42

Number(value);
// => 42

Utiliser les opérateurs d'égalité et d'inégalité faibles ==/!= implique aussi souvent une conversion implicite en nombre. Cependant, la logique exacte de ces opérateurs est assez compliquée (voir MDN sur l'égalité faible). Les résultats sont difficiles à prévoir et parfois différents de ce à quoi on s'attend. Utilise plutôt les opérateurs d'égalité et d'inégalité strictes ===/!== pour éviter ces conversions implicites.