当前位置：首页 > news >正文

WEBSTORM前端 —— 第4章：JavaScript —— 第3节：数据类型与类型转换

news 2025/8/15 8:57:21

一、数据类型

1-1.数据类型 – 数字类型（Number）

1-2.数据类型 – 字符串类型（string）

①注意事项

②字符串拼接

③模板字符串

1-3.数据类型–布尔类型（boolean）

1-4.数据类型–未定义类型（undefined）

1-5.数据类型–null（空类型）

二、检测数据类型

1.控制台输出语句

2.通过typeof关键字检测数据类型

三、类型转换

1.为什么需要类型转换

2.隐式转换

①规则

②缺点

③小技巧

3.显式转换

①概念

②转换为数字型

③转换为字符型

4.练习

四、实战演练——用户订单信息案例

1.需求

2.分析1

3.分析2

4.常见错误1

5.常见错误2

6.常见错误3

7.常见错误4

8.常见错误5

9.源代码

一、数据类型

JS 数据类型整体分为两大类：基本数据类型与 引用数据类型

1-1.数据类型 – 数字类型（Number）

即我们数学中学习到的数字，可以是整数、小数、正数、负数。 JavaScript 中的正数、负数、小数等统一称为数字类型。

注意事项：JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认。 Java是强数据类型例如 int a = 3 必须是整数。

数字可以有很多操作，比如，乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。

数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。

+：求和
-：求差
*：求积
/：求商
%：取模（取余数）

开发中经常作为某个数字是否被整除

<!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>
</head><body><script>// js 弱数据类型的语言 只有当我们赋值了，才知道是什么数据类型// let num = 'pink'// let num = 10.11// console.log(num)console.log(1 + 1)console.log(1 * 1)console.log(1 / 1)console.log(4 % 2) // 求余数console.log(5 % 3) // 求余数  2 console.log(3 % 5) // 求余数  3 // java 强数据类型的语言    int num = 10console.log('pink老师' - 2)console.log(NaN - 2)console.log(NaN + 2)console.log(NaN / 2)console.log(NaN === NaN)</script>
</body></html>

JavaScript算术运算符执行的优先级顺序：同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级。 JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行。

乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用 () 可以提升优先级

总结：先乘除后加减，有括号先算括号里面的~~~

案例：计算圆的面积

需求：对话框中输入圆的半径，算出圆的面积并显示到页面

分析：

①：面积的数学公式： π*r²

②：转换为JavaScript写法：变量 * r * r

<!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>
</head>
<body><script>// 1. 页面弹出输入框let r = prompt('请输入圆的半径：')// 2. 计算圆的面积（内部处理）let re = 3.14 * r * r// 3. 页面输出document.write(re)// NaN   not a number </script>
</body>
</html>

----------------------------------------------------------------------------------------------

NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果