纯干货!类型转换的前因后果

引言

当你在编写 JavaScript 代码时,类型转换可能是你会遇到的最令人费解的问题之一。它就像是一个变身魔法,将数据从一个形式转换为另一个形式,有时候甚至会让你感觉自己置身于一个奇幻世界。但是别担心!在这篇文章中,我将带你进入类型转换的神奇世界,准备好了吗?让我们开始这段神奇的冒险吧!

基本数据类型的转换

1.转布尔值

  • 数字类型转换为布尔类型 :非零参数转换为true,0转换为false
  • 字符类型转换为布尔类型 :非空字符串会转换为 true,空字符串转换为false
  • undefined 类型转换为布尔值 : undefined 会转换为 false
  • null 类型转换为布尔值 :null 会转换为 false

2.转数字

  • 字符串类型转换为数字 :如果字符串中仅仅包含数字,则将转换为数字,若包含非数字字符,则返回NaN
  • 布尔类型转换为数字:布尔值 true 会转换为数字 1,布尔值 false 会转换为数字 0。
  • undefined 类型转换为数字 : undefined 会转换为 NaN
  • null 类型转换为数字: null 会转换为数字 0。

3.转字符串

  • String()会将基本数据类型都转换为字符串,但会将object转换为"[object object]",会将数组转换为数组内元素加上逗号的拼接

4.转对象

要将基本数据类型转换为对象,就要调用显示的类型转换,Number(),String()等等都能分别将数字和字符串转化为对象类型

对象转换为基本数据类型

1.转字符串

  • {}.toString() 返回由"object" 和 class 和 "" 组成的字符串
  • \[\].toString() 返回由数组内部元素以逗号拼接的字符串
  • xx.toString() 直接返回字符串字面量

2.转布尔值

对象转布尔值都为true

ToPrimitive

其实在对象进行转换为字符串或者数字时,会在内部调用ToPrimitive(),这是js内部的方法,我们并不能使用

若我们要将对象转换为数字,那么ToPrimitive()会按照以下顺序执行:

ToPrimitive(obj,Number) ==>Number({})

1.如果obj是基本类型,直接返回

2.否则,调用 valueOf 方法 ,如果得到原始值,则返回

3.否则,调用toString 方法,如果得到原始值,则返回

4.否则,报错

如果要将对象转换为字符串类型,则按照以下操作:

ToPrimitive(obj,String) ==>String({})

1.如果obj是基本类型,直接返回

2.否则,调用 toString 方法 ,如果得到原始值,则返回

3.否则,调用 valueOf 方法,如果得到原始值,则返回

4.否则,报错

我们来看几个案例分析一下:

js 复制代码
console.log(Number({}))//NaN

这里我们要将对象转换为数字,则先调用valueof方法,

而valueof无法将对象转换为原始类型,

接下来,再调用toString方法,

将对象转换为"object object",再转换为数字,

但是字符串无法转换为基本数字,于是变成NaN。

js 复制代码
console.log(Number([]))//0

这里我们将数组转为数字,

首先调用valueof方法,但无法转换为基本数据类型,

再调用toString方法,

在上文提到,数组调用toString返回由数组内部元素以逗号拼接的字符串,在这里返回一个空字符串,

那么空字符串转为数字就是0.

结尾

本篇文章只是简单介绍了一下引用类型和基本数据类型的转换,为下一篇内容的讲解打打基础。在下一篇内容中,我们将来讲讲运算符的相关内容。

相关推荐
梦曦i4 分钟前
uni-router新推useUniEventChannel,彻底解决页面通信难题
前端·uni-app
柯克七七6 分钟前
给老项目加了 TypeScript,本来只想自己爽,结果全公司代码审查标准被我抬高了
前端·vue.js·typescript
张元清17 分钟前
React useObjectUrl Hook:预览文件与 Blob,不留内存泄漏(2026)
javascript·react.js
yuanlaile22 分钟前
前端转 Flutter 自学完整规划,避开跨栈思维转换误区
前端·flutter·flutter跨平台开发
CN_HW24 分钟前
Nginx 流量镜像配置文档-双轨国产化
服务器·前端·网络
姑苏倾城客25 分钟前
Flutter中,html 与 dart 桥接沟通
javascript·flutter·html
JNX_SEMI40 分钟前
ATR2652 GNSS双频LNA:0.75dB噪声系数与22dB高增益设计
前端·单片机·嵌入式硬件·物联网·硬件工程
拾年2751 小时前
Node.js 异步进化论:从 path 路径拼接到 fs 文件读取,我终于理解了回调地狱的救赎之路
前端·node.js
花颜yyds1 小时前
React Konva 开发基础速查手册
前端
小粉粉hhh1 小时前
Node.js(五)——编写接口
前端·javascript·node.js