Comprendre la coercition de type primitif en JavaScript

Tous les langages de programmation, y compris JavaScript (JS), ont des types de données intégrés ; ceux-ci inclus cordes, Nombres, Rendez-vous, Tableaux, et ainsi de suite. Ce qui rend JS spécial, c’est qu’il est vaguement typé. Ainsi, les variables sont déclarées sans type, ce qui permet de leur réattribuer à tout moment des valeurs d’un type différent. Cette fonctionnalité rend le langage plus dynamique, mais entraîne également plus de bogues que probablement toutes les autres fonctionnalités combinées ! C’est un tel problème, en fait, que TypeScript a été créé pour apporter un typage fort au langage JavaScript.

Non pas que la coercition de type automatique de JS soit entièrement mauvaise – cela fait partie de ce qui fait de JavaScript l’un des langages de programmation les plus faciles à apprendre pour les débutants, et a sans aucun doute joué un rôle important dans la longévité et la popularité de JS. Pour les développeurs plus expérimentés, le chemin vers moins de frustration est de prendre le temps d’apprendre la norme de spécification du langage ECMAScript et de devenir plus apte à naviguer dans les nombreuses bizarreries de la coercition de type. Considérez ce didacticiel de développement Web comme un point de départ pour ce voyage, car nous expliquons comment JavaScript convertit un type en un autre en fonction de la façon dont les variables interagissent les unes avec les autres dans le code.

Vous pouvez en savoir plus sur ECMAScript dans notre tutoriel : Programmation asynchrone dans ECMAScript.

Que sont les types primitifs de JavaScript ?

Avant de pouvoir parler de coercition de type, nous devons établir quels sont les types de JavaScript, car vous ne les verrez pas lorsque vous déclarerez des variables. JavaScript a sept types primitifs :

• chaîne de caractères
• Numéro
• booléen
• indéfini
• nul
• Symbole
• BigInt

Ce que tous les types ci-dessus ont en commun, c’est qu’ils ne sont pas des objets et, en tant que tels, n’ont pas de méthodes ou de propriétés, contrairement à disons Tableaux ou Rendez-vous.

Vous pouvez également consulter notre guide sur l’utilisation des variables CSS.

Comment vérifier le type d’une variable en JavaScript

Les développeurs Web peuvent obtenir le type d’une variable (à ce moment précis), en utilisant le Type de opérateur:

console.log(typeof 42);
// expected output: "number"

console.log(typeof 'blubber');
// expected output: "string"

console.log(typeof true);
// expected output: "boolean"

console.log(typeof undeclaredVariable);
// expected output: "undefined"

Numéro et BigInt avoir une valeur connexe NaN. Abréviation de “Pas un numéro”, NaN se produit généralement lorsque le résultat d’une opération arithmétique ne peut pas être exprimé sous forme de nombre. C’est aussi la seule valeur en JavaScript qui ne soit pas égale à elle-même !

// outputs NaN
console.log(parseInt("blabla"));

Implicite vs. Coercition explicite en JavaScript

Étonnamment, tous les problèmes de coercition de type en JavaScript sont causés par le chaîne de caractères, Numéroet booléen types primitifs (il n’y a aucun moyen en JavaScript de contraindre un type primitif à un objet ou à une fonction) ! La coercition de type implicite se produit lorsque nous mélangeons différents types dans la même opération ou série d’opérations.

Contraindre à booléen en JavaScript

La chose étrange à propos booléens est que toutes les valeurs primitives ont aussi une valeur inhérente booléen valeur, ce qui les rend soit « véridiques » soit « fausses ». Certaines des règles qui déterminent comment non booléen les valeurs sont contraintes dans vrai ou faux les valeurs ne sont pas intuitives, il vaut donc la peine de les parcourir maintenant.

Les valeurs suivantes sont toujours faux:

• faux
• 0 (zéro)
• -0 (moins zéro)
• 0n (BigInt zéro)
• une chaîne vide, par exemple ”, “”, “
• nul
• indéfini
• NaN

Tout le reste est la vérité. Qui comprend:

• une chaîne non vide, par exemple “chaîne de test”, ‘0’, ‘faux’
• tout nombre non nul, par exemple 1, -1, 2112

