Ce nouvel opérateur JavaScript change complètement la donne

JavaScript continue d'évoluer, introduisant constamment de nouvelles fonctionnalités et syntaxes pour améliorer les performances et l'expressivité du langage. L'une des améliorations les plus intéressantes est l'opérateur de coalescence nul (??). Cet opérateur change la donne, offrant une manière concise et intuitive de travailler avec les valeurs null et undefined. Cet article examinera en profondeur l'opérateur de fusion nul, analysera ses avantages et expliquera comment l'utiliser efficacement dans TypeScript.

Introduction à l'opérateur de coalescence de valeurs nulles

L'opérateur de coalescence nul

(??) est un opérateur logique qui renvoie l'opérande de droite lorsque l'opérande de gauche est null ou undefined. Ceci est particulièrement utile pour fournir des valeurs par défaut et éviter les pièges courants associés à l'opérateur logique OU (||).

Problèmes avec l'opérateur logique OU (||)

Avant l'introduction de l'opérateur de fusion nul, les développeurs utilisaient souvent l'opérateur logique OU (||) pour fournir des valeurs par défaut. Cependant, cette approche présente un inconvénient important : elle assimile des valeurs imaginaires (telles que 0, '' et faux) à null ou undefined.

<code class="language-javascript">let value = 0;
let defaultValue = value || 10;
console.log(defaultValue); // 输出：10</code>

Dans l'exemple ci-dessus, value vaut 0, ce qui est une valeur imaginaire. Par conséquent, defaultValue se voit attribuer la valeur 10, même si 0 est un nombre valide. Ce comportement peut entraîner des résultats inattendus et des erreurs dans votre code.

Solution de l'opérateur de coalescence nul (??)

L'opérateur de coalescence

null (??) résout ce problème en renvoyant l'opérande de droite uniquement si l'opérande de gauche est null ou undefined. Cela en fait une option plus fiable pour fournir des valeurs par défaut.

<code class="language-typescript">let value: number | null | undefined = 0;
let defaultValue = value ?? 10;
console.log(defaultValue); // 输出：0</code>

Dans cet exemple, value vaut 0, ce qui n'est pas nul. Par conséquent, defaultValue se voit attribuer une valeur de 0, conservant la valeur attendue.

Avantages de l'opérateur de coalescence de valeurs nulles

1. Intention claire : l'opérateur de fusion nul exprime clairement l'intention de fournir une valeur par défaut uniquement lorsque la valeur d'origine est null ou undefined.
2. Éviter les erreurs : en faisant la distinction entre les valeurs imaginaires et nulles, l'opérateur de fusion nul permet d'éviter les erreurs courantes et les comportements inattendus.
3. Succinctness : l'opérateur de fusion nul fournit un moyen concis et lisible de gérer les valeurs par défaut, réduisant ainsi le besoin de longues instructions conditionnelles.

Utilisation de l'opérateur de coalescence nul dans TypeScript

TypeScript prend entièrement en charge l'opérateur de fusion nul, ce qui facilite son intégration dans vos projets TypeScript. Examinons quelques exemples pour voir comment il peut être utilisé efficacement.

Exemple : Fournissez une valeur par défaut

L'un des cas d'utilisation les plus courants de l'opérateur de coalescence nul consiste à fournir des valeurs par défaut pour les paramètres de fonction.

<code class="language-typescript">function greet(name: string | null | undefined, greeting: string = 'Hello'): string {
  const defaultName = name ?? 'Guest';
  return `${greeting}, ${defaultName}!`;
}

console.log(greet(null)); // 输出：Hello, Guest!
console.log(greet(undefined)); // 输出：Hello, Guest!
console.log(greet('Alice')); // 输出：Hello, Alice!</code>

Dans cet exemple, la fonction greet utilise l'opérateur de fusion nul pour fournir le nom par défaut « Invité » lorsque l'argument name est null ou undefined.

Exemple : Gestion des attributs facultatifs

L'opérateur de fusion nul peut également être utilisé pour gérer les propriétés facultatives des objets.

<code class="language-javascript">let value = 0;
let defaultValue = value || 10;
console.log(defaultValue); // 输出：10</code>

