變量類型轉換 · JavaScript學習記錄

### 變量類型轉換 - 數據類型轉換 - 例子：計算兩個文本框的和 - 顯式類型轉換（強制類型轉換） - `parseInt()` 去除小數、`parseFloat() ` 保留小數：從左至右提取數字，遇到不是數字跳出 - `NaN ` 的意義和檢測：`Not a Number` - NaN： NaN 和任何值都不相等，包括它自己 - 使用 ` isNaN()` 檢測是否是全是數字 - ``` Number() 轉換數值，String() 轉換字符串，Boolean() 轉換布爾值 ``` - 隱式類型的轉換 - `== `：先轉換類型再比較對比 `=== `：全等于，不轉換類型直接比較 - ` - `：數字相減對比 ` +`：字符串連接、數字相加 - ```js 5 + null // 返回 5 因為 null 被轉換為 0 "5" + null // 返回 "5null" 因為 null 被轉換為 "null" "5" + 2 // 返回 52 因為 2 被轉換為 "2" "5" - 2 // 返回 3 因為 "5" 被轉換為 5 "5" * "2" // 返回 10 因為 "5" 和 "2" 被轉換為 5 和 2 ``` - 更多可用于將數值轉換為字符串的方法： | 方法 | 描述 | | :-------------- | :----------------------------------------------------- | | toExponential() | 返回字符串，對數字進行舍入，并使用指數計數法來寫。 | | toFixed() | 返回字符串，對數字進行舍入，并使用指定位數的小數來寫。 | | toPrecision() | 返回字符串，把數字寫為指定的長度。 | - 代碼： ```HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>變量類型轉換</title> <style></style> <script> window.onload = function () { // 封裝 getElementById 函數 function get(id) { return document.getElementById(id); } let t1 = get('t1'); let t2 = get('t2'); let b1 = get('b1'); let s1 = get('s1'); let s2 = get('s2'); b1.onclick = function (){ if (isNaN(t1.value)) { s1.innerHTML = '<br>' + t1.value + '不是數字'; } else if (isNaN(t2.value)) { s1.innerHTML = '<br>' + t2.value + '不是數字'; } else { console.log('t1:',typeof t1.value, 't2',typeof t2.value); let val = parseInt(t1.value) + parseInt(t2.value); let val2 = parseFloat(t1.value) + parseFloat(t2.value); s1.innerHTML = '<br>int結果：' + val+ '<br>float結果：' + val2; console.log(typeof val); // == 和 - 隱式轉換 let a = t1.value ; let b = t2.value; if (a == b) { s2.innerHTML = 'a == b' + '<br>a - b = ' + (a - b) + '<br>a + b = ' + (a + b); } else if (a === b) { s2.innerHTML = 'a === b！'; } else { s2.innerHTML = 'a不等于b！' + '<br>a - b = ' + (a - b) + '<br>a + b = ' + (a + b); } } } } </script> </head> <body> <input type="text" name="" id="t1"> <input type="text" name="" id="t2"> <input type="button" name="" id="b1" value="計算"> <div> <span id="s1"></span> </div> <div> <span id="s2"></span> </div> </body> </html> ```