JavaScript-jämförelse och logiska operatörer


Innehållsförteckning

    Visa innehållsförteckning


Jämförelse- och logiska operatorer används för att testa för sant eller false.


Jämförelseoperatörer

Jämförelseoperatorer används i logiska uttalanden för att bestämma likhet eller skillnad mellan variabler eller värden.

Med tanke på att x=5 förklarar tabellen nedan jämförelseoperatorerna:

==

Beskrivning: lika med

Jämförande:

x == 8

Returnerar:

false

Prova →

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

Jämförande:

x == 5

Returnerar:

true

Prova →

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

Jämförande:

x == "5"

Returnerar:

true

Prova →

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

===

Beskrivning: lika värde och lika typ

Jämförande:

x === 5	

Returnerar:

true

Prova →

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

Jämförande:

x === "5"

Returnerar:

false

Prova →

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

!=

Beskrivning: inte lika

Jämförande:

x != 8

Returnerar:

true

Prova →

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

!==

Beskrivning: inte lika värde eller inte lika typ

Jämförande:

x !== 5

Returnerar:

false

Prova →

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

Jämförande:

x !== "5"

Returnerar:

true

Prova →

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

Jämförande:

x !== 8

Returnerar:

true

Prova →

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

>

Beskrivning: större än

Jämförande:

x > 8

Returnerar:

false

Prova →

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

<

Beskrivning: mindre än

Jämförande:

x < 8

Returnerar:

true

Prova →

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

>=

Beskrivning: större än eller lika med

Jämförande:

x >= 8

Returnerar:

false

Prova →

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

<=

Beskrivning: mindre än eller lika med

Jämförande:

x <= 8

Returnerar:

true

Prova →

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


Hur kan den användas

Jämförelseoperatorer kan användas i villkorliga uttalanden för att jämföra värden och vidta åtgärder beroende på resultatet:

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

Du kommer att lära dig mer om användningen av villkorliga uttalanden i nästa kapitel i denna handledning.


Logiska operatörer

Logiska operatorer används för att bestämma logiken mellan variabler eller värden.

Med tanke på att x=6 och y=3, förklarar tabellen nedan de logiska operatorerna:

&&

Beskrivning: och

Jämförande:

 (x < 10 && y > 1)

Returnerar:

true

Prova →

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

||

Beskrivning: eller

Jämförande:

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

Returnerar:

false

Prova →

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

!

Beskrivning: inte

Jämförande:

!(x == y)

Returnerar:

true

Prova →

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

Villkorlig (ternär) operatör

JavaScript innehåller också en villkorlig operator som tilldelar ett värde till en variabel baserat på något villkor.

Syntax

variablename = (condition) ? value1:value2 

Exempel

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

Prova själv →

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

Om variabeln ålder är ett värde under 18 är värdet på variabeln röstbart kommer att vara "För ung", annars blir värdet på röstbart "Gammal nog".


Jämföra olika typer

Att jämföra data av olika typer kan ge oväntade resultat.

När en sträng jämförs med ett nummer, kommer JavaScript att konvertera strängen till en siffra när du gör jämförelsen. En tom sträng konverteras till 0. En icke-numerisk sträng konverteras till NaN vilket alltid är falskt.

2 < 12

Värde:

true

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

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

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

</body>
</html>

2 < "12"

Värde:

true

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

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

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

</body>
</html>

2 < "John"

Värde:

false

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

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

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

</body>
</html>

2 > "John"

Värde:

false

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

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

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

</body>
</html>

2 == "John"

Värde:

false

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

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

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

</body>
</html>

"2" < "12"

Värde:

false

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

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

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

</body>
</html>

"2" > "12"

Värde:

true

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

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

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

</body>
</html>

"2" == "12"

Värde:

false

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

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

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

</body>
</html>

När man jämför två strängar blir "2" större än "12", eftersom (alfabetiskt) 1 är mindre än 2.

För att säkerställa ett korrekt resultat bör variabler konverteras till rätt typ före jämförelse:

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

Prova själv →

<!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 (??)

Operatorn ?? returnerar det första argumentet om det inte är nullish (null eller odefinierad).

Annars returnerar den det andra argumentet.

Exempel

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

Prova själv →

<!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-operatören stöds i alla webbläsare sedan mars 2020:

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

Den valfria kedjeoperatören (?.)

Operatorn ?. returnerar odefinierad om ett objekt är odefinierad eller null (istället för att skapa ett fel).

Exempel

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

Prova själv →

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

Den valfria kedjeoperatören stöds i alla webbläsare sedan mars 2020:

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