JavaScript 基本数据类型的详解

青旅半醒 2024-05-06 21:24 74阅读 0赞

## JavaScript的基本数据类型 ##

![在这里插入图片描述][5f4055ed728944febf05877af7e3b167.jpeg]

以下都是JS内置的几种类型

<table> 
 <thead> 
  <tr> 
   <th align="center">数据类型</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">number</td> 
   <td align="center">数字，不区分整数和小数</td> 
  </tr> 
  <tr> 
   <td align="center">string</td> 
   <td align="center">字符串类型</td> 
  </tr> 
  <tr> 
   <td align="center">boolean</td> 
   <td align="center">true 真, false 假</td> 
  </tr> 
  <tr> 
   <td align="center">undefined</td> 
   <td align="center">表示未定义的值</td> 
  </tr> 
  <tr> 
   <td align="center">null</td> 
   <td align="center">只有唯一的值 null，表示空值</td> 
  </tr> 
 </tbody> 
</table>

### number 数字类型 ###

JavaScript 中不区分整数和浮点数，统一都使用 “数字类型” 来表示

**示例代码**

**运行结果**  
![image-20240301130811602][]

> 特殊的数字值：  
> `Infinity`：无穷大, 大于任何数字，表示数字已经超过了 JS 能表示的范围.  
> `-Infinity`: 负无穷大, 小于任何数字，表示数字已经超过了 JS 能表示的范围.  
> `NaN`: 表示当前的结果不是一个数字

**1.`Infinity`的示例代码**

**运行结果**

![在这里插入图片描述][96fda24bd7914bf4b1f949011bb4ec43.png]

**2.`-Infinity`的示例代码**

**运行结果**

![image-20240301132055825][]

**3.`NaN`的示例代码**

**运行结果**

![image-20240301132302455][]

### string 字符串类型 ###

注：字符串字面值需要使用引号引起来，单引号双引号均可

示例

**字符串中本身已经包含引号的情况**

1.正确搭配使用单双引号

示例1：

示例2：

2.使用转义字符 \\ " 来表示字符串内部的引号

示例：

运行效果

![image-20240301134848784][]

一些其它的转义字符，比如：`\t` => t ，`\n` => n ，`\\` => \\

**字符串求长度**

> 使用 String 的 length 属性即可

示例代码

运行效果  
![在这里插入图片描述][e0b71e9eb4de4995aef1ab504f20dd2f.png]

**字符串拼接**

> 使用 `+` 进行拼接

示例代码

运行结果  
![image-20240301142841509][]

> 数字和字符串也可以进行拼接

示例

运行结果

![image-20240301143156988][]

### boolean 布尔类型 ###

表示 “真” 和 “假”，当Boolean参与运算时会被做 1 和 0 来看待，和 C 语言一样

**示例1**

运行结果

![image-20240301144012392][]

**示例2**

运行结果  
![在这里插入图片描述][7c16c5e37e0c4157bc36e02919290622.png]

### undefined 未定义数据类型 ###

1.如果一个变量被定义了，但是没有被赋值，也就是没有被初始化过, 此时这个变量就是 undefined, 是 undefined 类型的

示例代码

运行结果

![image-20240301152223643][]

2.`undefined`和字符串进行相加, 结果是进行字符串拼接

示例代码

运行结果

![image-20240301152603771][]

3.`undefined`和数字进行相加，结果为`NaN`

示例代码

运行结果

![image-20240301153245029][]

### null 空值类型 ###

null 表示当前的变量是一个 “空值”

> 注: null 和 undefined 都表示取值非法的情况, 但是侧重点不同  
> undefined 表示当前的变量未定义，而 null 是被定义/被赋值了的，只不过它的值就是 null

示例代码

运行结果  
![image-20240301154109382][]

[5f4055ed728944febf05877af7e3b167.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/0c9f0fc3dd894af18518c8ae87c9ce82.jpeg
[image-20240301130811602]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/5dfd97db88b4441888d4b7c0e67370a1.png
[96fda24bd7914bf4b1f949011bb4ec43.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/516104ed635844d9a9ec4477029f442f.png
[image-20240301132055825]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/448353570cc0441c8d2f978b0a0ae69d.png
[image-20240301132302455]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/ca8b81a0a4f34f2da3313363dc4560ea.png
[image-20240301134848784]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/8dd5d1161cdf47e6945a22cb85a162f3.png
[e0b71e9eb4de4995aef1ab504f20dd2f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/6444911fe3b144c88bbb6d6606852d48.png
[image-20240301142841509]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/60a8340b23c94d0d9875750fbd677c37.png
[image-20240301143156988]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/ee7d2312f736475a964e68c635155c3b.png
[image-20240301144012392]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/6329de993c6d433abd339228e126ffb6.png
[7c16c5e37e0c4157bc36e02919290622.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/c5557924dd2e4982a7588f79a4d21946.png
[image-20240301152223643]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/d33329adfe9847068534e5942336728b.png
[image-20240301152603771]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/02eb4933cf7d495a85f6266c266c61ca.png
[image-20240301153245029]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/c614f8d2d9f44e05bda145e49caff9ca.png
[image-20240301154109382]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/3f8bd6386fcf4e47b9d3f16ac27002ef.png