Dans cet exemple, l'interface User a les attributs facultatifs name et email. L'opérateur de coalescence nul est utilisé pour fournir des valeurs par défaut lorsque ces propriétés sont null ou undefined.

Exemple : Utilisation d'un tableau

L'opérateur de fusion nul peut également être utilisé pour gérer les valeurs nulles dans les tableaux.

<code class="language-typescript">let value: number | null | undefined = 0;
let defaultValue = value ?? 10;
console.log(defaultValue); // 输出：0</code>

Dans cet exemple, le tableau values contient des nombres, null et undefined. L'opérateur de coalescence nul remplace les valeurs nulles par 0.

Cas d'utilisation avancés

L'opérateur de fusion nul ne concerne pas uniquement les simples valeurs par défaut. Il peut également être utilisé dans des scénarios plus avancés, tels que le chaînage de plusieurs valeurs de repli et la combinaison avec d'autres opérateurs.

Exemple : enchaîner plusieurs valeurs de secours

Vous pouvez chaîner plusieurs opérateurs de fusion nuls pour fournir plusieurs valeurs de secours.

<code class="language-typescript">function greet(name: string | null | undefined, greeting: string = 'Hello'): string {
  const defaultName = name ?? 'Guest';
  return `${greeting}, ${defaultName}!`;
}

console.log(greet(null)); // 输出：Hello, Guest!
console.log(greet(undefined)); // 输出：Hello, Guest!
console.log(greet('Alice')); // 输出：Hello, Alice!</code>

Dans cet exemple, value et fallback1 sont nuls, donc l'opérateur de coalescence nul revient à fallback2, qui a une valeur de 42.

Exemple : Combinaison avec d'autres opérateurs

L'opérateur de coalescence nul peut être combiné avec d'autres opérateurs, tels que l'opérateur ternaire, pour créer des expressions conditionnelles plus complexes.

<code class="language-typescript">interface User {
  id: number;
  name?: string;
  email?: string;
}

const user: User = {
  id: 1,
  name: null,
};

const displayName = user.name ?? 'Anonymous';
const displayEmail = user.email ?? 'No email provided';

console.log(`User ID: ${user.id}`);
console.log(`Display Name: ${displayName}`);
console.log(`Display Email: ${displayEmail}`);</code>

Dans cet exemple, l'opérateur ternaire est utilisé pour vérifier si value n'est pas null. Si ce n'est pas le cas null, l'opérateur de coalescence nul est utilisé pour fournir une valeur par défaut de 10. Si value vaut null, le résultat est 20.

Bonnes pratiques

Lorsque vous utilisez l'opérateur de coalescence nul, assurez-vous de suivre les meilleures pratiques pour garantir que votre code est clair, maintenable et sans erreur.

1. À utiliser avec prudence : Bien que l'opérateur de coalescence nul soit puissant, il doit être utilisé avec prudence. En abuser peut rendre votre code difficile à lire et à comprendre.
2. Documentez votre intention : lorsque vous utilisez l'opérateur de fusion nul, pensez à ajouter des commentaires pour documenter votre intention, en particulier dans les expressions complexes.
3. Évitez de mélanger avec le OU logique  : Mélanger des opérateurs de coalescence nuls avec des opérateurs OU logiques peut entraîner de la confusion et des erreurs. Tenez-vous-en à un opérateur pour fournir une valeur par défaut.
4. Testez minutieusement : testez toujours votre code minutieusement pour vous assurer que l'opérateur de coalescence nul fonctionne comme prévu, en particulier dans les cas extrêmes.

Conclusion

L'opérateur de fusion nul (??) est une fonctionnalité révolutionnaire pour les développeurs JavaScript et TypeScript. Il fournit une manière concise et intuitive de gérer les valeurs null et undefined, évitant ainsi les pièges courants associés à l'opérateur logique OU. En utilisant l'opérateur de fusion nul, vous pouvez écrire un code plus clair, plus maintenable et moins sujet aux erreurs.

Que vous fournissiez une valeur par défaut, gériez des propriétés facultatives ou utilisiez un tableau, l'opérateur de fusion nul vous couvre. Intégrez-le dans vos projets TypeScript dès aujourd'hui et découvrez ses avantages par vous-même.

Bon codage !

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!