Warum ist `${\'h.className = h.className ? \'error\': \'error\'}` funktioniert in JavaScript nicht wie erwartet?

Fehlerbehebung bei der Priorität ternärer Operatoren in JavaScript

Der ternäre Operator von JavaScript ist ein leistungsstarkes Werkzeug für bedingte Zuweisungen, aber es kann schwierig sein, seine Priorität zu verstehen. Dieser Artikel konzentriert sich auf ein bestimmtes Szenario, in dem der ternäre Operator mit = kombiniert wird.

Das Problem verstehen

Bedenken Sie den folgenden Codeausschnitt:

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

Auf den ersten Blick scheint der Code den aktuellen Wert von h.className basierend auf der ternären Bedingung entweder mit „error“ oder „error“ zu verketten. Allerdings kann diese Interpretation zu Fehlern führen.

Richtige Interpretation

Das Problem liegt in der Priorität der Operatoren. In JavaScript hat der Operator eine höhere Priorität als der ternäre Operator. Das bedeutet, dass der obige Ausdruck wie folgt ausgewertet wird:

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

Lösung

Um sicherzustellen, dass der ternäre Operator korrekt angewendet wird, sollte der Code wie folgt geschrieben werden:

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

Dadurch wird sichergestellt, dass der ternäre Operator vor der Verkettung mit h.className ausgewertet wird.

Zusätzliche Überlegungen

Das ist wichtig zu beachten h.className = ' error' ist ebenfalls gültig, aber nicht so präzise wie der aktualisierte Code. Der =-Operator gilt nur für h.className, während der aktualisierte Code das Ergebnis der ternären Bedingung explizit mit h.className verkettet.

Fazit

Das Verständnis der Operatorpriorität ist von entscheidender Bedeutung für Korrekten JavaScript-Code schreiben. Durch die Klärung der Vorrangregeln für den ternären Operator und den =-Operator bietet dieser Artikel eine Lösung für eine häufige Herausforderung, die bei der Verwendung bedingter Zuweisungen in JavaScript auftritt.

Das obige ist der detaillierte Inhalt vonWarum ist `${\'h.className = h.className ? \'error\': \'error\'}` funktioniert in JavaScript nicht wie erwartet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!