Operatorpriorität mit dem ternären Operator von JavaScript

Ich kann mir den ersten Teil dieses Codes ( += ) in Kombination mit dem nicht vorstellen ternärer Operator.

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

Ich denke, dieser Code funktioniert wie folgt:

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

Aber das ist nicht richtig, denn das gibt einen Fehler in meiner Konsole.

Wie soll ich diesen Code richtig interpretieren?

Verwenden:

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

Sie möchten, dass der Betreiber für arbeitet h.className. Seien Sie besser konkret.

Natürlich soll daraus kein Schaden entstehen h.className += ' error'aber das ist eine andere Sache.

Beachte das auch + hat Vorrang vor dem ternären Operator: JavaScript-Operator-Vorrang

Denk darüber so:

<variable> = <expression> ? <true clause> : <false clause>

Die Art und Weise, wie die Anweisung ausgeführt wird, ist im Wesentlichen wie folgt:

1. Tut <expression> zu wahr auswerten oder zu falsch auswerten?
2. Wenn <expression> als wahr ausgewertet wird, dann der Wert von <true clause> zugeordnet ist <variable>, <false clause> wird ignoriert und die nächste Anweisung ausgeführt.
3. Wenn <expression> wertet dann als falsch aus <true clause> wird ignoriert und der Wert von <false clause> zugeordnet ist <variable>.

Das Wichtige, was man mit dem ternären Operator in dieser und anderen Sprachen erkennen muss, ist, dass jeder Code drin ist <expression> sollte bei der Auswertung ein boolesches Ergebnis liefern: entweder wahr oder falsch.

Ersetzen Sie im Fall Ihres Beispiels “zugewiesen zu” in meiner Erklärung durch “hinzugefügt zu” oder ähnliches für die von Ihnen verwendete Kurzformarithmetik, falls vorhanden.

Das += tut, was Sie wollen, aber in der ternären Anweisung rechts davon wird überprüft, ob h.className ist falsch, was es wäre, wenn es undefiniert wäre. Wenn es wahr ist (dh wenn bereits ein Klassenname angegeben ist), wird error mit einem Leerzeichen hinzugefügt (dh das Hinzufügen von a Neu Klasse), andernfalls wird es ohne das Leerzeichen hinzugefügt.

Der Code könnte wie von Ihnen vorgeschlagen umgeschrieben werden, aber Sie müssen dies angeben h.className soll für den Wahrheitsvergleich verwendet werden und nicht für die Verwendung seines tatsächlichen Werts im ternären Operator, also stellen Sie sicher, dass Sie sich nicht mit der Verkettung von Werten beschäftigen, während Sie Ihre ternäre Operation durchführen:

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

Die rechte Seite der = Operator wird von links nach rechts ausgewertet. So,

