JavaScript-Vergleich und logische Operatoren

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Vergleichs- und logische Operatoren werden verwendet, um zu testen, ob wahr ist oder false.

Vergleichsoperatoren

Vergleichsoperatoren werden in logischen Anweisungen verwendet, um Gleichheit oder Unterschied zwischen Variablen oder Werten zu bestimmen.

Vorausgesetzt, dass x=5 ist, werden in der folgenden Tabelle die Vergleichsoperatoren erläutert:

==

Beschreibung: gleich

Vergleich:

x == 8

Kehrt zurück :

false

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Comparison</h1>
<h2>The == Operator</h2>

<p>Assign 5 to x, and display the value of the comparison (x == 8):</p>

<p id="demo"></p>

<script>
let x = 5;
document.getElementById("demo").innerHTML = (x == 8);
</script>

</body>
</html>

Vergleich:

x == 5

Kehrt zurück :

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Comparison</h1>
<h2>The == Operator</h2>

<p>Assign 5 to x, and display the value of the comparison (x == 5):</p>

<p id="demo"></p>

<script>
let x = 5;
document.getElementById("demo").innerHTML = (x == 5);
</script>

</body>
</html>

Vergleich:

x == "5"

Kehrt zurück :

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Comparison</h1>
<h2>The == Operator</h2>

<p>Assign 5 to x, and display the value of the comparison (x == 5):</p>

<p id="demo"></p>

<script>
let x = 5;
document.getElementById("demo").innerHTML = (x == "5");
</script>

</body>
</html>

===

Beschreibung: gleicher Wert und gleicher Typ

Vergleich:

x === 5

Kehrt zurück :

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Comparison</h1>
<h2>The === Operator</h2>

<p>Assign 5 to x, and display the value of the comparison (x === 5):</p>

<p id="demo"></p>

<script>
let x = 5;
document.getElementById("demo").innerHTML = (x === 5);
</script>

</body>
</html>

Vergleich:

x === "5"

Kehrt zurück :

false

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Comparison</h1>
<h2>The === Operator</h2>

<p>Assign 5 to x, and display the value of the comparison (x === "5").</p>

<p id="demo"></p>

<script>
let x = 5;
document.getElementById("demo").innerHTML = (x === "5");
</script>

</body>
</html>

!=

Beschreibung: nicht gleich

Vergleich:

x != 8

Kehrt zurück :

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Comparison</h1>
<h2>The != Operator</h2>

<p>Assign 5 to x, and display the value of the comparison (x != 8).</p>

<p id="demo"></p>

<script>
let x = 5;
document.getElementById("demo").innerHTML = (x != 8);
</script>

</body>
</html>

!==

Beschreibung: ungleicher Wert oder ungleicher Typ

Vergleich:

x !== 5

Kehrt zurück :

false

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Comparison</h1>
<h2>The !== Operator</h2>

<p>Assign 5 to x, and display the value of the comparison (x !== 5):</p>

<p id="demo"></p>

<script>
let x = 5;
document.getElementById("demo").innerHTML = (x !== 5);
</script>

</body>
</html>

Vergleich:

x !== "5"

Kehrt zurück :

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Comparison</h1>
<h2>The !== Operator</h2>

<p>Assign 5 to x, and display the value of the comparison (x !== "5"):</p>

<p id="demo"></p>

<script>
let x = 5;
document.getElementById("demo").innerHTML = (x !== "5");
</script>

</body>
</html>

Vergleich:

x !== 8

Kehrt zurück :

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Comparison</h1>
<h2>The !== Operator</h2>

<p>Assign 5 to x, and display the value of the comparison (x !== 8):</p>

<p id="demo"></p>

<script>
let x = 5;
document.getElementById("demo").innerHTML = (x !== 8);
</script>

</body>
</html>

>

Beschreibung: größer als

Vergleich:

x > 8

Kehrt zurück :

false

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Comparison</h1>
<h2>The &gt; Operator</h2>

<p>Assign 5 to x, and display the value of the comparison (x &gt; 8).</p>
 
