比较和逻辑运算符用于测试 true
或 假
。
比较运算符在逻辑语句中使用,以确定变量或值之间的相等或差异。
鉴于 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 > 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
返回:
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 >= 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
返回:
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>
比较运算符可用于条件语句中来比较值 并根据结果采取行动:
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>
如果变量age的值小于18,则变量voteable的值 将会是“太年轻”,否则 voteable 的值将会是“足够老”。
比较不同类型的数据可能会产生意想不到的结果。
当将字符串与数字进行比较时,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>
如果第一个参数不为空,则 ??
运算符将返回该参数 (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>
自 2020 年 3 月起,所有浏览器都支持 nullish 运算符:
Chrome 80 | Edge 80 | Firefox 72 | Safari 13.1 | Opera 67 |
Feb 2020 | Feb 2020 | Jan 2020 | Mar 2020 | Mar 2020 |
如果对象是 undefined
或 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 年 3 月起,所有浏览器都支持可选链运算符:
Chrome 80 | Edge 80 | Firefox 72 | Safari 13.1 | Opera 67 |
Feb 2020 | Feb 2020 | Jan 2020 | Mar 2020 | Mar 2020 |