一文搞懂JS类型转换!!!

一文搞懂JS类型转换!!!

javascript数据类型分为基本类型和引用类型,**基本类型(原始类型)**包括string,number,boolean,null,undefined,symbol,bigint

引用类型 包括Object(Array,Function,Date,RegExp等)

==和===的区别

js 复制代码
console.log(1 == '1'); // true
console.log(1 === '1'); // false
  • ==会发生隐式类型转换,只判断值是否相等。
  • ===不会发生隐式类型转换,值和类型都要相等才为true。

==转换规则

  • null == undefined // true
  • null 和 undefined 与其他值比较时不转换为数字
  • NaN 与任何值比较都是 false(包括 NaN 本身)
  • 对象与原始值比较 → ToPrimitive 后再比较
js 复制代码
[] == 0          // true  ([] → "" → 0)
[] == false      // true  ([] → "" → 0, false → 0)
[1] == 1         // true  ([1] → "1" → 1)
NaN == NaN       // false
NaN !== NaN      // true
isNaN('foo')     // true  (因为 'foo' → NaN)
Number.isNaN('foo') // false (不会隐式转换)
{} == 0   //false   // ({} → "[object Object]" → NaN) NaN == 0 false

类型转换两大方式

显式类型转换

显式调用一些方法/函数手动将一个值转换为另一种类型

  • 转字符串:String(value),value.toString() (null/undefined调用会报错),JSON.stringify(value)
  • 转数字:Number(value),parseInt(value)/parseFloat(value)(只对字符串有用,遇到非数字字符停止解析)
  • 转布尔值:Boolean(value),!!value
js 复制代码
console.log(String(456)); // '456'
console.log(Number('123')); // 123
console.log(Number(undefined)); // NaN
console.log(Boolean(0)); // false
console.log(parseInt('')) //NaN 只能解析数字字符串
console.log(parseInt(null)) //NaN

隐式类型转换

由运算符或上下文自动触发,不需要你手动调用。

  • 字符串拼接:'a' + 1 // 'a1'
  • 算术运算:'5' - 2 // 3 (* / % 同理将字符串转换为数字)
  • 比较运算:== 会进行类型转换,=== 不会
  • 条件判断:if (value) 会将 value 转为布尔值
  • 对象参与运算时调用 ToPrimitive(valueOf → toString)

基本类型和引用类型转换

1、基本类型转基本类型

  • 直接用Boolean(x)、Number(x)、String(x)即可。

2、引用类型转基本类型

  • 转布尔:任何对象转布尔都为true
  • 转字符串:String(obj)会调用ToPrimitive(obj, String)
  • 转数字:Number(obj)会调用ToPrimitive(obj, Number)

ToPrimitive原理

ToPrimitive(obj,hint)这里hint有三种:

  • string → 优先调用 toString(),失败再调用 valueOf()

  • number → 优先调用 valueOf(),失败再调用 toString()

  • default → 大部分对象的行为和 number 相同(优先 valueOf()),但 Date 是个特例(默认走 string)

以上转换完成之后仍不是基本类型则抛出异常

js 复制代码
let obj = {
  valueOf() { return 42; },
  toString() { return "hello"; }
};

console.log(String(obj)); // "hello" (hint="string")
console.log(Number(obj)); // 42      (hint="number")

console.log(obj + 1);     // 43      (hint="default"≈number, valueOf优先)
console.log(obj + '');    // "42"    (hint="default"≈number, valueOf优先)

console.log(new Date() + ''); // 类似 "Tue Aug 19 2025 ..." (hint="default"≈string, toString优先)

!!!注意点:
对象调用valueOf()默认返回对象本身this,并不会自动将对象转换为原始类型,取决于这个对象有没有重写valueOf方法
let obj = {};
console.log(obj.valueOf() === obj); // true

口诀

  • String 转换 → toString 优先
  • Number 转换 → valueOf 优先
  • 加号运算 → 默认走 valueOf 优先 (除了 Date)

ToString

  • null → 'null'
  • undefined →'undefined'
  • 布尔值true→'true',false→'false'
  • 数字转字符串
  • 对象→调用toString(),默认[object Object]

ToNumber

  • null→0
  • undefined→NaN
  • 布尔值true→1,false→0
  • 字符串→按规则解析(空字符串为0,非数字为NaN)
  • 对象→先ToPrimitive再ToNumber

ToBoolean

假值(falsy)有8种:false,0,-0,0n(BigInt零),''(空字符串),null,undefined,NaN

其余都为真值(truthy)

js 复制代码
Boolean({}) // true
Boolean([]) // true
相关推荐
子兮曰3 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰3 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万3 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝3 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋3 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁3 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95273 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大3 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师3 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学3 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端