JavaScript——数据类型、类型转换
数据类型
计算机世界中的万事万物都是数据。
计算机程序可以处理大量的数据，为什么要给数据分类?
- 更加充分和高效的利用内存
- 也更加方便程序员的使用数据
基本数据类型
number 数字型
- JavaScript中正数、负数、小数等统一称为number
- JS是弱数据类型，变量到底属于哪种类型，只有赋值之后，才能确定
- Java是强数据类型，例如： int a = 3，必须是整数
- 可以进行+、-、*、/、%的运算
- *、/、%的优先级相同
NaN
代表一个计算错误。它是一个不正确的或者一个未定义的数字操作所得到的结果
console.log("good" - 2) //输出：NaNNaN是粘性的。任何对NaN的操作都会返回NaN
console.log(NaN+2) // 输出：NaN甚至两个NaN都不相等
console.log(NaN === NaN) // 输出：falsestring 字符串型
通过单引号(")、双引号（"")或反引号(`)包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。
string 字符串型
通过单引号(")、双引号（"")或反引号(`)包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。
模板字符串
使用场景
- 拼接字符串和变量
- 在没有它之前，要拼接变量比较麻烦
语法
- ··（反引号）
- 内容拼接变量时，用${}包住变量
boolean 布尔型
只有两个值：true和false
undefined 未定义型
未定义是比较特殊的类型，只有一个值undefined。
什么情况出现未定义类型?
只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少【直接】为某个变量赋值为undefined。
let num
console.log(num)开发场景
我们开发中经常声明一个变量，等待传送过来的数据。
如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。
null 空类型
let obj = nullconfirm.log(obj)引用数字类型
object 对象
检测数据类型
通过typeof关键字检测数据类型
typeof运算符可以返回被检测的数据类型。它支持两种语法形式:
1.作为运算符: typeof x（常用的写法)
2.函数形式: typeof(x)
换言之，有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法。
let obj = null
console.log(typeof obj) // object
// 这是一个比较特殊的结果类型转换
隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
规则:
- ＋号两边只要有一个是字符串，都会把另外一个转成字符串
- 除了+以外的算术运算符，比如–、*、/等都会把数据转成数字类型
缺点:
- 转换类型不明确，靠经验才能总结
小技巧:
- +号作为正号解析可以转换成数字型
- 任何数据和字符串相加结果都是字符串
console.log(2 + '2') // 22 stringconsole.log(2 - '2') // 0 numberconsole.log(+ '2') // 把字符串类型转化为了数字型console.log(typeof + '2') // 类型为数字型显示转换
- Number()
- 把对象的值转换为数字，如果无法转换为数字，那么Number()函数返回NaN
- parseInt()
- 分析一个字符串，并且返回一个整数
- parseFloat
- 分析一个字符串，并且返回一个浮点数
console.log(Number(str))// 1 显示转化// let age = Number(prompt('请输入你的年龄')) // 转化为数字型// 2 隐式转换let age = + prompt('请输入你的年龄')console.log(typeof age)console.log(parseInt('12ps')) // 只能取数字开头的字符串中的整数 12console.log(parseInt('13.12ps')) // 只能取数字开头的字符串中的整数 13console.log(parseInt('asd123dfa')) // 结果为NaN//................. console.log(parseFloat('12ps')) // 12console.log(parseFloat('13.12ps')) // 13.12console.log(parseFloat('asd123dfa')) // 结果为NaN操作实例
let num1 = +prompt('请输入第一个数字:')let num2 = +prompt('请输入第二个数字:')alert(`两个数之和为:${num1 + num2}`)综合案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h2 {text-align: center;/*给字体为h2的设为中心对齐*/}table {/*合并边框*/border-collapse: collapse;/* 设置每个表格的高度为80px */height: 80px;/* 设置表格中的数据都居中对齐 */text-align: center;/* 让块元素水平剧中 */margin: 0 auto;}th {/* 设置表头单元格的左右边宽距 */padding: 5px 30px;/* padding: 10px 5px 15px 20px;上填充是 10px 右填充是 5px 下填充是 15px 左填充是 20px 顺时针的 padding: 10px 5px 15px;上填充是 10px 右填充和左填充是 5px 下填充是 15px padding: 10px 5px;上填充和下填充是 10px 右填充和左填充是 5px padding: 10px;所有四个填充都是 10px */}table,th,td {border: 1px solid #000/*solid定义实现边框*/}</style>
</head><body><h2>订单付款确认</h2><!-- 下面这个表达式的快捷键为:table>tr>th*5 --><!--tr table row 表示表格的一行td table data 表示表格的数据单元格th table header 表示表格的表头单元格--><script>// 1 用户输入let price = +prompt('请输入商品价格：')let num = +prompt('请输入商品数量：')let address = prompt('请输入收货地址：')// 2 计算总额let total = price * num// 3 页面打印document.write(`<table><tr><th>商品名称</th><th>商品价格</th><th>商品数量</th><th>总价</th><th>收货地址</th></tr><tr><td>HUAWEI Mate 60 Pro</td><td>${price}元</td><td>${num}</td><td>${total}元</td><td>${address}</td></tr></table>`)</script>
</body></html>