一文搞懂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
相关推荐
小小怪下士_---_几秒前
uniapp开发微信小程序自定义导航栏
前端·vue.js·微信小程序·小程序·uni-app
前端W2 分钟前
腾讯地图组件使用说明文档
前端
页面魔术5 分钟前
无虚拟dom怎么又流行起来了?
前端·javascript·vue.js
胡gh5 分钟前
如何聊懒加载,只说个懒可不行
前端·react.js·面试
Double__King8 分钟前
巧用 CSS 伪元素,让背景图自适应保持比例
前端
Mapmost9 分钟前
【BIM+GIS】BIM数据格式解析&与数字孪生适配的关键挑战
前端·vue.js·three.js
一涯10 分钟前
写一个Chrome插件
前端·chrome
鹧鸪yy17 分钟前
认识Node.js及其与 Nginx 前端项目区别
前端·nginx·node.js
跟橙姐学代码18 分钟前
学Python必须迈过的一道坎:类和对象到底是什么鬼?
前端·python