Les opérateurs de comparaison et logiques sont utilisés pour tester true
ou faux
.
Les opérateurs de comparaison sont utilisés dans les instructions logiques pour déterminer l'égalité ou la différence entre des variables ou des valeurs.
Étant donné que x=5
, le tableau ci-dessous explique les opérateurs de comparaison :
==
Description : égal à
Comparant:
x == 8
Retour :
false
Essayez-le →
<!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>
Comparant:
x == 5
Retour :
true
Essayez-le →
<!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>
Comparant:
x == "5"
Retour :
true
Essayez-le →
<!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>
===
Description : valeur égale et type égal
Comparant:
x === 5
Retour :
true
Essayez-le →
<!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>
Comparant:
x === "5"
Retour :
false
Essayez-le →
<!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>
!=
Description : différent
Comparant:
x != 8
Retour :
true
Essayez-le →
<!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>
!==
Description : valeur ou type différent
Comparant:
x !== 5
Retour :
false
Essayez-le →
<!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>
Comparant:
x !== "5"
Retour :
true
Essayez-le →
<!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>
Comparant:
x !== 8
Retour :
true
Essayez-le →
<!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>
>
Description : supérieur à
Comparant:
x > 8
Retour :
false
Essayez-le →
<!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>
<
Description : moins de
Comparant:
x < 8
Retour :
true
Essayez-le →
<!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>
>=
Description : supérieur ou égal à
Comparant:
x >= 8
Retour :
false
Essayez-le →
<!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>
<=
Description : inférieur ou égal à
Comparant:
x <= 8
Retour :
true
Essayez-le →
<!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>
Les opérateurs de comparaison peuvent être utilisés dans les instructions conditionnelles pour comparer des valeurs et agir en fonction du résultat :
if (age < 18) text = "Too young to buy alcohol";
Vous en apprendrez plus sur l'utilisation des instructions conditionnelles dans le prochain chapitre de ce didacticiel.
Les opérateurs logiques sont utilisés pour déterminer la logique entre des variables ou des valeurs.
Étant donné que x=6
et y=3
, le tableau ci-dessous explique les opérateurs logiques :
&&
Description : et
Comparant:
(x < 10 && y > 1)
Retour :
true
Essayez-le →
<!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>
||
Description : ou
Comparant:
(x == 5 || y == 5)
Retour :
false
Essayez-le →
<!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>
!
Description : non
Comparant:
!(x == y)
Retour :
true
Essayez-le →
<!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 contient également un opérateur conditionnel qui attribue une valeur à une variable en fonction d'une condition.
variablename = (condition) ? value1:value2
let voteable = (age < 18) ? "Too young":"Old enough";
Essayez-le vous-même →
<!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>
Si la variable âge est une valeur inférieure à 18 ans, la valeur de la variable votable sera "Trop jeune", sinon la valeur de votable sera "Assez vieux".
La comparaison de données de différents types peut donner des résultats inattendus.
Lors de la comparaison d'une chaîne avec un nombre, JavaScript convertira la chaîne en un nombre lors de la comparaison. Une chaîne vide est convertie en 0. Une chaîne non numérique la chaîne est convertie en NaN
qui est toujours false
.
2 < 12
Valeur :
true
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 2 < 12;
</script>
</body>
</html>
2 < "12"
Valeur :
true
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 2 < "12";
</script>
</body>
</html>
2 < "John"
Valeur :
false
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 2 < "John";
</script>
</body>
</html>
2 > "John"
Valeur :
false
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 2 > "John";
</script>
</body>
</html>
2 == "John"
Valeur :
false
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 2 == "John";
</script>
</body>
</html>
"2" < "12"
Valeur :
false
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "2" < "12";
</script>
</body>
</html>
"2" > "12"
Valeur :
true
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "2" > "12";
</script>
</body>
</html>
"2" == "12"
Valeur :
false
Essayez-le →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "2" == "12";
</script>
</body>
</html>
Lors de la comparaison de deux chaînes, "2" sera supérieur à "12", car (par ordre alphabétique) 1 est inférieur à 2.
Pour garantir un résultat correct, les variables doivent être converties dans le type approprié avant comparaison :
age = Number(age);
if (isNaN(age)) {
voteable = "Input is not a number";
} else {
voteable = (age < 18) ? "Too young" : "Old enough";
}
Essayez-le vous-même →
<!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>
L'opérateur ??
renvoie le premier argument s'il n'est pas nul (null
ou non défini
).
Sinon, il renvoie le deuxième argument.
let name = null;
let text = "missing";
let result = name ?? text;
Essayez-le vous-même →
<!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>
L'opérateur nullish est pris en charge dans tous les navigateurs depuis mars 2020 :
Chrome 80 | Edge 80 | Firefox 72 | Safari 13.1 | Opera 67 |
Feb 2020 | Feb 2020 | Jan 2020 | Mar 2020 | Mar 2020 |
L'opérateur ?.
renvoie undefined
si un objet est non défini
ou null
(au lieu de générer une erreur).
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};
// Ask for car name:
document.getElementById("demo").innerHTML = car?.name;
Essayez-le vous-même →
<!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>
L'opérateur de chaînage facultatif est pris en charge dans tous les navigateurs depuis mars 2020 :
Chrome 80 | Edge 80 | Firefox 72 | Safari 13.1 | Opera 67 |
Feb 2020 | Feb 2020 | Jan 2020 | Mar 2020 | Mar 2020 |