g.className = h.className + h.className ? ' error' : 'error';`

ist äquivalent zu

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

Äquivalent zu sein

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

Sie müssen die ternäre Aussage in Klammern trennen:

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

if (h.className) {
    h.className = h.className + ' error';
} else {
    h.className = h.className + 'error';
}

sollte äquivalent sein zu:

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

Ich möchte die Erklärung von Wayne auswählen:

<variable> = <expression> ? <true clause> : <false clause>

Betrachten wir beide Fälle:

Fall 1

h.className += h.className ? 'true' : 'false'

• Der Zuweisungsoperator funktioniert gut und der Wert wird angehängt
• Wenn es zum ersten Mal ausgeführt wird, ist die Ausgabe falsch
• Zweites Mal. Ausgabe: falsetrue – die Werte werden weiter angehängt

Fall 2:

h.className = h.className + h.className ? 'true' : 'false'

• Das Ergebnis ist nicht dasselbe wie in Fall 1
• Wenn es zum ersten Mal ausgeführt wird, ist die Ausgabe FALSCH
• Zweites Mal. Ausgabe: false – Werte werden nicht weiter angehängt

Erläuterung

Im obigen Code funktioniert Fall 1 einwandfrei

wohingegen

Fall 2,

h.className = h.className + h.className ? 'true' : 'false'

wird ausgeführt als

 h.className = (h.className + h.className) ? 'true' : 'false'

h.className + h.className => wird als Ausdruck für den ternären Operator betrachtet, da der ternäre Operator eine höhere Priorität hat. Es wird also immer nur das Ergebnis des ternären Ausdrucks zugewiesen.

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

Aber ich bin mit keiner der Antworten 100% zufrieden, da sie alle unvollständig erscheinen. Hier gehen wir also wieder von den ersten Prinzipien aus:

Das übergeordnete Ziel des Benutzers:

Zusammenfassen des Codes: „Ich möchte eine hinzufügen error Klassennamen in einen String, optional mit führendem Leerzeichen, wenn der String bereits Klassennamen enthält.”

Einfachste Lösung

Wie Kobi vor fünf Jahren betonte, wird ein führendes Leerzeichen in Klassennamen keine Probleme mit bekannten Browsern verursachen, daher wäre die kürzeste richtige Lösung tatsächlich:

h.className += ' error';

Das soll die gewesen sein tatsächliche Antwort zum eigentliches Problem.

Wie dem auch sei, die gestellten Fragen waren…

1. Warum hat das funktioniert?

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

Der bedingte/ternäre Operator funktioniert wie ein wenn Anweisung, die das Ergebnis seiner zuweist true oder false Pfade zu einer Variablen.

Dieser Code hat also funktioniert, weil er einfach wie folgt ausgewertet wird:

if (h.className IS NOT null AND IS NOT undefined AND IS NOT '')
    h.className += ' error'
else
    h.className += 'error'

2. Und warum ist das kaputt gegangen?

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

Die Frage lautet: „Das gibt a[n] Fehler in meiner Konsole”, was Sie dazu verleiten könnte, den Code zu denken funktioniert nicht. Tatsächlich läuft der folgende Code ohne Erroraber es gibt einfach ‘ error ‘ zurück, wenn die Zeichenfolge war nicht leer und ‘Fehler’ wenn die Zeichenfolge war leer und so entsprach nicht den Anforderungen.

Dieser Code führt immer zu einer Zeichenfolge, die nur enthält ' error' oder 'error' weil es zu diesem Pseudocode ausgewertet wird:

if ((h.className + h.className) IS NOT null AND IS NOT undefined AND IS NOT '')
    h.className=" error"
else
    h.className="error"

Der Grund dafür ist, dass der Additionsoperator (+ für das gemeine Volk) hat eine höhere “Präzedenz” (6) als der bedingte/ternäre Operator (15). Ich weiß, dass die Zahlen rückwärts erscheinen

Vorrang bedeutet einfach, dass jeder Operatortyp in einer Sprache in einer bestimmten vordefinierten Reihenfolge ausgewertet wird (und nicht nur von links nach rechts).

Bezug: JavaScript-Operator-Vorrang

So ändern Sie die Reihenfolge der Auswertung:

Jetzt wissen wir, warum es fehlschlägt, Sie müssen wissen, wie es funktioniert.

Einige andere Antworten sprechen darüber Vorrang ändernaber du kannst nicht. Vorrang ist in der Sprache fest verdrahtet. Das ist nur ein festes Regelwerk… Du kannst das aber ändern Reihenfolge der Auswertung…

Das Tool in unserer Toolbox, das kann Reihenfolge der Auswertung ändern ist der Gruppierungsoperator (auch bekannt als Klammern). Dies geschieht, indem sichergestellt wird, dass die Ausdrücke in den Klammern ausgewertet werden Vor Operationen außerhalb der Klammern. Das ist alles, was sie tun, aber das ist genug.

Klammern funktionieren einfach, weil sie (Gruppierungsoperatoren) haben Vorrang vor allen anderen Operatoren (“es gibt jetzt eine Stufe 0”).

Indem Sie einfach Klammern hinzufügen Reihenfolge der Auswertung ändern um sicherzustellen, dass der bedingte Test zuerst durchgeführt wird, bevor die einfache Zeichenfolgenverkettung erfolgt:

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