JavaScript的基本数据类型转换（显式类型转换&隐式类型）<❤深度解析，干货满满❤>

狂炫一碗大米饭
655 阅读7分钟

前言

我们都知道js是一门弱类型weakly typed）语言，也称为动态类型（dynamically typed）语言。这意味着在 JavaScript 中，你不需要显式地声明变量的类型，这意味着变量的类型可以在运行时动态改变。那么这时候我们对JavaScript中的数据类型及其转换规则的理解就很重要了！话不多说，开搞----

JavaScript的基本数据类型

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

  • 简单数据类型（Primitive 原始数据类型） ：这些类型的值存储在栈内存中，并且以拷贝的方式赋值。

    • number：表示整数或浮点数。
    • string：表示文本字符串。
    • boolean：表示逻辑值 true 或 false。
    • null：表示空值或不存在的对象。
    • undefined：表示未定义的变量或对象属性。

  • 复杂数据类型（Reference 引用数据类型） ：这些类型的值存储在堆内存中，并且以引用的方式赋值。

    • object：包括对象、数组、函数等。

(在最新的es6中新加了一种数据类型，如果你还不知道到可以看我之前的这篇传送门)

今天我们只讨论number,string和boolean这三种简单数据类型的转换。

为什么需要数据类型转换？

在上面我们提到过，js是一门弱类型的语言，它的变量在运行时可以动态改变，所以这样提高了代码灵活性但也存在潜在的漏洞

console.log(0 == false);  // true，因为 JavaScript 将 0 转换为 false
console.log('5' + 5);     // '55'，字符串和数字拼接成字符串

或者我们在使用prompt获取过来的数据默认是String类型的，这时候就不能直接进行简单的数学加减法运算。 这时候，就需要数据类型转换上场了！

数据类型转换可以分为：显示转换和隐式转换

显示类型转换

显式类型转换（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

parseInt(),parseFloat() 只会从字符串的开头开始解析，直到遇到第一个无法解析为数字的字符，并且忽略其后的内容,其中parseInt转换取整parseFloat 保留小数。

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 负无穷大

就比如在上面中+0和-0的效果就不同

好那让我们回到正题继续看

隐式类型转换

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

image.png 让我们再来结合代码看看吧

  • 加法运算符 (+)

    • 如果其中一个操作数是字符串，则另一个操作数也会被转换为字符串，然后进行字符串拼接。
    • 如果两个操作数都是数字，则进行数值相加。
    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() 等）。它能够自动处理不同类型的数据，这使得代码更加简洁、易读，减少了转换的样板代码。

无论是显式还是隐式的类型转换，都应该谨慎处理，特别是在涉及到复杂逻辑或性能敏感的应用场景中。 以上就是对js的基本数据类型的转换，如果有什么问题欢迎在评论区进行讨论哦！

OIP.jpg

avatar
文章
阅读
粉丝