Tapez la coercition en JavaScript expliqué

En JavaScript, les variables ne nécessitent pas de déclaration de type spécifique et peuvent contenir des valeurs de n'importe quel type de données. En tant que langage faiblement typé, JavaScript convertit automatiquement les valeurs d'un type à un autre en arrière-plan pour garantir le bon fonctionnement de votre code. Bien que ce comportement rende JavaScript plus flexible, il peut également conduire à des résultats inattendus et à des bugs difficiles à trouver, si vous n'êtes pas familier avec son fonctionnement.

Dans cet article, nous découvrirons la coercition de type en JavaScript, couvrant différents types de coercition, des exemples et les meilleures pratiques pour vous aider à comprendre et à contrôler votre code plus efficacement.

Allons-y directement !?

Qu’est-ce que la coercition de type ?

La coercition de type fait référence à la conversion automatique ou manuelle d'une valeur d'un type de données à un autre.

Par exemple, convertir une chaîne comme « 123 » en un nombre 123.

En JavaScript, la coercition de type peut être de deux types :

• Coercition implicite : Lorsque JavaScript convertit automatiquement une valeur.
• Coercition explicite : Lorsque vous convertissez intentionnellement une valeur à l'aide de fonctions ou d'opérateurs intégrés.

Avant d'en apprendre davantage sur les différents types de coercition, il est important de comprendre les principaux types de données JavaScript, car la coercition implique toujours une conversion entre eux.

Types de données en JavaScript

1. Types primitifs :
   • Nombre (par exemple, 42, 3.14, NaN)
   • Chaîne (par exemple, "bonjour", '123')
   • Booléen (par exemple, vrai, faux)
   • Indéfini
   • Nul
   • Symbole
   • BigInt (par exemple, 123n)
2. Objets :
   • Tableaux, fonctions, objets, etc.

En savoir plus sur les types de données.

Maintenant, regardons les types de coercition de type.

Coercition de type implicite

La coercition de type implicite se produit lorsque JavaScript convertit automatiquement le type d'une valeur en un type différent pour répondre aux exigences d'une opération ou d'une expression. Ce processus est également connu sous le nom de conversion de type.

Exemples de coercition de type implicite

Exemple 1 : Coercition de chaîne avec opérateur

En JavaScript, lorsque vous utilisez l'opérateur et que l'une des valeurs est une chaîne, JavaScript convertit automatiquement l'autre valeur en chaîne et les combine. Ce processus est appelé coercition de chaîne.

console.log(3 + "7"); 
// Output: "37" (3 is coerced to "3")

Exemple 2 : Coercition numérique avec opérateurs arithmétiques

Lorsque vous utilisez des opérateurs arithmétiques comme -, *, / ou %, ils fonctionnent avec des nombres. Si vous leur donnez autre chose, ce n'est pas un nombre (comme une chaîne), JavaScript le convertit automatiquement en nombre avant d'effectuer l'opération. C'est ce qu'on appelle la coercition numérique.

console.log("7" - 3); 
// Output: 4 (string "7" coerced to number 7)

console.log(true * 3);
// Output: 3 (true coerced to 1)

Exemple 3 : Coercition au conditionnel

En JavaScript, lorsqu'une valeur est utilisée dans une condition (comme dans une instruction if ou while), elle est automatiquement convertie en booléen (vrai ou faux).

• Valeurs vraies : tout ce qui n'est pas 0, NaN, nul, non défini, faux ou une chaîne vide ("") est considéré comme vrai.
• Valeurs fausses : 0, NaN, null, undefined, false et une chaîne vide ("") sont considérées comme fausses.

console.log(3 + "7"); 
// Output: "37" (3 is coerced to "3")

Exemple 4 : Égalité lâche (==) et coercition

L'opérateur d'égalité lâche (==) compare deux valeurs en les convertissant au même type si elles sont différentes. En d'autres termes, il essaie de faire correspondre les valeurs en modifiant l'une ou les deux avant de les comparer.

console.log("7" - 3); 
// Output: 4 (string "7" coerced to number 7)

console.log(true * 3);
// Output: 3 (true coerced to 1)

Coercition de type explicite

La coercition de type explicite se produit lorsque vous convertissez intentionnellement une valeur d'un type à un autre, à l'aide de fonctions ou d'opérateurs intégrés.

Méthodes courantes de coercition explicite

Conversion en chaîne

• Utilisation de String() :

