Ternärer Operator in JS: Alles, was Sie wissen müssen

Was ist Ternär?

Ternärer Operator ist ein Javascript-Operator, der seit Juli 2015 in allen Browsern verfügbar ist. Es handelt sich um eine Abkürzungsalternative für if/else-Anweisungen. Dieser Operator wird häufig in verschiedenen Programmiersprachen wie Java, C und Python verwendet, aber unser Fokus in diesem Artikel wird auf Javascript liegen.

Sehen wir uns die allgemeine Syntax des ternären Operators an.

condition ? ifTrue : ifFalse

Wie Sie dem obigen Beispiel entnehmen können, ersetzt der ternäre Operator if- und else-Anweisungen entsprechend durch ? und : Symbole. Die Bedingung, die auf der linken Seite des Fragezeichens steht, wird überprüft. Wenn es wahr ist, liegt der erste Ausdruck zwischen ? und die Markierung : wird ausgeführt. Wenn es falsch ist, wird der letzte Ausdruck ausgeführt, der nach dem Symbol : geschrieben wird.

Wie funktioniert es?

Um zu verstehen, wie der ternäre Operator funktioniert, vergleichen wir ihn mit der regulären if/else-Anweisung.
Der folgende Javascript-Code protokolliert unter bestimmten Bedingungen eine Zeichenfolge in der Konsole.

let a = 10

if(a == 10){
    console.log("Variable is ten!")
}else{
    console.log("Variable is not ten!")
}

Jetzt schreiben wir diesen Code mit einem ternären Operator neu.

let a = 10
a == 10 ? console.log("Variable is ten!") : console.log("Variable is not ten!")

Der ternäre Operator in diesem Codeblock protokolliert die Zeichenfolge bedingt in der von uns beabsichtigten Weise. Aber es gibt einen besseren Weg, diese Aussage zu schreiben.
Der ternäre Operator führt nicht nur den Ausdruck aus, sondern gibt auch den Wert zurück. Anstatt also den Operator für die Verarbeitung zweier verschiedener console.log-Ausdrücke zu verwenden, können wir die Anweisung so schreiben, dass sie zwei unterschiedliche Werte verarbeitet, die in einer console.log-Anweisung enthalten sind.
Zum Beispiel:

let a = 10
console.log(a == 10 ? "Variable is ten!" : "Variable is not ten!")

Die Ausgabe dieser Zeile ist genau die gleiche wie die des anderen ternären Ausdrucks, den wir zuvor geschrieben haben. Dieser Code ist jedoch kompakter und einfacher zu lesen.

Wir können einen ternären Operator verwenden, um Variablen bedingt Werte zuzuweisen. Schauen wir uns ein Beispiel mit regulären if/else-Anweisungen an und schreiben es dann erneut mit ternary.

let a = 10
let b
if(a === 10){
    b = a * 5
}else{
    b = a * 2
}

Wenn a 10 ist, multipliziert der Codeblock ihn mit 5, andernfalls multipliziert er die Variable mit 2 und weist sie in beiden Fällen b zu.
Die Alternative zur Verwendung eines ternären Operators sieht wie folgt aus:

let a = 10
let b = a === 10 ? a * 5 : a * 2

Wie Sie sehen, ist es bequemer, für grundlegende Vorgänge wie diesen einen einzeiligen Code zu schreiben.

Verschachtelte Bedingungen

Manchmal müssen wir mehr als eine if/else-Bedingung ineinander verwenden. Ternärer Operator kann zur Verkettung von Bedingungen verwendet werden.

let a = 5
if(a === 1){
    console.log("1")
}else if(a === 2){
    console.log("2")
}else{
    console.log("a is not 1 or 2")
}

Diese oben gezeigte Bedingungsverkettung kann mit einem ternären Operator folgendermaßen dargestellt werden:

let a = 5
console.log(a === 1 ? "1" : a === 2 ? "2" : "a is not 1 or 2")

Wie Sie sich vorstellen können, kann dies schnell sehr chaotisch werden. Aus diesem Grund ist die Verwendung eines ternären Operators in komplexen bedingten Anweisungen nicht erforderlich.

Ternär in Reaktion

Wenn Sie schon einmal eine React-Anwendung erstellt haben, wissen Sie wahrscheinlich, dass bedingtes Rendern ein wichtiges Thema ist. Der ternäre Operator erleichtert diesen Vorgang. Schauen wir uns ein Beispiel von der offiziellen Seite von React an.
Dies ist die normale Schreibweise der Aussage:

condition ? ifTrue : ifFalse

Und das ist die gleiche Aussage, aber unter Verwendung eines ternären Operators.

let a = 10

if(a == 10){
    console.log("Variable is ten!")
}else{
    console.log("Variable is not ten!")
}

Wie Sie sehen, sieht es viel besser aus. Daher ist es manchmal sauberer und besser, Anweisungen mit Ternary zu schreiben, insbesondere bei der Arbeit mit React. In einigen Fällen kann der ternäre Operator jedoch die Lesbarkeit des Codes noch erschweren.

In welchen anderen Situationen müssen wir Ihrer Meinung nach ternäre Operatoren verwenden oder vermeiden? Bitte teilen Sie mir Ihre Meinung in den Kommentaren mit!

Vielen Dank fürs Lesen.
Weitere Informationen finden Sie unter diesen Links.

• Mehr über ternären Operator: Bedingter (ternärer) Operator – MDN-Webdokumente
• Mehr über bedingtes Rendering in React: Bedingtes Rendering – React

Das obige ist der detaillierte Inhalt vonTernärer Operator in JS: Alles, was Sie wissen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!