### 变量类型转换
- 数据类型转换
- 例子:计算两个文本框的和
- 显式类型转换(强制类型转换)
- `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>
```
- 前言
- 初探 JavaScript 魅力
- JavsScript 是什么
- 第一个 JS 特效:鼠标提示框
- 网页换肤和 if 判断
- 函数传参
- 循环 while 和 for
- 导航栏选项卡
- JS 简易日历
- JavaScript 基础
- JavaScript 组成
- 变量类型
- 变量类型转换
- 变量的作用域和闭包
- 命名规范
- 运算符
- 程序流程控制
- JSON
- 深入 JavaScript
- 函数返回值
- 函数传参与行间样式
- 数组基础操作
- 定时器的使用
- 定时器的作用
- 数码时钟
- Date 对象其它方法
- 延时提示框
- 无缝滚动
- DOM基础应用
- DOM 基础
- DOM 节点
- 操作元素属性
- DOM 元素灵活查找
- DOM 操作应用
- 创建、插入和删除元素
- 文档碎片
- DOM操作应用高级
- 表格标签
- 表格应用
- 表单应用
- JS 运动基础
- 运动基础
- 运动框架及应用
- 缓冲运动
- 运动的停止条件
- JS 运动应用
- 多物体运动框架
- 任意值运动框架
- 仿 Flash 图片展示
- JS 运动中级
- 链式运动框架
- 完美运动框架
- 运动框架总结
- 运动框架应用
- JS事件基础
- Event 对象和事件
- 鼠标事件
- 键盘事件
- JS 事件中级
- 默认事件
- 拖拽
- JS 事件高级应用
- 事件绑定
- 高级拖拽
- 自定义滚动条
- Ajax 基础
- Ajax 是什么
- 使用 Ajax
- Ajax 原理
- Ajax 中级
- 编写 Ajax
- Ajax 数据
- JS 面对对象基础
- 面对对象是什么
- JS 中的面对对象
- 第一个面对对象的程序
- 工厂方式
- 原型:Prototype
- 面对对象编程方式
- JS 面对对象实例
- 面对对象的选项卡
- JS 面对对象高级
- Json 方式的面向对象
- 拖拽和继承
- 使用继承
- 系统对象
- BOM 应用
- BOM 基础
- 尺寸及坐标
- 常用方法和事件
- COOKIE 基础与应用
- 什么是 cookie
- 使用 cookie
- JS 中的正则表达式
- 正则表达式基础
- 字符串与正则配合
- 字符串
- 量词
- 常用正则例子
- JS Template 模板引擎
- 特性
- 语法
- 实例
- 表达式和运算符分类
- 主要表达式
- 左表达式
- 自增和自减
- 一元运算符
- 算术运算符
- 关系运算符
- 相等运算符
- 位移运算符
- 二进制位运算符
- 二元逻辑运算符
- 条件(三元)运算符
- 赋值运算符