Σύγκριση JavaScript και Λογικοί τελεστές

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Οι τελεστές σύγκρισης και λογικοί χρησιμοποιούνται για τον έλεγχο true ή false.

Χειριστές σύγκρισης

Οι τελεστές σύγκρισης χρησιμοποιούνται σε λογικές δηλώσεις για τον προσδιορισμό της ισότητας ή της διαφοράς μεταξύ μεταβλητών ή τιμών.

Δεδομένου ότι x=5, ο παρακάτω πίνακας εξηγεί τους τελεστές σύγκρισης:

==

Περιγραφή: ίσο με

Σύγκριση:

x == 8

Επιστροφές:

false

Δοκιμάστε το →

<!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>

Σύγκριση:

x == 5

Επιστροφές:

true

Δοκιμάστε το →

<!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>

Σύγκριση:

x == "5"

Επιστροφές:

true

Δοκιμάστε το →

<!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>

===

Περιγραφή: ίσης αξίας και ίσου τύπου

Σύγκριση:

x === 5

Επιστροφές:

true

Δοκιμάστε το →

<!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>

Σύγκριση:

x === "5"

Επιστροφές:

false

Δοκιμάστε το →

<!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>

!=

Περιγραφή: όχι ίση

Σύγκριση:

x != 8

Επιστροφές:

true

Δοκιμάστε το →

<!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>

!==

Περιγραφή: μη ίσης αξίας ή μη ίσου τύπου

Σύγκριση:

x !== 5

Επιστροφές:

false

Δοκιμάστε το →

<!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>

Σύγκριση:

x !== "5"

Επιστροφές:

true

Δοκιμάστε το →

<!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>

Σύγκριση:

x !== 8

Επιστροφές:

true

Δοκιμάστε το →

<!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>

>

Περιγραφή: μεγαλύτερη από

Σύγκριση:

x > 8

Επιστροφές:

false

Δοκιμάστε το →

<!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>

<

Περιγραφή: λιγότερο από

Σύγκριση:

x < 8

Επιστροφές:

true

Δοκιμάστε το →

<!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>

>=

Περιγραφή: μεγαλύτερο ή ίσο με

Σύγκριση:

x >= 8

Επιστροφές:

false

Δοκιμάστε το →

<!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>

<=

Περιγραφή: μικρότερη ή ίση με

Σύγκριση:

x <= 8

Επιστροφές:

true

Δοκιμάστε το →

<!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>

Πώς μπορεί να χρησιμοποιηθεί

Οι τελεστές σύγκρισης μπορούν να χρησιμοποιηθούν σε δηλώσεις υπό όρους για τη σύγκριση τιμών και αναλάβετε δράση ανάλογα με το αποτέλεσμα:

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

Θα μάθετε περισσότερα σχετικά με τη χρήση εντολών υπό όρους στο επόμενο κεφάλαιο αυτού του σεμιναρίου.

Λογικοί τελεστές

Οι λογικοί τελεστές χρησιμοποιούνται για τον προσδιορισμό της λογικής μεταξύ μεταβλητών ή τιμών.

Δεδομένου ότι x=6 και y=3, ο παρακάτω πίνακας εξηγεί τους λογικούς τελεστές:

&&

Περιγραφή: και

Σύγκριση:

 (x < 10 && y > 1)

Επιστροφές:

true

Δοκιμάστε το →

<!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>

||

Περιγραφή: ή

Σύγκριση:

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

Επιστροφές:

false

Δοκιμάστε το →

<!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>

!

Περιγραφή: όχι

Σύγκριση:

!(x == y)

Επιστροφές:

true

Δοκιμάστε το →

<!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>

Υπό όρους (Τριαδικός) Χειριστής

Η JavaScript περιέχει επίσης έναν τελεστή υπό όρους που εκχωρεί μια τιμή σε μια μεταβλητή με βάση κάποια συνθήκη.

Σύνταξη

variablename = (condition) ? value1:value2 

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!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>

Εάν η μεταβλητή ηλικία είναι τιμή κάτω των 18, η τιμή της μεταβλητής με δυνατότητα ψήφου θα είναι "Πολύ νέος", διαφορετικά η αξία του ψηφίσιμου θα είναι "αρκετά μεγάλος".

Σύγκριση διαφορετικών τύπων

Η σύγκριση δεδομένων διαφορετικών τύπων μπορεί να δώσει απροσδόκητα αποτελέσματα.

Όταν συγκρίνετε μια συμβολοσειρά με έναν αριθμό, η JavaScript θα μετατρέψει τη συμβολοσειρά σε έναν αριθμό όταν κάνετε τη σύγκριση. Μια κενή συμβολοσειρά μετατρέπεται σε 0. Μια μη αριθμητική Η συμβολοσειρά μετατρέπεται σε NaN που είναι πάντα false.

2 < 12

Τιμή:

true

Δοκιμάστε το →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

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

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

</body>
</html>

2 < "12"

Τιμή:

true

Δοκιμάστε το →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

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

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

</body>
</html>

2 < "John"

Τιμή:

false

Δοκιμάστε το →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

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

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

</body>
</html>

2 > "John"

Τιμή:

false

Δοκιμάστε το →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

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

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

</body>
</html>

2 == "John"

Τιμή:

false

Δοκιμάστε το →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

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

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

</body>
</html>

"2" < "12"

Τιμή:

false

Δοκιμάστε το →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

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

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

</body>
</html>

"2" > "12"

Τιμή:

true

Δοκιμάστε το →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

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

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

</body>
</html>

"2" == "12"

Τιμή:

false

Δοκιμάστε το →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

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

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

</body>
</html>

Κατά τη σύγκριση δύο χορδών, το "2" θα είναι μεγαλύτερο από το "12", επειδή (αλφαβητικά) το 1 είναι μικρότερο από το 2.

Για να εξασφαλιστεί ένα σωστό αποτέλεσμα, οι μεταβλητές θα πρέπει να μετατραπούν στον κατάλληλο τύπο πριν από τη σύγκριση:

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

Δοκιμάστε το μόνοι σας →

<!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>

The Nullish Coalescing Operator (??)

Ο τελεστής ?? επιστρέφει το πρώτο όρισμα εάν δεν είναι μηδενικό (null ή ακαθόριστο).

Διαφορετικά, επιστρέφει το δεύτερο όρισμα.

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!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>

Ο τελεστής nullish υποστηρίζεται σε όλα τα προγράμματα περιήγησης από τον Μάρτιο του 2020:

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

Ο προαιρετικός χειριστής αλυσίδων (?.)

Ο τελεστής ?. επιστρέφει απροσδιόριστο εάν ένα αντικείμενο είναι απροσδιόριστο ή null (αντί να παρουσιάζεται σφάλμα).

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!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>

Ο προαιρετικός χειριστής αλυσίδας υποστηρίζεται σε όλα τα προγράμματα περιήγησης από τον Μάρτιο του 2020:

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