一文搞懂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
相关推荐
码云骑士8 小时前
104-实战论文搜索引擎-ArXiv爬取-Milvus存储-RAG问答-Gradio前端
前端·python·搜索引擎·milvus
sunly_8 小时前
TypeScript总结:15、类型速查
前端·javascript·typescript
Brown.alexis8 小时前
es6知识点3-自备使用
前端·javascript·es6
2601_953988078 小时前
Ricon组态系统vs传统组态软件:为什么选择新一代Web组态平台
前端·后端·物联网·tcp/ip·数学建模·前端框架
天空之城--8 小时前
Claude Code 高效开发 Web 2D/3D 完全指南:心法、自定义 Skill 体系与社区技能包实战
前端·3d
IT_陈寒9 小时前
SpringBoot自动配置坑了我三天,原来漏了这个注解
前端·人工智能·后端
逝水无殇9 小时前
HTML 文本格式化详解:掌握 <strong>、<em>、<mark>、<del> 等常用标签
前端·javascript·html
特立独行的猫a9 小时前
DeepSeek Harness插件和工具的区别介绍及开发入门指南
前端·ai·agent·插件·deepseek·harness
小新讲网安9 小时前
HTTP请求走私攻击实战:CL.TE与TE.CL绕过前端服务器全解析
服务器·前端·网络·web安全·http·架构·漏洞
风骏时光牛马9 小时前
AI办公系统异常事件复盘分析
前端