<p id="demo"></p>

<script>
let x = 5;
document.getElementById("demo").innerHTML = (x > 8);
</script>

</body>
</html>

<

Beschreibung: weniger als

Vergleich:

x < 8

Kehrt zurück :

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Comparison</h1>
<h2>The &lt; Operator</h2>

<p>Assign 5 to x, and display the value of the comparison (x &lt; 8).</p>

<p id="demo"></p>

<script>
let x = 5;
document.getElementById("demo").innerHTML = (x < 8);
</script>

</body>
</html>

>=

Beschreibung: größer oder gleich

Vergleich:

x >= 8

Kehrt zurück :

false

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Comparison</h1>
<h2>The &gt;= Operator</h2>

<p>Assign 5 to x, and display the value of the comparison (x &gt;= 8).</p>

<p id="demo"></p>

<script>
let x = 5;
document.getElementById("demo").innerHTML = (x >= 8);
</script>

</body>
</html>

<=

Beschreibung: kleiner oder gleich

Vergleich:

x <= 8

Kehrt zurück :

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Comparison</h1>
<h2>The &lt;= Operator</h2>

<p>Assign 5 to x, and display the value of the comparison (x &lt;= 8).</p>

<p id="demo"></p>

<script>
let x = 5;
document.getElementById("demo").innerHTML = (x <= 8);
</script>

</body>
</html>

Wie kann es verwendet werden?

Vergleichsoperatoren können in bedingten Anweisungen zum Vergleichen von Werten verwendet werden und je nach Ergebnis Maßnahmen ergreifen:

if (age < 18) text = "Too young to buy alcohol";

Im nächsten Kapitel dieses Tutorials erfahren Sie mehr über die Verwendung von bedingten Anweisungen.

Logische Operatoren

Logische Operatoren werden verwendet, um die Logik zwischen Variablen oder Werten zu bestimmen.

Vorausgesetzt, dass x=6 und y=3, werden in der folgenden Tabelle die logischen Operatoren erläutert:

&&

Beschreibung: und

Vergleich:

 (x < 10 && y > 1)

Kehrt zurück :

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Comparison</h1>
<h2>The && Operator (Logical AND)</h2>
<p>The && operator returns true if both expressions are true, otherwise it returns false.</p>

<p id="demo"></p>

<script>
let x = 6;
let y = 3;

document.getElementById("demo").innerHTML = 
(x < 10 && y > 1) + "<br>" + 
(x < 10 && y < 1);
</script>

</body>
</html>

||

Beschreibung: oder

Vergleich:

(x == 5 || y == 5)

Kehrt zurück :

false

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Comparison</h1>
<h2>The || Operator (Logical OR)</h2>
<p>The || returns true if one or both expressions are true, otherwise it returns false.</p>

<p id="demo"></p>

<script>
let x = 6;
let y = 3;

document.getElementById("demo").innerHTML = 
(x == 5 || y == 5) + "<br>" + 
(x == 6 || y == 0) + "<br>" + 
(x == 0 || y == 3) + "<br>" + 
(x == 6 || y == 3);
</script>

</body>
</html>

!

Beschreibung: nicht

Vergleich:

!(x == y)

Kehrt zurück :

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

<p>The NOT operator (!) returns true for false statements and false for true statements.</p>

<p id="demo"></p>

<script>
let x = 6;
let y = 3;

document.getElementById("demo").innerHTML = 
!(x === y) + "<br>" + 
!(x > y);
</script>

</body>
</html>

Bedingter (ternärer) Operator

JavaScript enthält auch einen bedingten Operator, der einer Variablen basierend auf einer Bedingung einen Wert zuweist.

Syntax

variablename = (condition) ? value1:value2 

Beispiel

let voteable = (age < 18) ? "Too young":"Old enough";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Comparison</h1>
<h2>The () ? : Ternary Operator</h2>

<p>Input your age and click the button:</p>

<input id="age" value="18" />

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  let age = document.getElementById("age").value;
  let voteable = (age < 18) ? "Too young":"Old enough";
  document.getElementById("demo").innerHTML = voteable + " to vote.";
}
</script>

