Jämförelse- och logiska operatorer används för att testa för sant
eller false
.
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 > 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: mindre än
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 eller 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>
<=
Beskrivning: mindre än eller lika med
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>
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 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>
JavaScript innehåller också en villkorlig operator som tilldelar ett värde till en variabel baserat på något villkor.
variablename = (condition) ? value1:value2
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".
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>
Operatorn ??
returnerar det första argumentet om det inte är nullish (null
eller odefinierad
).
Annars returnerar den det andra argumentet.
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 |
Operatorn ?.
returnerar odefinierad
om ett objekt är odefinierad
eller null
(istället för att skapa ett fel).
// 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 |