if ("Hello") { 
  console.log("This is truthy!"); // This will run because "Hello" is truthy 
}

if (27) { 
  console.log("This is also truthy!"); // This will run because 27 is truthy 
}

if (0) { 
  console.log("This won't run"); // This will not run because 0 is falsy 
}

if (null) { 
  console.log("This won't run either"); // This will not run because null is falsy 
}

if (!0) { 
  console.log("This will run"); // This will run because !0 is true (0 coerced to false, then negated) 
}

• Utilisation de .toString() :

console.log(5 == "5"); 
// Output: true (string "5" coerced to number 5)

console.log(null == undefined); 
// Output: true (both are considered "empty")

• Concaténation avec une chaîne vide :

  console.log(String(37)); 
  // Output: "37"

Conversion en nombre

• Utilisation de Number() :

  console.log((37).toString()); 
  // Output: "37"

• Utilisation d'Unary : Ceci est utilisé pour convertir une valeur en nombre.

  console.log(37 + ""); 
  // Output: "37"

• Utilisation d'Unary - : ceci est utilisé pour convertir une valeur en nombre et l'annuler.

  console.log(Number("37")); 
  // Output: 37

• Utilisation de parseInt() ou parseFloat() :

  // If the value is a string that can be converted to a number, it returns the number representation.
  console.log(+"37"); 
  // Output: 37

  // If the value is a boolean, true becomes 1 and false becomes 0.
  console.log(+true);   // Output: 1 (true becomes 1)
  console.log(+false);  // Output: 0 (false becomes 0)

  // If the value cannot be converted to a valid number, it returns NaN (Not-a-Number).
  console.log(+undefined);  // Output: NaN (undefined cannot be converted)
  console.log(+null);       // output: 0 (null is converted to 0)
  console.log(+{});         // Output: NaN (object cannot be converted)

Conversion en booléen

• Utilisation de Boolean() :

  // If the value is a number, it simply negates the number.
  console.log(-3);  // Output: -3 (negates the number)

  // If the value is a string that can be converted to a number, it first converts it and then negates it.
  console.log(-"37"); // Output: -37 (string "37" is converted to number and negated)

  // If the value is a boolean, true becomes -1 and false becomes -0.
  console.log(-true);   // Output: -1
  console.log(-false);  // Output: -0 

  // If the value cannot be converted to a valid number, it returns NaN (Not-a-Number).
  console.log(-undefined);  // Output: NaN (undefined cannot be converted)
  console.log(-null);       // Output: -0 (null is converted to 0 and negated to -0)
  console.log(-{});         // Output: NaN (object cannot be converted)

• Utilisation de la double négation (!!) : La double négation est un moyen rapide de convertir n'importe quelle valeur en booléen. Cela fonctionne en annulant d'abord la valeur (à l'aide de l'opérateur unique !), qui convertit la valeur en booléen (vrai ou faux), puis en la niant à nouveau pour obtenir la valeur booléenne d'origine.

  // parseInt(): Converts a string to an integer.
  console.log(parseInt("123.45")); 
  // Output: 123

  // parseFloat(): Converts a string to a floating-point number.
  console.log(parseFloat("123.45")); 
  // Output: 123.45

Pourquoi la coercition implicite peut-elle causer des problèmes ?

La coercition de type implicite peut rendre le code déroutant, en particulier pour les débutants ou lors de la révision d'un ancien code. Étant donné que la coercition se produit automatiquement, il peut être difficile de dire quelle était l'intention initiale.

Comprenons cela avec quelques exemples :

Résultats inattendus :

La coercition implicite peut entraîner des résultats inattendus, en particulier lorsque vous travaillez avec différents types de données. Il est donc difficile de prédire le comportement de certaines expressions.

Par exemple :

  console.log(Boolean(0)); 
  // Output: false

  console.log(Boolean(1)); 
  // Output: true

  console.log(Boolean(""));  
  // Output: false (empty string is falsy)

Dans l'exemple ci-dessus, la première expression effectue une concaténation de chaînes à cause de l'opérateur, mais la seconde effectue une soustraction numérique car - déclenche la coercition sur un nombre.

Mélange de types de données :

Lorsque vous mélangez des types de données dans des opérations, cela peut conduire à des résultats inattendus ou à des bugs, en particulier lorsque vous attendez un type mais obtenez quelque chose d'autre.

Par exemple :

console.log(3 + "7"); 
// Output: "37" (3 is coerced to "3")

