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

【JavaScript】三、数据类型

article 2025/3/19 16:32:55

文章目录

1、数据类型
- 1.1 基本数据类型：数字型number
- 1.2 基本数据类型：字符串类型
- 1.3 基本数据类型：布尔类型
- 1.4 基本数据类型：未定义undefined
- 1.5 基本数据类型：空类型null
2、查看数据类型
- 2.1 从控制台看
- 2.2 typeof 运算符
3、类型转换
- 3.1 隐式转换
- 3.2 显式转换
4、案例
5、常见错误

1、数据类型

内存中，不同类型的数据，所占空间大小不同，为了充分高效利用存储空间，引入数据类型，JS数据类型有两大类：

在这里插入图片描述

1.1 基本数据类型：数字型number

可以是整数、小数、正数、负数，统称为数字类型

let age = 18
let price = 88.99

注意：

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

数字类型做算术运算时，顺序和其他语言一样：

console.log(1 + 2 * 3)		//7

console.log(10 - 8 / 2)		//6

// %取余，常用来判断某个数字是否能被整除
console.log(2 % 5 + 4 * 2)	//10

关于NaN：

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

console.log('老师' - 2)		//NaN

NaN 是粘性的，任何对 NaN 的操作都会返回 NaN

console.log(NaN + 2)		//NaN

1.2 基本数据类型：字符串类型

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

在这里插入图片描述

单引号/双引号可以互相嵌套，但是不以自已嵌套自已，外双内单和外单内双都可以

关于字符串的拼接，除了 + ，还可以使用模板字符串，语法：

外层用反引号``
变量用${}包住

let name = 'zhangsan'
let age = 18
// + 拼接
document.write('大家好，我叫' + name + '，今年' + age + '岁')
// 模板字符串写法
document.write(`大家好，我叫${name}，今年${age}岁`)

1.3 基本数据类型：布尔类型

固定值，true和false

let isCool = true
console.log(isCool)

1.4 基本数据类型：未定义undefined

未定义是比较特殊的类型，只有一个值 undefined
只声明变量，未赋值的情况下，变量的默认值为 undefined
一般不直接给某个变量赋一个undefined的值

let age
console.log(age)  //输出undefined

声明一个变量后，常通过检测这个变量是不是undefined，就判断用户是否有数据传递过来

1.5 基本数据类型：空类型null

JS中的 null 仅仅是一个代表无、空或值未知的特殊值

let obj = null
console.log(obj)	//null

null 和 undefined 区别：

undefined 表示没有赋值
null 表示赋值了，但是内容为空

计算上，二者也有区别：

console.log(undefined + 1)  // NaN
console.log(null + 1) 		// 1

总之，null 理解为尚未创建的对象，将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

2、查看数据类型

2.1 从控制台看

<body>

  <script>
    let age = 18
    let uname = 'zhangsan'
    let flag = false
    let param
    console.log(age)
    console.log(uname)
    console.log(flag)
    console.log(param)
  </script>
</body>

在这里插入图片描述

可以发现：数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色

2.2 typeof 运算符

使用typeof 运算符，有两种写法：

作为运算符： typeof x (常用的写法)
函数形式: typeof(x)

以上两种写法结果都一样，因此直接用运算符方式就行：

在这里插入图片描述

运行：

在这里插入图片描述

3、类型转换

JS是弱类型的，使用表单、prompt 获取过来的数据默认是字符串类型的，不能直接做算术运算，需要做类型转换

3.1 隐式转换

指系统内部自动将数据类型进行转换，规则：

+ 号两边只要有一个是字符串，都会把另外一个转成字符串
除了+以外的算术运算符比如 - * /，等都会把数据转成数字类型
+号作为正号解析可以转换成数字型
任何数据和字符串相加结果都是字符串

在这里插入图片描述

做个小练习：输入2个数，计算两者的和，打印到页面中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let num1 = prompt('input the first number')
    let num2 = prompt('input the second number')
    let result = Number(num1) + Number(num2)
    document.writeln(`the result is ${result}`)

  </script>
</body>

</html>

复杂了，直接用 + ，prompt方法获取到数据后，前面有个加号，直接转成数值型

在这里插入图片描述

3.2 显式转换

指自己写代码告诉系统该转成什么类型，转换成数字型可以通过：

Number(数据)：转成数字类型，如果字符串内容里有非数字，转换失败时结果为NaN(Not a Number)即不是一个数字
parseInt(数据) ：只保留整数
parseFloat(数据) ：可以保留小数

NaN也是number类型的数据，代表非数字

<body>
  <script>
    console.log(parseInt('12px'))        //12
    console.log(parseInt('12.34px'))     //12
    console.log(parseInt('12.99px'))     //12
    console.log(parseInt('abc12.99px'))  //NaN

    console.log(parseFloat('12px'))        //12
    console.log(parseFloat('12.34px'))     //12.34
    console.log(parseFloat('12.99px'))     //12.99
    console.log(parseFloat('abc12.99px'))  //NaN

  </script>
</body>

在这里插入图片描述

转换成字符型，可以通过：

String(数据)
变量.toString(进制)

4、案例

用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息

在这里插入图片描述

实现思路：先HTML+CSS画页面，再写JS变活，JS这块，document操作先不用，用document.write可以向html的body中输出标签以及模板字符串来实现：

<!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;
    }

    table {
      border-collapse: collapse;
      margin: 0 auto;
      height: 80px;
      text-align: center;
    }

    th {
      padding: 5px 30px;
    }

    table,
    th,
    td {
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <h2>订单确认</h2>

  <script>
    // 输入
    let price = +prompt('input product price:')
    let num = +prompt('input product nums:')
    let address = prompt('input your address:')
    // 计算
    let total = price * num
    // 页面打印渲染
    document.write(`
      <table>
        <tr>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>商品数量</th>
          <th>总价</th>
          <th>收货地址</th>
        </tr>
        <tr>
          <td>小米手机</td>
          <td>${price}元</td>
          <td>${num}</td>
          <td>${total}元</td>
          <td>${address}</td>
        </tr>
      </table>
    `)
  </script>
</body>

</html>