变量类型转换 · 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> ```