</body>
</html>

Wenn die Variable Alter einen Wert unter 18 Jahren hat, ist der Wert der Variable wählbar wird „Zu jung“ sein, andernfalls ist der Wert von voteable „Alt genug“.

Vergleich verschiedener Typen

Der Vergleich von Daten unterschiedlicher Art kann zu unerwarteten Ergebnissen führen.

Beim Vergleich einer Zeichenfolge mit einer Zahl konvertiert JavaScript die Zeichenfolge in eine Zahl, wenn Sie den Vergleich durchführen. Eine leere Zeichenfolge wird in 0 konvertiert. Eine nicht numerische Zeichenfolge string wird in NaN konvertiert, was immer false ist.

2 < 12

Wert:

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 2 < 12;
</script>

</body>
</html>

2 < "12"

Wert:

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 2 < "12";
</script>

</body>
</html>

2 < "John"

Wert:

false

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 2 < "John";
</script>

</body>
</html>

2 > "John"

Wert:

false

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 2 > "John";
</script>

</body>
</html>

2 == "John"

Wert:

false

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 2 == "John";
</script>

</body>
</html>

"2" < "12"

Wert:

false

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "2" < "12";
</script>

</body>
</html>

"2" > "12"

Wert:

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "2" > "12";
</script>

</body>
</html>

"2" == "12"

Wert:

false

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "2" == "12";
</script>

</body>
</html>

Beim Vergleich zweier Zeichenfolgen ist „2“ größer als „12“, weil (alphabetisch) 1 ist kleiner als 2.

Um ein korrektes Ergebnis zu gewährleisten, sollten Variablen in den richtigen Typ konvertiert werden vor dem Vergleich:

age = Number(age);
if (isNaN(age)) {
  voteable = "Input is not a number";
} else {
    voteable = (age < 18) ? "Too young" : "Old enough";
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparisons</h2>

<p>Input your age and click the button:</p>

<input id="age" value="18" />

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  let voteable;
  let age = Number(document.getElementById("age").value);
  if (isNaN(age)) {
    voteable = "Input is not a number";
  } else {
    voteable = (age < 18) ? "Too young" : "Old enough";
  }
  document.getElementById("demo").innerHTML = voteable + " to vote";
}
</script>

</body>
</html>

Der Nullish Coalescing Operator (??)

Der Operator ?? gibt das erste Argument zurück, wenn es nicht null ist (null oder undefiniert).

Andernfalls wird das zweite Argument zurückgegeben.

Beispiel

let name = null;
let text = "missing";
let result = name ?? text;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ?? Operator</h2>
<p>The ?? operator returns the first argument if it is not nullish (null or undefined). Otherwise it returns the second.</p>

<p id="demo"></p>

<script>
let name = null;
let text = "missing";
let result = name ?? text;
document.getElementById("demo").innerHTML = "The name is " + result; 
</script>

</body>
</html>

Der nullish-Operator wird seit März 2020 in allen Browsern unterstützt:

Chrome 80 Edge 80 Firefox 72 Safari 13.1 Opera 67
Feb 2020 Feb 2020 Jan 2020 Mar 2020 Mar 2020

Der optionale Verkettungsoperator (?.)

Der Operator ?. gibt undefiniert zurück, wenn ein Objekt vorhanden ist undefiniert oder null (anstatt einen Fehler auszulösen).

Beispiel

// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};
// Ask for car name:
document.getElementById("demo").innerHTML = car?.name;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ?. Operator</h2>
<p>The ?. operator returns undefined if an object is undefined or null (instead of throwing an error).</p>

<p>Car name is:</p>
<p id="demo"></p>

<script>
const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;
document.getElementById("demo").innerHTML = name;
</script>

</body>
</html>

Der optionale Verkettungsoperator wird seit März 2020 in allen Browsern unterstützt:

Chrome 80 Edge 80 Firefox 72 Safari 13.1 Opera 67
Feb 2020 Feb 2020 Jan 2020 Mar 2020 Mar 2020