Comparaison JavaScript et opérateurs logiques


Table des matières

    Afficher la table des matières


Les opérateurs de comparaison et logiques sont utilisés pour tester true ou faux.


Opérateurs de comparaison

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

<

Description : moins de

Comparant:

x < 8

Retour :

true

Essayez-le →

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

>=

Description : supérieur ou égal à

Comparant:

x >= 8

Retour :

false

Essayez-le →

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

<=

Description : inférieur ou égal à

Comparant:

x <= 8

Retour :

true

Essayez-le →

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


Comment peut-il être utilisé

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.


Opérateurs logiques

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>

Opérateur conditionnel (ternaire)

JavaScript contient également un opérateur conditionnel qui attribue une valeur à une variable en fonction d'une condition.

Syntaxe

variablename = (condition) ? value1:value2 

Exemple

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".


Comparer différents types

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 de fusion nul (??)

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.

Exemple

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 de chaînage facultatif (?.)

L'opérateur ?. renvoie undefined si un objet est non défini ou null (au lieu de générer une erreur).

Exemple

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