Operator Vorrang mit Javascript Ternary Operator

Question

Ich kann nicht scheinen, meinen Kopf zu wickeln um den ersten Teil dieses Codes (+ =) in Kombination mit dem ternären Operator.

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

Die Art, wie ich denke Dieser Code funktioniert wie folgt:

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

Aber das ist nicht richtig, weil das ein Fehler in meiner Konsole gibt.

Also meine Frage ist, wie soll ich Interpet diesen Code korrekt?

Answer 1

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

Sie möchten die Betreiber an die Arbeit für h.className, besser sein spezifische Informationen.
Natürlich sollte kein Schaden aus h.className += ' error' kommen, aber das ist eine andere Sache.

Beachten Sie auch, dass + Vorrang vor dem ternären Operator hat: JavaScript Operator Präzedenz

Answer 2

Sie daran denken:

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

Die Art und Weise der Ausführung der Anweisung wird grundsätzlich wie folgt:

1. Does <expression> bewerten, um wahr, oder ist es zu bewerten, um falsch?
2. Wenn <expression> auswertet auf true, dann wird der Wert von <true clause> zu <variable> zugeordnet ist, <false clause> wird ignoriert, und die nächste Anweisung ausgeführt wird.
3. Wenn <expression> das Ergebnis falsch, dann <true clause> ignoriert wird und der Wert von <false clause> wird <variable> zugewiesen.

Die wichtige Sache mit dem ternären Operator in diesem und anderen Sprachen zu erkennen, dass das, was Code in <expression> ist, sollte ein logisches Ergebnis, wenn beurteilt:. Entweder wahr oder falsch

Im Fall von Ihrem Beispiel ersetzt in meiner Erklärung „zugewiesen“ mit „hinzugefügt“, oder ähnlich für je nachdem, was Kurzschrift Arithmetik Sie verwenden, falls vorhanden.

Answer 3

Die += tut, was Sie wollen, aber in der ternären Aussage zur rechten Hand von ihm, es prüft, ob h.className Falsey ist, was es wäre, wenn es nicht definiert wurde. Wenn es truthy (das heißt, wenn ein Klassenname bereits angegeben ist), dann wird Fehler mit einem Raum hinzugefügt (das heißt das Hinzufügen eines neue Klasse), sonst wird es ohne den Raum hinzugefügt.

Der Code könnte neu geschrieben werden, wie Sie vorschlagen, aber Sie müssen das h.className angeben ist für Truthiness-Vergleich verwendet werden, anstatt für den tatsächlichen Wert verwendet wird, in dem ternären Operator, so stellen Sie sicher, dass Sie nicht die Mühe mit die Verkettung von Werten in der gleichen Zeit wie Ihre ternäre Operation zu tun:

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

Answer 4

Die rechte Seite des = Operators links nach rechts ausgewertet. Also,

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

entspricht

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

Um äquivalent zu

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

Sie haben die ternäre Anweisung in Klammern trennen

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

Answer 5

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

sollten gleichwertig sein:

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

Answer 6

Ich weiß, das ist eine sehr alte Frage, aber ich bin nicht 100% zufrieden mit einem der Antworten, wie sie alle unvollständig erscheinen. So hier gehen wir wieder von ersten Prinzipien:

Der allgemeine Ziel des Benutzers:

Fasst den Code: „Ich mag einen error Klassennamen in eine Zeichenfolge hinzuzufügen, gegebenenfalls mit einem führenden Platz, wenn es bereits Klassennamen in der Zeichenfolge“

Einfachste Lösung

Wie wies Kobi aus, vor 5 Jahren, ein führender Platz im Klassennamen, die keine Probleme verursachen bei allen bekannten Browsern, so dass die kürzeste würde richtige Lösung tatsächlich sein:

h.className += ' error';

Das sollte die tatsächliche Antwort hat zur eigentlichen Problem .

---

Aber wie dem auch sei, die Fragen gestellt wurden ...

1) Warum hat diese Arbeit?

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

Das bedingt / ternäre Operator funktioniert wie eine if-Anweisung, dass Abtretungsempfänger das Ergebnis seiner true oder false Wege zu einer Variablen.

Damit Code gearbeitet, weil es ausgewertet wird einfach als:

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

2) und warum diese Pause tut?

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

Die Frage states „die ein [n] Fehler in meiner Konsole gibt“, die Sie in dem Denken den Code Annahme veranlasst, nicht funktioniert . In der Tat ist der folgende Code ausgeführt werden, ohne Fehler , aber es gibt einfach ‚Fehler‘, wenn die Zeichenfolge nicht leer und ‚Fehler‘, wenn die Zeichenfolge war leeren und so haben die Anforderungen nicht erfüllt .

Dieser Code immer ergibt eine Zeichenfolge, die nur ' error' oder 'error' enthält, weil es zu diesem Pseudo-Code auswertet:

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 (+ auf das gemeine Volk) hat eine höheren „Vorrang“ (6) als der bedingten / ternären Operator (15). Ich weiß, dass die Zahlen erscheinen rückwärts

Präzedenz bedeutet einfach, dass jede Art von Operator in einer Sprache in einer bestimmten vordefinierten Reihenfolge ausgewertet wird (und nicht nur von links nach rechts).

Referenz: Javascript Operator Präzedenz

Wie wird die Reihenfolge der Auswertung ändern:

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

Einige andere Antworten sprechen über den Vorrang zu ändern , sondern Sie können nicht . Precedence wird in die Sprache fest verdrahtet. Das ist nur ein fester Satz von Regeln ... Sie können jedoch die Reihenfolge der Auswertung ändern ...

Das Werkzeug in unserer Toolbox, kann , um die Reihenfolge der Auswertung ändern ist die Gruppierung Operator (auch bekannt als Klammer). Es tut dies durch die Ausdrücke in den Klammern sichergestellt werden ausgewertet vor Operationen außerhalb der Klammern. Das ist alles, was sie tun, aber das ist genug.

Halterungen arbeiten, nur weil sie (Betreiber Gruppierung) haben eine höhere Priorität als alle anderen Operatoren ( "gibt es jetzt eine Ebene 0").

Durch einfaches Klammern Ihnen das Hinzufügen , um die Reihenfolge der Auswertung ändern , um den bedingten Test, um sicherzustellen, zuerst durchgeführt wird, bevor die einfache String-Verkettung:

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

Ich werde jetzt diese Antwort verlassen ungesehen unter den anderen rosten:)

Answer 7

Ich möchte Erklärung von wayne wählen:

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

beide Lets betrachten die Fälle:

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

• Zuweisungsoperator funktioniert gut und Wert bekommt angehängte
• wenn läuft zum ersten Mal, o / p: false
• 2. Mal. o / p: falsetrue - Werte halten Anfügen

  

case2:   h.className = h.className + h.className? 'True': 'false'

• ist das Ergebnis nicht dasselbe wie Fall 1
• wenn läuft zum ersten Mal, o / p: false
• 2. Mal. o / p: false - Werte nicht halten Anhängen

explanation

  

In dem obigen Code, Fall 1 funktioniert

während  case2:

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

h.className + h.className => gilt als Ausdruck für ternären Operator als ternärer Operator eines höhere Priorität gegeben wird. so, immer das Ergebnis des ternären Ausdruck wird nur zugewiesen

Sie müssen den Vorrang definieren, durch Klammern

mit

Sie müssen die Reihenfolge der Auswertung definieren, mit Hilfe von Klammern für Fall 2 Arbeit als Fall 1

berücksichtigt werden

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