JavaScript - Conversion de Types

Bonjour à tous, aspirants développeurs JavaScript ! Aujourd'hui, nous plongeons dans le monde fascinant des conversions de types en JavaScript. Ne vous inquiétez pas si vous êtes nouveaux en programmation ; je vais vous guider à travers ce voyage pas à pas, comme j'ai fait pour des centaines d'étudiants au fil des ans. Alors, prenez une tasse de café (ou votre boisson favorite), et c'est parti !

Conversions de Types en JavaScript

Avant de rentrer dans les détails, comprenstons ce qu'est une conversion de type. Imaginez que vous avez une boîte de Legos, mais certaines pièces sont en bois. Pour construire votre château Lego, vous devez convertir ces pièces en briques Lego. C'est essentiellement ce qu'est la conversion de type en JavaScript - transformer les données d'un type à un autre.

En JavaScript, nous avons deux types principaux de conversions :

1. Conversion Implicite (également appelée Coercition de Type)
2. Conversion Explicite (également appelée Cast de Type)

Explorons-les en détail.

Conversion Implicite

La conversion implicite se produit automatiquement lorsque JavaScript essaie d'effectuer une opération sur des valeurs de types différents. C'est comme si JavaScript disait : "Ne vous inquiétez pas, j'ai ça !" et convertit les types en arrière-plan.

Conversion en Chaîne de Caractères (Conversion implicite)

JavaScript est très sympa quand il s'agit de convertir des choses en chaînes de caractères. C'est comme ce amis qui peut engager une conversation avec n'importe qui !

let num = 5;
let str = "Le nombre est : " + num;
console.log(str); // Output : "Le nombre est : 5"
console.log(typeof str); // Output : "string"

Dans cet exemple, JavaScript a automatiquement converti le nombre 5 en chaîne de caractères lorsque nous avons utilisé l'opérateur + avec une chaîne de caractères. C'est comme si JavaScript avait mis des guillemets autour du nombre pour nous.

Conversion en Nombre (Conversion implicite)

Quand il s'agit de nombres, JavaScript fait de son mieux pour comprendre les choses, un peu comme un professeur de mathématiques déchiffrant la mauvaise écriture d'un élève.

let str = "10";
let num = str - 5;
console.log(num); // Output : 5
console.log(typeof num); // Output : "number"

Ici, JavaScript a vu l'opérateur - et a pensé : "Aha ! Nous devons faire du calcul !" Alors il a converti la chaîne "10" en nombre 10 avant de soustraire 5.

Conversion en Boolean (Conversion implicite)

JavaScript a une règle simple pour la conversion en booléens : certaines valeurs sont considérées comme "véridiques" (truthy) et d'autres comme "fausses" (falsy). C'est comme classer les élèves en "présents" et "absents".

if ("Bonjour") {
console.log("Cela s'exécutera car 'Bonjour' est véridique");
}

if (0) {
console.log("Cela ne s'exécutera pas car 0 est faux");
}

Dans ces exemples, JavaScript convertit implictement "Bonjour" en true et 0 en false.

Null en Nombre (Conversion implicite)

Null est un cas particulier. Converti en nombre, il devient 0. C'est comme cet élève qui n'a pas soumis son devoir mais a quand même obtenu zéro point.

let x = null;
console.log(+x); // Output : 0

L'opérateur unaire + tente de convertir null en nombre, resulting in 0.

Undefined avec Nombre et Boolean (Conversion implicite)

Undefined est encore plus subtil. C'est comme cet élève qui non seulement n'a pas soumis son devoir, mais n'était même pas sur la liste de classe !

let x;
console.log(+x); // Output : NaN (Pas un Nombre)
console.log(Boolean(x)); // Output : false

Lors de la conversion en nombre, undefined devient NaN. Lors de la conversion en booléen, il devient false.

Conversion Explicite

La conversion explicite se produit lorsque nous, les programmeurs, prenons le contrôle et disons exactement à JavaScript quel type nous voulons. C'est comme être le metteur en scène d'une pièce de théâtre et dire précisément aux acteurs quels rôles ils doivent jouer.

Conversion en Chaîne de Caractères (Conversion explicite)

Nous avons plusieurs méthodes à notre disposition pour la conversion en chaîne de caractères :

let num = 123;
let str1 = String(num);
let str2 = num.toString();
let str3 = num + "";

console.log(str1, typeof str1); // Output : "123" string
console.log(str2, typeof str2); // Output : "123" string
console.log(str3, typeof str3); // Output : "123" string

Toutes ces méthodes atteignent le même résultat, mais String() et toString() sont plus explicites quant à nos intentions.

Conversion en Nombre (Conversion explicite)

Pour la conversion en nombre, nous avons des options similaires :

let str = "456";
let num1 = Number(str);
let num2 = parseInt(str);
let num3 = +str;

console.log(num1, typeof num1); // Output : 456 number
console.log(num2, typeof num2); // Output : 456 number
console.log(num3, typeof num3); // Output : 456 number

Number() et parseInt() sont plus clairs quant à ce que nous essayons de faire, tandis que l'opérateur unaire + est un raccourci que certains développeurs utilisent.

Conversion en Boolean (Conversion explicite)

La conversion en booléen est simple :

let str = "Bonjour";
let bool1 = Boolean(str);
let bool2 = !!str;

console.log(bool1, typeof bool1); // Output : true boolean
console.log(bool2, typeof bool2); // Output : true boolean

La fonction Boolean() est claire et lisible. La double négation (!!) est un raccourci que certains développeurs utilisent, mais il peut être confus pour les débutants.

Conversion Date en Chaîne de Caractères/Nombre

Les dates sont un cas spécial en JavaScript. Elles peuvent être converties en chaînes de caractères et en nombres :

let date = new Date();
let dateString = String(date);
let dateNumber = Number(date);

console.log(dateString); // Output : "Mon May 15 2023 12:34:56 GMT+0000 (Coordinated Universal Time)"
console.log(dateNumber); // Output : 1684154096000 (millisecondes depuis le 1er janvier 1970)

Convertir une date en chaîne de caractères nous donne un format lisible par les humains, tandis que la conversion en nombre nous donne les millisecondes depuis l'époque Unix.

Table de Conversion en JavaScript

Pour résumer toutes les méthodes de conversion que nous avons apprises, voici un tableau pratique :

Valeur d'origine	en Chaîne de Caractères	en Nombre	en Boolean
false	"false"	0	false
true	"true"	1	true
0	"0"	0	false
1	"1"	1	true
"0"	"0"	0	true
"1"	"1"	1	true
NaN	"NaN"	NaN	false
Infinity	"Infinity"	Infinity	true
-Infinity	"-Infinity"	-Infinity	true
""	""	0	false
"20"	"20"	20	true
[ ]	""	0	true
[20]	"20"	20	true
[10,20]	"10,20"	NaN	true
["vingt"]	"vingt"	NaN	true
["dix","vingt"]	"dix,vingt"	NaN	true
function(){}	"function(){}"	NaN	true
{ }	"[object Object]"	NaN	true
null	"null"	0	false
undefined	"undefined"	NaN	false

Et voilà ! Nous avons parcouru le territoire des conversions de types en JavaScript. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces concepts. Qui sait ? Vous pourriez même trouver enjoyment à transformer des briques Lego en blocs en bois et inversement !

Bonne programmation, futurs maîtres JavaScript !

Credits: Image by storyset