数据类型转换方式
学过之前的内容，我们知道 JS 是弱数据类型 ，赋值之前我们并不知道变量属于哪种数据类型，只有赋值之后才能知道。
很多情况下，获取过来的数据默认是字符串，但在后续操作中，有些地方需要进行加减运算，例如，之前使用 prompt 让用户输入自己的年龄，如果想要计算出十年之后该用户多大了，此时直接进行加法运算不会得到预期结果：
<body>
<script>
let age = prompt("请输入年龄：")
let tenYears = age + 10
console.log(tenYears)
</script>
</body>
上例中，我们的期望结果是 28 ，但显然没有达到预期，这是因为 prompt 输入的数值默认是字符串型的，浏览器在渲染时，将其当作字符串处理了，此时需要转换变量的数据类型，即把输入的字符串类型转换成数字型
变量的 数据类型转换 就是把获取到的数据转换成我们需要的数据类型
数据类型转换有两种方式：隐式转换、显式转换
1. 隐式转换
上例中的年龄在进行加法运算时，系统内部自动将数据类型进行了转换，这种转换就称为 隐式转换 ，它的转换类型不明确，需要靠经验才能总结出来。
隐式转换的规则：
- + 两边只要有一个数据类型是字符串，那么另一个也会被转成 字符串类型 ，如上例中的年龄运算
- 除了 + 运算符之外的其它算数运算符都会把数据类型转换成 数字类型 ，如 - 、* 、/ 等
<body>
<script>
console.log(3 + 5)
console.log('3' + 5)
console.log(5 - 3)
console.log(5 - '3')
console.log(3 * 5)
console.log(5 * '3')
</script>
</body>
+ 作为 正号 解析时可以将数据转换成 数值型
<body>
<script>
let age = prompt('请输入年龄：')
let tenYears = +age + 10
console.log(tenYears)
</script>
</body>
2. 显式转换
为了避免隐式转换带来的问题，通常根据需要对数据进行 显式转换 ，即自己在代码里设定需要的数据类型
（1）转换为数字型
Number 将数据转换成 数字类型 ，如果待转换的内容里有非数字类型，转换结果为 NaN ，意为 Not a Number 不是一个数字，它也是 number 类型的数据，表示 非数字
<body>
<script>
let age = prompt("请输入年龄：")
let tenYears = Number(age) + 10
console.log(tenYears)
</script>
</body>
<body>
<script>
let name = '123ab'
console.log(Number(name))
</script>
</body>
parseInt() 只保留整数，没有四舍五入
<body>
<script>
console.log(parseInt('12.23'))
console.log(parseInt('10.91'))
console.log(parseInt('3.2a'))
console.log(parseInt('34a.9'))
console.log(parseInt('sa34.9'))
console.log(parseInt('34.a9'))
</script>
</body>
parseFloat() 可以保留小数，经常用于过滤单位
<body>
<script>
console.log(parseFloat('12.23px'))
console.log(parseFloat('3.2apx'))
console.log(parseFloat('34a.9'))
console.log(parseFloat('sa34.9'))
console.log(parseFloat('34.a9'))
</script>
</body>
（2）转为字符型
String() 将数据转为 字符型
<body>
<script>
console.log(String(123))
console.log(typeof String(123))
</script>
</body>
toString()
<body>
<script>
let a = 1234
console.log(a.toString())
console.log(typeof a.toString())
</script>
</body>
实例：打印学生成绩表
学生输入姓名、数学、英语成绩，后台计算出总分，可以在页面自动打印成绩表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
margin: 0 auto;
width: 800px;
}
table {
text-align: center;
border: 1px solid rgb(187, 52, 52);
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
width: 100px;
height: 45px;
}
</style>
</head>
<body>
<script>
let sName = prompt('请输入学生姓名：')
let sMath = prompt('请输入数学成绩：')
let sEnglish = prompt('请输入英语成绩：')
let total
total = parseFloat(sMath) + parseFloat(sEnglish) + "分"
document.write(
`
<div>
<table>
<caption>
<h2>学生成绩表</h2>
</caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>数学</th>
<th>英语</th>
<th>总分数</th>
</tr>
<tr>
<td>1001</td>
<td>${sName}</td>
<td>${sMath}</td>
<td>${sEnglish}</td>
<td>${total}</td>
</tr>
</table>
</div>
`
)
</script>
</body>
</html>
