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

发布于:2025-08-19 ⋅ 阅读:(18) ⋅ 点赞:(0)

目录

一、数据类型

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 必须是整数。

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

数学运算符也叫算术运算符,主要包括加、减、乘、除、取余(求模)。

  1. +:求和
  2. -:求差
  3. *:求积
  4. /:求商
  5. %:取模(取余数)
  • 开发中经常作为某个数字是否被整除
<!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 = 10

    console.log('pink老师' - 2)
    console.log(NaN - 2)
    console.log(NaN + 2)
    console.log(NaN / 2)
    console.log(NaN === NaN)
  </script>
</body>

</html>

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

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

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

案例:计算圆的面积

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

分析:

①:面积的数学公式: π*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 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果
NaN 是粘性的。任何对 NaN 的操作都会返回 NaN

1-2.数据类型 – 字符串类型(string)

通过单引号( '') 、双引号( "")或反引号( ` ) 包裹的数据都叫字符串,单引号和双引号没有本质上的区别,推荐使用单引号

注意事项

1.无论单引号或是双引号必须成对使用

2.单引号/双引号可以互相嵌套,但是不以自已嵌套自已(口诀:外双内单,或者外单内双)

3.必要时可以使用转义符\,输出单引号或双引号

字符串拼接

场景:+运算符可以实现字符串的拼接。
口诀:数字相加,字符相连

模板字符串

使用场景拼接字符串和变量 ;   在没有它之前,要拼接变量比较麻烦

语法``(反引号) ;   在英文输入模式下按键盘的tab键上方那个键(1左边那个键);   内容拼接变量时,用${}包住变量


网站公告

今日签到

点亮在社区的每一天
去签到