Débogage difficile :

Il peut être difficile de trouver où se produit la conversion inattendue, ce qui rend les bogues plus difficiles à déboguer.

Par exemple :

console.log("7" - 3); 
// Output: 4 (string "7" coerced to number 7)

console.log(true * 3);
// Output: 3 (true coerced to 1)

Valeurs fausses et comparaisons de types :

JavaScript a plusieurs valeurs fausses comme 0, "", null, undefined, NaN, false. Lorsque ces valeurs sont utilisées dans des comparaisons ou des opérations logiques, la conversion de type implicite peut prêter à confusion. Si vous ne comprenez pas comment JavaScript interprète ces valeurs, cela peut entraîner des erreurs inattendues.

Par exemple :

if ("Hello") { 
  console.log("This is truthy!"); // This will run because "Hello" is truthy 
}

if (27) { 
  console.log("This is also truthy!"); // This will run because 27 is truthy 
}

if (0) { 
  console.log("This won't run"); // This will not run because 0 is falsy 
}

if (null) { 
  console.log("This won't run either"); // This will not run because null is falsy 
}

if (!0) { 
  console.log("This will run"); // This will run because !0 is true (0 coerced to false, then negated) 
}

Comment éviter les problèmes de coercition de type ?

Voici quelques bonnes pratiques pour vous aider à éviter les problèmes causés par la coercition de type implicite :

Utilisez une égalité stricte (===) :

Préférez === à == pour éviter une coercition de type inattendue lors des comparaisons.

console.log(5 == "5"); 
// Output: true (string "5" coerced to number 5)

console.log(null == undefined); 
// Output: true (both are considered "empty")

Soyez explicite lors de la conversion de types :

Utilisez des méthodes de conversion de type explicites pour spécifier clairement le changement de type souhaité.

  console.log(String(37)); 
  // Output: "37"

Évitez de mélanger les types dans les opérations :

Écrivez du code qui ne repose pas sur une coercition implicite en vous assurant que les opérandes sont du même type.

  console.log((37).toString()); 
  // Output: "37"

Valider les entrées :

Lorsque vous recevez des entrées utilisateur ou des données d'une API, assurez-vous de les vérifier et de les convertir dans le type correct, tel que des nombres ou des chaînes.

  console.log(37 + ""); 
  // Output: "37"

Connaître le comportement des tableaux et des objets :

Les tableaux et les objets se comportent différemment lorsqu'ils sont contraints à des chaînes.

• Tableaux : lorsqu'il est contraint à une chaîne, JavaScript convertit un tableau en chaîne avec ses éléments joints par des virgules. Par exemple:

  console.log(Number("37")); 
  // Output: 37

• Objets : par défaut, lorsqu'un objet est contraint à une chaîne, il renvoie "[object Object]", sauf si l'objet a une méthode toString() personnalisée. Par exemple:

  // If the value is a string that can be converted to a number, it returns the number representation.
  console.log(+"37"); 
  // Output: 37

  // If the value is a boolean, true becomes 1 and false becomes 0.
  console.log(+true);   // Output: 1 (true becomes 1)
  console.log(+false);  // Output: 0 (false becomes 0)

  // If the value cannot be converted to a valid number, it returns NaN (Not-a-Number).
  console.log(+undefined);  // Output: NaN (undefined cannot be converted)
  console.log(+null);       // output: 0 (null is converted to 0)
  console.log(+{});         // Output: NaN (object cannot be converted)

Conclusion

La coercition implicite en JavaScript peut être utile, mais elle peut également conduire à un comportement inattendu, provoquant des bugs et rendant le code plus difficile à maintenir. Pour éviter ces problèmes, utilisez une égalité stricte, convertissez explicitement les types et validez les entrées. De cette façon, vous pouvez écrire du code JavaScript plus propre, plus fiable et plus facile à maintenir.

C'est tout pour aujourd'hui.

J'espère que cela a été utile.

Merci d'avoir lu.

Pour plus de contenu comme celui-ci, cliquez ici.

Suivez-moi sur X(Twitter) pour des conseils quotidiens en matière de développement Web.

Découvrez toast.log, une extension de navigateur qui vous permet de voir les erreurs, les avertissements et les journaux au fur et à mesure qu'ils se produisent sur votre site, sans avoir à ouvrir la console du navigateur. Cliquez ici pour obtenir une réduction de 25 % sur toast.log.

Continuez à coder !!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!