原来JS中的数据类型是这样转换的!

JavaScript 之所以会发生类型转换,是因为它是弱类型的语言。这使得JS中的变量数据不是固定的,会根据上下文自行发生改变。这种灵活性让开发人员能够更加快速地编写代码,但也带来了潜在的复杂性和意外。

类型概览

在ES5时期,JavaScript有5种原始数据类型(NumberStringBooleanNullUndefined )和1种引用数据类型(Object)。原始数据类型是拷贝式赋值,存储的是值本身;引用式数据类型是引用式赋值,存储的是指向值的指针。

基本数据类型之间的显示类型转换之Boolean

JS 的简单数据类型都有构造函数类型,在发生类型转换的时候会当成构造函数来用。Boolean() 是将任何类型的值转化成布尔类型(只有 turefalse )的方法.如果没有传递任何参数或者传递特定"假值"(falsy values),它会返回 false ;剩下的都会返回 true。来看些例子:

JavaScript 复制代码
console.log(Boolean())// 默认值为false
console.log(Boolean(false))
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 非数字
console.log(Boolean(""),'""')// false

以上的输出结果都为 false,不知道你有没有看迷糊。 我们来详细解析下:

  1. 第一个是没有提供任何参数,默认返回 false
  2. 第二个则是直接将假值 false 直接传递给 Boolean,当然是返回 false
  3. 第三个中 undefined 是一种特殊值,表示变量未定义。在布尔上下文中,它是假值。
  4. 第四个中 null表示空值或不存在的对象,在布尔上下文中也被视为假值。
  5. 第五和第六中的 +0-0分别表示从正方向无限趋近于0和负方向无限趋近于0。在某些情况下会有所不同,但在这都表示假值。
  6. 第七个中 NaN 的意思是 "这不是一个数字"(Not-a-Number),是JavaScript中的特殊值。尽管它的类型是 Number,但在布尔中仍被视为假值。
  7. 第八个传入空字符串,在布尔上下文中被视为假值。而非空字符串则是真值。
Boolean()的转换小结

对于那些传入 falseundefinednull+0-0NaN 和空字符串 ""以及不传入参数的特殊情况,一律返回 false,剩下的都是返回 true

基本数据类型之间的显示类型转换之Number

Number()和Boolean()类似,只不过Number()是将任何类型的值转换成数字。来看代码:

JavaScript 复制代码
console.log(Number())// 0
console.log(Number(undefined))// NaN 未定义 无法转换 undefined 在数值上下文中没有转换成一个特定数字的含义
console.log(Number(null))// 0 定义了 为空
console.log(Number(false))// 0 在数值上下文中,false 被转换为0
console.log(Number(true))// 1
console.log(Number('123')) // 123
console.log(Number('-123'))// -123

以上代码的输出结果中比较特别的一点是,为什么传入undefined的返回值会是NaN? 这是因为undefined 表示一个未赋值的状态,在数值上下文中没有明确的意义,所以Number(undefined) 返回 NaN(Not-a-Number)。

除此之外,还有一些比较特别的存在:

JavaScript 复制代码
console.log(Number('0x11'))// 17
console.log(Number(''),Number(""))// 0 0
console.log(Number('100a'))// 100
  1. 传入的字符串以0x开头时,JS会将其视为十六进制数值并进行转化计算。
  2. 当传入空字符串时,不管是''"",JS都会认为空字符串没有数值意义,默认转化成0。
  3. 传入像100a这种特别的字符串时,Number()会开始解析直到遇到第一个无法识别为数字的字符为止。但如果像a100这种,它就会直接返回NaN
Number()的转换小结
  • 未定义 (undefined) :转换为 NaN,因为 undefined 在数值上下文中没有意义。
  • 空值 (null) :转换为 0,表示"空"或"不存在"。
  • 布尔值false 转换为 0true 转换为 1
  • 字符串 :如果字符串可以被解析为合法的数值,则转换为相应的数值;否则,转换为 NaN。以 '0x''0X' 开头,则按照十六进制规则进行转换。而空字符串被转换为 0
  • 混合合法与非法字符的字符串Number() 会尽可能多地解析合法的数字部分,一旦遇到非法字符即停止解析。如果开头就有非法字符,则返回 NaN
基本数据类型间的显示类型转换之String

String()是将任意类型的值转换成字符串。话不多说,来看代码:

JavaScript 复制代码
console.log(String())
console.log(String(undefined),typeof String(undefined)) //"undefined" "string"
console.log(String(null),typeof String(null)) //"null" "string"
console.log(String(+0),String(-0))//"0" "-0"
console.log(String(NaN)) //"NaN"
console.log(String(1)) //"1"

以上代码中比较特别的存在就是 0-0。在大多数情况下会被认为是同一个数,但在JS中被String()转换时,会分别返回0-0。这是因为在IEEE 754 浮点数标准,该标准明确规定了正零 (+0) 和负零 (-0) 的存在。

String()的转换小结
  • 无参数 :返回空字符串 ""
  • undefined :转换为字符串 "undefined"
  • null :转换为字符串 "null"
  • 特殊数值 (+0, -0, NaN) :根据具体情况转换为相应的字符串表示。
  • 普通数值:直接转换为对应的字符串表示。

通过以上对 Boolean()Number()String()的类型转换进行简单介绍,想必对简单数据类型的类型转换有了一定了解。了解和掌握数据类型的转换,可以帮助我们更精确地控制他们的 JavaScript 程序,并写出更加健壮且易于维护的代码。

菜鸟创作不易,还望善良的大佬多点点赞。

相关推荐
疯狂的沙粒26 分钟前
前端开发【插件】moment 基本使用详解【日期】
开发语言·javascript·css
小彭努力中1 小时前
58.在 Vue 3 中使用 OpenLayers 绘制点、线、圆、多边形
前端·javascript·vue.js·arcgis·ecmascript·openlayers
失眠的咕噜1 小时前
el-table 使用el-form 表单验证
前端·javascript·vue.js
可爱的秋秋啊1 小时前
vue3中el-table实现多表头并表格合并行或列
javascript·vue.js·elementui
HsuYang1 小时前
Vite源码学习(三)——Vite内置插件
前端·javascript·架构
安girl1 小时前
运行vue项目,显示“npm”无法识别为 cmdlet、函数、脚本文件或可操作程序的名称
前端·javascript·vue.js
置酒天晴2 小时前
js -音频变音(听不出说话的人是谁)
开发语言·javascript·音视频
WebDesign_Mu2 小时前
HTML+CSS+JS制作高仿小米官网网站(内附源码,含6个页面)
javascript·css·html
浪遏3 小时前
Langchain.js | StructedOutputParser | 疯狂输出(二)
前端·javascript·aigc
网络安全-老纪3 小时前
【网络安全】PostMessage:分析JS实现XSS
javascript·web安全·xss