Pourquoi `${\'h.className = h.className ? \'erreur\' : \'erreur\'}` ne fonctionne pas comme prévu en JavaScript ?

Dépannage de la priorité des opérateurs ternaires en JavaScript

L'opérateur ternaire de JavaScript est un outil puissant pour les affectations conditionnelles, mais comprendre sa priorité peut être délicat. Cet article se concentre sur un scénario spécifique dans lequel l'opérateur ternaire est combiné avec =.

Comprendre le problème

Considérez l'extrait de code suivant :

h.className += h.className ? ' error' : 'error'

À première vue, le code semble concaténer la valeur actuelle de h.className avec « erreur » ou « erreur » en fonction de la condition ternaire. Cependant, cette interprétation peut conduire à des erreurs.

Interprétation correcte

Le problème réside dans la préséance des opérateurs. En JavaScript, l'opérateur a une priorité plus élevée que l'opérateur ternaire. Cela signifie que l'expression ci-dessus est évaluée comme suit :

h.className = h.className + (h.className ? ' error' : 'error')

Solution

Pour garantir que l'opérateur ternaire est appliqué correctement, le code doit être écrit comme suit :

h.className = h.className + (h.className ? ' error' : 'error')

Cela garantit que l'opérateur ternaire est évalué avant la concaténation avec h.className.

Considérations supplémentaires

Il est important de noter que h.className = 'error' est également valide, mais il n'est pas aussi précis que le code mis à jour. L'opérateur = s'applique uniquement à h.className, alors que le code mis à jour concatène explicitement le résultat de la condition ternaire avec h.className.

Conclusion

Comprendre la priorité des opérateurs est crucial pour écrire du code JavaScript correct. En clarifiant les règles de priorité pour l'opérateur ternaire et l'opérateur =, cet article fournit une solution à un défi courant rencontré lors de l'utilisation d'affectations conditionnelles en JavaScript.

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!