- HTML5權威指南
- (美)Adam Freeman
- 1566字
- 2020-01-10 15:29:18
5.5 使用JavaScript運算符
JavaScript定義了大量標準運算符。表5-2羅列了最常用的一些運算符。
表5-2 常用的JavaScript運算符

5.5.1 相等和等同運算符
相等和等同運算符需要特別說明一下。相等運算符會嘗試將操作數轉換為同一類型以便判斷是否相等。只要明白其工作方式,這就是一個很方便的特性。代碼清單5-19示范了相等運算符的用法。
代碼清單5-19 使用相等運算符
<! DOCTYPE HTML> <html> <head> <title>Example</title> </head> <body> <script type="text/javascript"> var firstVal = 5; var secondVal = "5"; if (firstVal == secondVal) { document.writeln("They are the same"); } else { document.writeln("They are NOT the same"); } </script> </body> </html>
這段腳本的輸出結果如下:
They are the same
此例中JavaScript先將兩個操作數轉換為同一類型再對其進行比較——從本質上講,相等運算符測試兩個值是否相等,不管其類型。如果想判斷值和類型是否都相同,那么應該使用的是等同運算符(===,由三個等號組成。相等運算符是由兩個等號組成),如代碼清單5-20所示。
代碼清單5-20 使用等同運算符
<! DOCTYPE HTML> <html> <head> <title>Example</title> </head> <body> <script type="text/javascript"> var firstVal = 5; var secondVal = "5"; if (firstVal === secondVal) { document.writeln("They are the same"); } else { document.writeln("They are NOT the same"); } </script> </body> </html>
此例中等同運算符判定兩個變量不一樣。這個運算符不會進行類型轉換,這段腳本的輸出結果如下所示:
They are NOT the same
提示
代碼清單5-19和代碼清單5-20使用了if條件語句。這個語句先對一個條件進行評估,要是結果為true,就執行代碼塊中的語句。if語句還可以加上一個else子句,子句所含代碼塊中的語句會在條件為false的情況下執行。
JavaScript基本類型(指字符串和數值等內置類型)的比較是值的比較,而JavaScript對象的比較則是引用的比較。代碼清單5-21展示了JavaScript處理對象的相等和等同測試的方式。
代碼清單5-21 對象的相等和等同測試
<! DOCTYPE HTML> <html> <head> <title>Example</title> </head> <body> <script type="text/javascript"> var myData1 = { name: "Adam", weather: "sunny", }; var myData2 = { name: "Adam", weather: "sunny", }; var myData3 = myData2; var test1 = myData1 == myData2; var test2 = myData2 == myData3; var test3 = myData1 === myData2; var test4 = myData2 === myData3; document.writeln("Test 1: " + test1 + " Test 2: " + test2); document.writeln("Test 3: " + test3 + " Test 4: " + test4); </script> </body> </html>
這段腳本的結果如下:
Test 1: false Test 2: true Test 3: false Test 4: true
代碼清單5-22對基本類型變量做了同樣的測試。
代碼清單5-22 基本類型的相等和等同測試
<! DOCTYPE HTML> <html> <head> <title>Example</title> </head> <body> <script type="text/javascript"> var myData1 = 5; var myData2 = "5"; var myData3 = myData2; var test1 = myData1 == myData2; var test2 = myData2 == myData3; var test3 = myData1 === myData2; var test4 = myData2 === myData3; document.writeln("Test 1: " + test1 + " Test 2: " + test2); document.writeln("Test 3: " + test3 + " Test 4: " + test4); </script> </body> </html>
其結果如下:
Test 1: true Test 2: true Test 3: false Test 4: true
5.5.2 顯式類型轉換
字符串連接運算符(+)比加法運算符(也是+)優先級更高。這可能會引起混亂,這是因為JavaScript在計算結果時會自動進行類型轉換,其結果未必跟預期一樣。代碼清單5-23即是一例。
代碼清單5-23 字符串連接運算符的優先權
<! DOCTYPE HTML> <html> <head> <title>Example</title> </head> <body> <script type="text/javascript"> var myData1 = 5 + 5; var myData2 = 5 + "5"; document.writeln("Result 1: " + myData1); document.writeln("Result 2: " + myData2); </script> </body> </html>
其結果如下:
Result 1: 10 Result 2: 55
第二個結果正是混亂所在。原想的可能是加法運算,而在運算符優先級別和過分熱心的類型轉換這兩個因素的共同作用下,結果卻被詮釋成了字符串連接運算。為了避免這種局面,可以對值的類型進行顯式轉換,以確保執行的是正確的運算。表5-3列出了一些最常用的類型轉換方法。
1.將數值轉換為字符串
如果想把多個數值類型變量作為字符串連接起來,可以用toString方法將數值轉換為字符串,如代碼清單5-24所示。
代碼清單5-24 使用Number.toString方法
<! DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myData1 =(5).toString() + String(5);
document.writeln("Result: " + myData1);
</script>
</body>
</html>
注意此例中先把數值放在括號中然后才調用toString方法。這是因為要想調用number類型定義的toString方法,必須先讓JavaScript將字面量轉換為一個number類型的值。例中還示范了與調用toString方法等效的另一種做法,即調用String函數并將要轉換的數值作為參數傳遞給它。這兩種做法的作用都是將number類型的值轉換為string類型,因此+這個運算符會被用來進行字符串連接而不是加法運算。這段腳本的輸出結果如下所示:
Result: 55
將數值轉換為字符串還有一些別的方法,它們可以對轉換方式施加更多控制。所有這些方法在表5-3中都有簡要說明,它們都是number類型定義的方法。
表5-3 數值到字符串的常用轉換方法

2.將字符串轉換為數值
與前述需求相反,有時需要把字符串轉換為數值,以便進行加法運算而不是字符串連接。這可以用Number函數辦到,如代碼清單5-25所示。
代碼清單5-25 將字符串轉換為數值
<! DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var firstVal = "5";
var secondVal = "5";
var result = Number(firstVal) + Number(secondVal);
document.writeln("Result: " + result);
</script>
</body>
</html>
其輸出結果如下:
Result: 10
Number函數解析字符串值的方式很嚴格,在這方面parseInt和parseFloat函數更為靈活,后面這兩個函數還會忽略數字字符后面的非數字字符。這三個函數的說明見表5-4。
表5-4 字符串到數值的常用轉換函數

- Android開發精要
- 造個小程序:與微信一起干件正經事兒
- Docker進階與實戰
- Raspberry Pi Networking Cookbook(Second Edition)
- Vue.js 2 and Bootstrap 4 Web Development
- MySQL數據庫管理與開發(慕課版)
- Learn React with TypeScript 3
- QGIS By Example
- 前端HTML+CSS修煉之道(視頻同步+直播)
- 微服務從小白到專家:Spring Cloud和Kubernetes實戰
- 平面設計經典案例教程:CorelDRAW X6
- Appcelerator Titanium:Patterns and Best Practices
- Python預測之美:數據分析與算法實戰(雙色)
- HTML5游戲開發實戰
- 和孩子一起學編程:用Scratch玩Minecraft我的世界