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

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

javascript数据类型分为基本类型和引用类型,**基本类型(原始类型)**包括stringnumberbooleannullundefinedsymbolbigint

引用类型 包括ObjectArrayFunctionDateRegExp等)

=====的区别

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

==转换规则

  • null == undefined // true
  • nullundefined 与其他值比较时不转换为数字
  • 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 转为布尔值
  • 对象参与运算时调用 ToPrimitivevalueOftoString

基本类型和引用类型转换

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

  • null0
  • undefinedNaN
  • 布尔值true→1,false→0
  • 字符串→按规则解析(空字符串为0,非数字为NaN
  • 对象→先ToPrimitiveToNumber

ToBoolean

假值(falsy)有8种:false0-00n(BigInt零)''(空字符串)nullundefinedNaN

其余都为真值(truthy)

js 复制代码
Boolean({}) // true
Boolean([]) // true
相关推荐
xingpanvip9 分钟前
星盘接口开发文档:组合三限盘接口指南
android·开发语言·前端·python·php·lua
阿拉丁的梦19 分钟前
blender最好的多通道吸色工具(拾取纹理颜色排除灯光)
前端·html
吴声子夜歌20 分钟前
Vue3——脚手架Vite
前端·javascript·vue.js·vite
摘星编程22 分钟前
当AI开始学会“使用工具“——从ReAct到MCP,大模型如何获得真正的行动力
前端·人工智能·react.js
light blue bird30 分钟前
设备数据变化上传图表数据汇总组件
大数据·前端·信息可视化
2501_9181269136 分钟前
开源祭祖网页index
前端·开源·html
傻瓜搬砖人1 小时前
SpringMVC的请求
java·前端·javascript·spring
爱上好庆祝1 小时前
学习js的第六天(js基础的结束)
开发语言·前端·javascript·学习·ecmascript
IT_陈寒2 小时前
JavaScript的异步地狱,我差点没爬出来
前端·人工智能·后端
光影少年2 小时前
Webpack打包性能优化方面的经验
前端·webpack·性能优化