C’est pourquoi les programmeurs peuvent tester la véracité d’un si déclaration:

var widget="bolt";

//later in the code
if (widget) {
  // do something
}

Tant que la variable widget contient une chaîne non vide, le si bloc sera exécuté.

Plutôt que de laisser JS contraindre les expressions dans un booléen résultat, il est parfaitement acceptable de le faire soi-même en utilisant le Booléen() fonction:

var widget="bolt";
var isSoldOut = false;

//later in the code
if (widget !== '' && !Boolean(isSoldOut)) {
  // do something
}

Coercition numérique en JavaScript

Si vous essayez de comparer une variable d’un type différent à un nombre, JS la contraindra utilement à un nombre, afin d’effectuer une comparaison pomme à pomme. Lorsqu’un type ne peut pas être contraint à un nombre, le résultat renvoyé est NaN. Par exemple, une chaîne vide sera convertie en zéro (0). Certains développeurs ont critiqué ce comportement car ils ne sont pas d’accord sur le fait qu’une chaîne vide doit être considérée comme un nombre valide, certains sont même allés jusqu’à déclarer que “les chaînes vides devenant 0 sont la racine de tout mal de coercition” ( Kyle Simpson, le créateur de la série de livres You Don’t Know JS).

Non pas que la coercition de type implicite soit mauvaise. Cela nous permet de faire des trucs fantaisistes comme celui-ci :

// Adds 1 to the currentIndex if the userId is 99.
var index = currentIndex + (userId == 99);
var info = userData[index];

Juste pour être sûr, vous pouvez vous assurer que indice contient un nombre valide en utilisant le Numéro() fonction:

// Adds 1 to the currentIndex if the userId is 99.
var index = currentIndex + (userId == 99);
if ( !isNaN(Number(index)) ) {
   var info = userData[index];
}

N’utilisez pas Type decar il reviendra “Numéro” même pour NaN!

Lis: Meilleurs cours en ligne pour apprendre le HTML

Conversion de chaînes JavaScript

Problèmes de coercition implicite chaîne de caractères type peut survenir en mélangeant des types tels que Nombres et cordes dans la même expression. Par exemple, est-ce que 10 + “10” évaluer au nombre 20 ou la ficelle “1010”? (C’est ce dernier.) Même si vous connaissez la réponse, peut-être que le prochain développeur ne le fera pas, alors pourquoi prendre des risques ?

var val1 = 10;
var val2 = "10";
var stringResult = String(val1) + String(val2);
var numResult = Number(val1) + Number(val2);

Raccourcis vers la conversion de chaînes JavaScript

Les développeurs JavaScript expérimentés emploient souvent Unaire opérateurs pour déclencher la coercition d’une variable dans le type souhaité. Par exemple, le “+” l’opérateur entraînera la conversion d’une variable en un Numéro. Ainsi, +val1 + +val2 est équivalent à la Nombre(val1) + Nombre(val2) déclaration que nous avons vue ci-dessus.

De même, le coup “!” forcera la coercition d’une variable dans un booléen évaluer. Vous le verrez souvent utilisé dans si des déclarations comme si (!val1) { pour véracité et si (!!val1) { pour fausseté.

Il n’y a pas Unaire opérateur pour cordesmais certains développeurs imposent la coercition à un chaîne de caractères en concaténant un vide chaîne de caractères à une variable comme dans val1 + ”. Personnellement, je ne suis pas fan et préfère convertir explicitement la variable en question en un chaîne de caractères en utilisant le Chaîne de caractères() fonction:

var stringVal = String(val1);

Réflexions finales sur la coercition de type JavaScript

La coercition implicite de JavaScript est une épée à double tranchant. D’une part, cela rend le langage facile à saisir par les codeurs novices. D’autre part, cela peut entraîner des difficultés indicibles pour les développeurs plus expérimentés qui doivent faire face à tous les bogues qu’il engendre. Si vous retenez une chose de ce didacticiel, c’est que vous ne devez pas vous fier à la coercition implicite pour comparer les variables de type primitif et les convertir explicitement vous-même à l’aide de fonctions telles que Chaîne de caractères(), Numéro()et Booléen().

Lisez plus de didacticiels de développement Web JavaScript.