JavaScript 比较
JavaScript 比较
比较和逻辑运算符用于测试 true 或 false。
比较运算符
比较运算符在逻辑语句中使用，以判定变量或值是否相等。
我们给定 x = 5，下表中解释了比较运算符：
| 运算符 | 描述 | 比较 | 返回 | 测试 |
|---|---|---|---|---|
| == | 等于 | x == 8 | false | 试一试 |
| x == 5 | true | 试一试 | ||
| x == "5" | true | 试一试 | ||
| === | 值相等并且类型相等 | x === 5 | true | 试一试 |
| x === "5" | false | 试一试 | ||
| != | 不相等 | x != 8 | true | 试一试 |
| !== | 值不相等或类型不相等 | x !== 5 | false | 试一试 |
| x !== "5" | true | 试一试 | ||
| x !== 8 | true | 试一试 | ||
| > | 大于 | x > 8 | false | 试一试 |
| < | 小于 | x < 8 | true | 试一试 |
| >= | 大于或等于 | x >= 8 | false | 试一试 |
| <= | 小于或等于 | x <= 8 | true | 试一试 |
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x == 8) 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x == 8);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x == 5) 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x == 5);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x == "5") 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x == "5");
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x === 5) 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x === 5);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x === "5") 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x === "5");
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x != 8) 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x != 8);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x !== 5) 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x !== 5);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x !== "5") 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x !== "5");
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x !== 8) 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x !== 8);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x > 8) 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x > 8);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x < 8) 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x < 8);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x >= 8) 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x >= 8);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x <= 8) 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x <= 8);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如何使用
比较运算符可用在条件语句中对值进行比较，并根据结果采取动作：
if (age < 18) text = "太年轻";
本教程接下来的章节中，您将在学到更多有关条件语句的知识。
逻辑运算符
逻辑运算符用于判定变量或值之间的逻辑。
我们给定 x = 6 且 y = 3，下表解释了逻辑运算符：
| 运算符 | 描述 | 例子 | 测试 |
|---|---|---|---|
| && | 与 | (x < 10 && y > 1) 为 true | 试一试 |
| || | 或 | (x == 5 || y == 5) 为 false | 试一试 |
| ! | 非 | !(x == y) 为 true | 试一试 |
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>如果两个表达式都为 true，则 AND 运算符（&&）返回 true，否则返回 false。</p>
<p id="demo"></p>
<script>
var x = 6;
var y = 3;
document.getElementById("demo").innerHTML =
(x < 10 && y > 1) + "<br>" +
(x < 10 && y < 1);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>如果一个或两个表达式为 true，则 OR 运算符（||）返回 true，否则返回 false。</p>
<p id="demo"></p>
<script>
var x = 6;
var 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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>NOT 运算符（！）对于 false 语句返回 true，对于 true 语句返回 false。</p>
<p id="demo"></p>
<script>
var x = 6;
var y = 3;
document.getElementById("demo").innerHTML =
!(x === y) + "<br>" +
!(x > y);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
条件（三元）运算符
JavaScript 也包含了可基于某些条件向变量赋值的条件运算符。
语法
variablename = (condition) ? value1:value2
示例代码：
var voteable = (age < 18) ? "太年轻":"足够成熟";
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>输入您的年龄然后点击这个按钮：</p>
<input id="age" value="18" />
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var age, voteable;
age = document.getElementById("age").value;
voteable = (age < 18) ? "好年轻":"够成熟";
document.getElementById("demo").innerHTML = voteable;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如果变量 age 的值小于 18，变量 voteable 的值将是 "太年轻"，否则变量 voteable 的值将是 "足够成熟"。
比较不同的类型
比较不同类型的数据也许会出现不可预料的结果。
如果将字符串与数字进行比较，那么在做比较时 JavaScript 会把字符串转换为数值。空字符串将被转换为 0。非数值字符串将被转换为始终为 false 的 NaN。
| 案例 | 值 | 测试 |
|---|---|---|
| 2 < 12 | true | 试一试 |
| 2 < "12" | true | 试一试 |
| 2 < "Bill" | false | 试一试 |
| 2 > "Bill" | false | 试一试 |
| 2 == "Bill" | false | 试一试 |
| "2" < "12" | false | 试一试 |
| "2" > "12" | true | 试一试 |
| "2" == "12" | false | 试一试 |
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 2 < 12;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 2 < "12";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 2 < "Bill";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 2 > "Bill";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 2 == "Bill";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "2" < "12";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "2" > "12";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "2" == "12";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
当比较两个字符串时，"2" 大于 "12"，因为（按照字母排序）1 小于 2。
为了确保正确的结果，在比较值前应该把变量转换为合适的类型：
age = Number(age);
if (isNaN(age)) {
voteable = "输入错误";
} else {
voteable = (age < 18) ? "太年轻" : "足够成熟";
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>请输入您的年龄然后点击按钮：</p>
<input id="age" value="18" />
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var age, voteable;
age = Number(document.getElementById("age").value);
if (isNaN(age)) {
voteable = "输入值不是数字";
} else {
voteable = (age < 18) ? "好年轻" : "够成熟";
}
document.getElementById("demo").innerHTML = voteable;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
