JavaScript 快速導覽 - 相等性及關係運算

JavaScript 的相等性及關係運算子 (equality and relational operator) ,比較兩個運算元是否相等或大於小於,結果為布林字面常數 (Boolean literal) ,也就是 truefalse ,如下列表

運算子功能範例
==相等a == b
===嚴格相同a === b
!=不相等a != b
!==嚴格不相同a !== b
>大於a >= b
>=大於等於a >= b
<小於a < b
<=小於等於a <= b


JavaScript 使用連續兩個等號 == 測試相等性,注意這與一般我們手寫的數學等號 = ,這不一樣喔!


以下程式示範相等性運算子
function run() {
    var c = document.getElementById("content");
    var n1 = document.createElement("p");
    var n2 = document.createElement("p");
    var n3 = document.createElement("p");
    var n4 = document.createElement("p");
    var n5 = document.createElement("p");
    var n6 = document.createElement("p");
    var n7 = document.createElement("p");
    var n8 = document.createElement("p");
    n1.appendChild(document.createTextNode(33 == "33"));
    c.appendChild(n1);
    n2.appendChild(document.createTextNode(33 === "33"));
    c.appendChild(n2);
    n3.appendChild(document.createTextNode(33 != "33"));
    c.appendChild(n3);
    n4.appendChild(document.createTextNode(33 !== "33"));
    c.appendChild(n4);
    n5.appendChild(document.createTextNode(33 == 33));
    c.appendChild(n5);
    n6.appendChild(document.createTextNode(33 === 33));
    c.appendChild(n6);
    n7.appendChild(document.createTextNode(33 != 33));
    c.appendChild(n7);
    n8.appendChild(document.createTextNode(33 !== 33));
    c.appendChild(n8);
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:run10.js
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2010 年 11 月 */


利用以下的 HTML 文件載入
<html>

<head>
<title>JavaScript Demo</title>
<script src="run10.js" type="text/javascript"></script>
</head>

<body>
<input id="b" type="button" value="RUN" onclick="run();">
<div id="content"></div>
</body>

</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:jsexample13.html
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2010 年 11 月 -->


瀏覽器 (broswer) 開啟後執行,如下



33 跟 "33" 雖是不同資料型態 (data type) ,內容其實是一樣的,因此運用連續兩個等號的相等運算子 == ,比較後的結果會得到 true ,但運算連續三個等號的嚴格相同運算子 === ,這時除了比較兩者的內容,也測試是否為相同的資料型態,所以會得到 false


以下程式示範比較運算子的使用
function run() {
    var c = document.getElementById("content");
    var n1 = document.createElement("p");
    var n2 = document.createElement("p");
    var n3 = document.createElement("p");
    var n4 = document.createElement("p");
    var n5 = document.createElement("p");
    var n6 = document.createElement("p");
    var n7 = document.createElement("p");
    var n8 = document.createElement("p");
    n1.appendChild(document.createTextNode(33 > "22"));
    c.appendChild(n1);
    n2.appendChild(document.createTextNode(33 >= "22"));
    c.appendChild(n2);
    n3.appendChild(document.createTextNode(33 < "22"));
    c.appendChild(n3);
    n4.appendChild(document.createTextNode(33 <= "22"));
    c.appendChild(n4);
    n5.appendChild(document.createTextNode(33 > 22));
    c.appendChild(n5);
    n6.appendChild(document.createTextNode(33 >= 22));
    c.appendChild(n6);
    n7.appendChild(document.createTextNode(33 < 22));
    c.appendChild(n7);
    n8.appendChild(document.createTextNode(33 <= 22));
    c.appendChild(n8);
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:run11.js
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2010 年 11 月 */


利用以下的 HTML 文件載入
<html>

<head>
<title>JavaScript Demo</title>
<script src="run11.js" type="text/javascript"></script>
</head>

<body>
<input id="b" type="button" value="RUN" onclick="run();">
<div id="content"></div>
</body>

</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:jsexample114.html
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2010 年 11 月 -->


瀏覽器開啟後執行,如下



中英文術語對照
相等性及關係運算子equality and relational operator
布林字面常數Boolean literal
瀏覽器broswer
資料型態data type






2 則留言:

提到...

最後面的答案是不是反過來丫...

Kaiching Chang 提到...

程式碼打錯,已修正
感謝指正~