数据类型

JavaScript 中的数据被区分成各种各样的类型,如此一来能对不同类型的数据进行不同的操作。

比如对于数字的数据,我们希望能对其进行加减乘除,因此有便有了数字类型。对于字符串的数据,我们希望能对其进行拼接,或查询是否包含某个字符的操作,因此便有了字符串类型。

$$tip

一个变量的类型由它所赋值的数据确定。

$$

$$edit$$
$$jsdemo$$
let n = 3 // n 是数字类型
alert(n + 2) // 加法运算
$$edit$$
$$jsdemo$$
let name = "三眼鸭" // name 是字符串类型
alert(name + "的编程教室") // 拼接字符串

动态类型

JavaScript 是一门动态类型(dynamically typed)的编程语言,这意味着变量的类型可以运行时被改变。与之相对的是静态类型的编程语言,即变量的类型是开始就定义好的,不能在运行时改变。

$$tip

常见的动态类型语言有:

  • JavaScript
  • Python
  • PHP

常见的静态类型语言有:

  • Java
  • C#
  • C++
  • Golang

$$

$$edit$$
$$jsdemo$$
let x
x = 123 // x 此时是数字类型
// 提示:typeof 返回右操作数的类型
alert(typeof x) // number
x = "三眼鸭" // x 此时是字符串类型
alert(typeof x) // string

$$tip

typeof 运算符能返回右操作数的类型。

$$

常用类型

Number 类型

number 类型包括了整数与浮点数(小数)。

$$tip

在很多语言中会区分整数和浮点数,JavaScript 是为数不多将其归为一类的语言。

$$

对于数字类型可以进行很多数学上的操作,比如加减乘除等等。

$$edit$$
$$jsdemo$$
let x = 3
alert(x + 2) // 5
alert(x - 2) // 1
alert(x * 2) // 6
alert(x / 2) // 1.5

除了常规的数字, number 类型还包括了关键字定义的特殊数值,比如:

  • Infinity:正无穷大
  • -Infinity:负无穷大
  • NaN:无效数。
$$edit$$
$$jsdemo$$
alert(1 / 0) // Infinity
alert(1 / Infinity) // 0
alert(-1 / 0) // -Infinity
alert("三眼鸭" / 4) // NaN

BigInt 类型

JavaScript 无法表达或有效运算大于 (2<sup>53</sup>-1)( 9007199254740991),或小于 -(2<sup>53</sup>-1) 的整数。

当涉及到大整数的运算时就会有些力不从心,比如加密货币相关。因此便有了 BigInt 类型,在整数后面加一个 n 表示这是一个 BigInt 类型。

$$edit$$
$$jsdemo$$
let n = 9999999999999999999999n // 尾数加 n 表示是 BigInt 类型
alert(typeof n)

大整数的运算。

$$jsdemo$$
$$edit$$
// 数字类型无法有效处理大整数的运算
alert(9999999999999999999999 + 2) // 1e+22

// 大整数类型,能正确运算
alert(9999999999999999999999n + 2n) // 10000000000000000000001

大整数只能与大整数进行运算,否则会出错。

$$jsdemo$$
$$edit$$
9999999999999999999999n + 2 // Cannot mix BigInt and other types, use explicit conversions

String 类型

当存在单引号、双引号或反引号内的数据则被当作字符串类型。

$$edit$$
$$jsdemo$$
let str = '三眼鸭'
let str2 = "三眼鸭"
let str3 = `三眼鸭`
let str4 = '' // 空字符串
let str5 = '123' // 内容虽然是数字,但在引号内仍是字符串类型
alert(typeof str4)
alert(typeof str5)

反引号可以搭配 ${ ... } 将变量或表达式嵌入字符串。

let name = "三眼鸭"
alert(`${name}的编程教室`)
alert(`1 + 2 = ${1 + 2}`)

当字符串内有双引号时,包括符号可以用单引号,反之亦然。

$$edit$$
$$jsdemo$$
let name = '"三眼鸭"的编程教室'
alert(name)
name = "'三眼鸭'的编程教室"
alert(name)

或者可以用转义字符处理。

转义字符

转义字符可以让我们在字符串中表示一些特殊字符,常用转义字符有以下:

代码 描述
\' 单引号
\" 双引号
\\ 反斜杠
\n 换行
\r 回车
\t tab(制表符)
\b 退格符
\f 换页符

Boolean 类型

boolean 类型仅有两个值:

  • true:真
  • false:假

boolean 类型常用来表示条件是真还是假,比较运算符返回的结果就是 boolean 类型。

$$edit$$
$$jsdemo$$
alert(4 > 2) // true
alert(10 < 2) // false

undefined

undefined 是一个值,也是一个类型,表示变量被声明未赋值。

以下情况会存在 undefined

  • 声明变量未赋值
  • 函数没设置返回值
  • 引用未赋值的对象属性
  • 使用未提供的函数参数
$$edit$$
$$jsdemo$$
let x
alert(x)

null

null 同样是一个值,也是一个类型,通常用来表示一个变量为空。

使用 null 的情况通常是主观上的,比如获取一个人的资料,当此人不存在时返回的结果应为 null

$$edit$$
$$jsdemo$$
let x = null
alert(x)

image

$$tip

很多人会纠结于 nullundefined 之间的区别,但这只是历史遗留的设计问题,不必过分在意,绝大多数语言只有一个类似 null 的表示空的值,唯独 JavaScript 存在两个。

提供参考:undefined 与 null的区别

$$


总结

JavaScript 中的类型分为原始类型与对象类型两大类。

原始类型:

  • String:字符串类型,保存文本的字符序列,例如: "三眼鸭的编程教室"
  • Number:数字类型,整数或浮点数,例如: 42或者 3.14159
  • BigInt:大整数类型。
  • Boolean:布尔类型,只有两个值 truefalse
  • undefined:未定义类型,变量未赋值时的值。
  • null:空值类型,与 undefined 类似。
  • Symbol:标识符类型,实例是唯一且不可更改的类型。

对象(引用)类型:

能存储多个值作为属性,包括并不限于 objectfunctionarrary 等等。

$$tip

本篇文章仅是概述了几个常用的类型与一些基本的操作,方便之后学习。有关数据类型的深入学习将会在后续的章节进行。

$$


练习

  1. 使用合适的变量命名与类型存储以下关于你的数据:
  • 名字
  • 身高
  • 是否学生
  • 宠物的名字

$$answer

<script>
    let name = "鸣人"
    let height = 1.8
    let isStudent = false
    let petName = "九尾"
</script>

$$

  1. 实现以下的 alert 显示效果,注:不需要实现按钮。 $$demo <button onclick="show()">显示学生名录</button> <script> function show() { alert("学生名录:\n1.鸣人\n2.佐助\n3.小樱") } </script> $$

$$answer

$$jsdemo$$
$$edit$$
<script>
    alert("学生名录:\n1.鸣人\n2.佐助\n3.小樱")
</script>

$$