JavaScript的基本数据类型转换（显式类型转换&隐式类型）-CSDN博客

JavaScript的基本数据类型

在 ES6 之前，JavaScript 主要有六种基本数据类型和一种复杂数据类型：

简单数据类型（Primitive 原始数据类型） ：这些类型的值存储在栈内存中，并且以拷贝的方式赋值。
- number：表示整数或浮点数。
- string：表示文本字符串。
- boolean：表示逻辑值 true 或 false。
- null：表示空值或不存在的对象。
- undefined：表示未定义的变量或对象属性。
复杂数据类型（Reference 引用数据类型） ：这些类型的值存储在堆内存中，并且以引用的方式赋值。
- object：包括对象、数组、函数等。
- 数据类型转换可以分为：显示转换和隐式转换
  显示类型转换
  
  显式类型转换（Explicit Type Conversion）指的是开发者明确指定数据类型的转换，而不是依赖 JavaScript 自动进行隐式转换。显式类型转换有许多重要的好处，尤其是在大型项目或复杂逻辑中，它能帮助开发者编写更加可靠、可维护的代码。
  
  1.转换为数字型Number
  
  我们直接先上代码，看看其他五种基本数据类型转化为Number型的效果
```
console.log(Number());//默认值为0
console.log(Number(null));//0 null 在数值上下文中被转换为0
console.log(Number(true));//1 true 在数值上下文中被转换为1
console.log(Number(false));//0 false 在数值上下文中被转换为0
console.log(Number("123"));//123 字符串被转换为数字
console.log(Number("-123"));//-123 字符串被转换为数字
console.log(Number("0x11"));// 17 十六进制字符串被转换为数字
console.log(Number(""),Number(" "))//0 0
console.log(Number("123abc"));//NaN
console.log(Number(undefined));//NaN undefined 在数值上下文中没有转换成一个特定数字的含义
```
  前面6种的转换很好理解，那我们就从第七行开始分析一下吧
```
console.log(Number("0x11"));// 17 十六进制字符串被转换为数字
```
  在 JavaScript 中，Number() 函数会将一个值转换为数字。如果传入的是一个包含数字和其他字符的字符串，它会尽可能地解析这个字符串,在这里"0x11" 是一个以 0x 开头的十六进制数字表示法。所以转换的结果就为17
```
console.log(Number(""),Number(" "))//0 0
```
- Number("") :
  - 空字符串 "" 被转换为数字时，JavaScript 会将其视为 0。
  - 输出: 0
- Number(" ") :
  - 包含空格的字符串 " " 也会被转换为数字。空格字符会被视为空字符串，因此也会被转换为 0。
  - 输出: 0
```
console.log(Number(undefined));//NaN undefined 在数值上下文中没有转换成一个特定数字的含义
```
    NaN 的含义：
  - NaN 是一个表示“不是数字”的值。它是一个特殊的值，在数学计算或类型转换时，当结果无法定义为有效数字时使用。NaN 本身是一个数值类型，但它表示无效的数字。
  - 在 JavaScript 中，undefined 是一个特殊值，表示变量尚未赋值或对象属性不存在,所以在尝试将undefined转换为数字时无法获取其对应的数字就输出NaN。
```
console.log(Number("123abc"));// NaN
```
    按我们上面说的Number()函数会尽可能地解析这个字符串，虽然abc无法转换为数字，但是应该能将123转换为数字吧？那我们看结果，输出的是NaN,这是为什么呢？
    
    其实**Number()** 并不会忽略后面的非数字字符，而是会停止解析并将结果设置为 NaN（"Not-a-Number"）。
    
    那有没有什么方法让其输出的就为数字123呢？
```
console.log(parseInt("123abc")); // 123
console.log(parseFloat("123abc")); // 123
```

2.转换为字符型String

console.log(String());//默认值为""
console.log(String(undefined));//"undefined" undefined 在字符串上下文中被转换为"undefined"
console.log(String(null));//"null" null 在字符串上下文中被转换为"null"
console.log(String(NaN));//"NaN" NaN 在字符串上下文中被转换为"NaN"
console.log(String(1));//"1" 数字被转换为字符串
console.log(String(true));//"true" 布尔值被转换为字符串

3.转换为布尔型Boolean

console.log(Boolean());//默认值为false
console.log(Boolean(false));false
console.log(Boolean(true));true
console.log(Boolean(undefined));//false
console.log(Boolean(null));//false
console.log(Boolean(-0),'+0');//false
console.log(Boolean(+0),'-0'); //false
console.log(Boolean(NaN),'NaN');//false

哈哈，也许这些都很好理解，那我们在这里插入一个有趣的问题：你有没有发现在第六行和第七行有一个很有意思的东西+0和-0 虽然他们在转换为布尔值时都被转换为false但在其他情况下是区分正负的

console.log(1/+0)//Infinity 正无穷大
console.log(1/-0)//-Infinity 负无穷大

隐式类型转换

隐式类型转换发生在某些运算符或表达式中，JavaScript 自动将一个类型的值转换为另一个类型。

让我们再来结合代码看看吧

加法运算符 (+)
- 如果其中一个操作数是字符串，则另一个操作数也会被转换为字符串，然后进行字符串拼接。
- 如果两个操作数都是数字，则进行数值相加。
```
console.log("5" + 3); // 输出: "53"
console.log(5 + 3); // 输出: 8
```
  相等运算符 (==)
- 在使用 == 比较两个不同类型的值时，JavaScript 会尝试进行类型转换，这可能导致一些意外的结果。推荐使用严格相等运算符 (===) 来避免这种情况。
```
console.log("5" == 5); // 输出: true
console.log("5" === 5); // 输出: false
```
  总结
  
  JavaScript 的类型转换规则是其语言特性的重要组成部分。了解这些规则可以帮助我们编写更加健壮和可预测的代码。显式转换和隐式转换各有其的应用场景和优点
- 显式类型转换有助于提高代码的可读性、可维护性、类型安全性，并能避免隐式转换引发的错误或不一致行为。在复杂或大型应用程序中，显式转换能够减少难以追踪的 bug，并提高代码的清晰度和一致性。
- 隐式类型转换使得开发者不需要显式地调用转换函数（如 String()、Number() 等）。它能够自动处理不同类型的数据，这使得代码更加简洁、易读，减少了转换的样板代码。