JavaScript简介
开发环境搭建
第一个JavaScript程序
基本语法
数据类型概述
原始类型
引用类型
类型转换
运算符概述
算术运算符
比较运算符
逻辑运算符
其他运算符
条件语句
循环语句
异常处理
函数基础
箭头函数
作用域与闭包
高阶函数
this与执行上下文
数组基础
数组方法
数组高级应用
对象属性
对象创建与继承
ES6类
对象解构与扩展
字符串方法
正则表达式
DOM基础
DOM选择器
DOM操作
DOM属性与样式
表单操作
事件基础
事件绑定
事件类型
事件高级
Window对象
Location对象
History对象
其他BOM对象
客户端存储
回调函数
Promise
Async/Await
异步迭代
Ajax
Fetch API
WebSocket
ES6核心特性
ES7-ES12特性
迭代器与生成器
Proxy与Reflect
Map与Set
模块化概述
CommonJS
ES Modules
模块打包工具
函数式编程基础
函数式编程技术
错误处理
调试技术
性能优化基础
JavaScript优化
创建型模式
结构型模式
行为型模式
Web Workers
Service Worker
IndexedDB
Canvas绘图
WebGL基础
SVG图形
Web Audio API
WebRTC
Geolocation API
Drag and Drop
File API
Web Components基础
自定义元素进阶
Shadow DOM深入
HTML Templates
模块化开发
组件化思想
虚拟DOM
响应式原理
Node.js入门
Express框架
Koa框架
npm包管理
构建工具
Webpack
测试框架
Web安全
代码质量
最佳实践
TypeScript基础
TypeScript进阶
JavaScript未来
  1. JavaScript
  2. 类型转换

类型转换

显式类型转换

显式类型转换是开发者主动进行的类型转换，代码意图清晰。

转换为字符串

// String()函数
console.log(String(123));           // "123"
console.log(String(true));          // "true"
console.log(String(null));          // "null"
console.log(String(undefined));     // "undefined"
console.log(String([1, 2, 3]));     // "1,2,3"
console.log(String({}));            // "[object Object]"

// toString()方法
console.log((123).toString());      // "123"
console.log(true.toString());       // "true"
console.log([1, 2].toString());     // "1,2"

// 拼接空字符串
console.log(123 + "");              // "123"
console.log(true + "");             // "true"

// toFixed() - 数字转字符串并保留小数
console.log((3.14159).toFixed(2));  // "3.14"

转换为数字

// Number()函数
console.log(Number("123"));         // 123
console.log(Number("3.14"));        // 3.14
console.log(Number(""));            // 0
console.log(Number("东巴文"));       // NaN
console.log(Number(true));          // 1
console.log(Number(false));         // 0
console.log(Number(null));          // 0
console.log(Number(undefined));     // NaN

// parseInt() - 解析整数
console.log(parseInt("123"));       // 123
console.log(parseInt("123.45"));    // 123
console.log(parseInt("123abc"));    // 123
console.log(parseInt("abc123"));    // NaN
console.log(parseInt("10", 2));     // 2（二进制）
console.log(parseInt("FF", 16));    // 255（十六进制）

// parseFloat() - 解析浮点数
console.log(parseFloat("3.14"));    // 3.14
console.log(parseFloat("3.14abc")); // 3.14
console.log(parseFloat("3"));       // 3

// 一元加号
console.log(+"123");                // 123
console.log(+"3.14");               // 3.14
console.log(+"东巴文");              // NaN

转换为布尔值

// Boolean()函数
console.log(Boolean(1));            // true
console.log(Boolean(0));            // false
console.log(Boolean("东巴文"));      // true
console.log(Boolean(""));           // false
console.log(Boolean(null));         // false
console.log(Boolean(undefined));    // false
console.log(Boolean([]));           // true
console.log(Boolean({}));           // true

// 双重否定
console.log(!!1);                   // true
console.log(!!0);                   // false
console.log(!!"");                  // false

转换为对象

// Object()函数
console.log(Object(123));           // Number {123}
console.log(Object("东巴文"));       // String {"东巴文"}
console.log(Object(true));          // Boolean {true}

// 原始值包装对象
let num = new Number(123);
let str = new String("东巴文");
let bool = new Boolean(true);

console.log(typeof num);            // "object"
console.log(typeof str);            // "object"
console.log(typeof bool);           // "object"

隐式类型转换

隐式类型转换是JavaScript自动进行的类型转换，了解规则可以避免意外错误。

字符串拼接

// + 运算符遇到字符串会进行拼接
console.log(1 + "2");           // "12"
console.log("1" + 2);           // "12"
console.log(1 + 2 + "3");       // "33"
console.log("1" + 2 + 3);       // "123"
console.log(1 + "2" + 3);       // "123"

算术运算

// 其他算术运算符会转换为数字
console.log("5" - 3);           // 2
console.log("5" * "2");         // 10
console.log("10" / 2);          // 5
console.log("10" % 3);          // 1

// 一元运算符
console.log(+"5");              // 5
console.log(-"5");              // -5
console.log(+"东巴文");          // NaN

比较运算

// == 会进行类型转换
console.log(5 == "5");          // true
console.log(0 == "");           // true
console.log(0 == false);        // true
console.log(null == undefined); // true

// === 不进行类型转换
console.log(5 === "5");         // false
console.log(0 === "");          // false
console.log(0 === false);       // false
console.log(null === undefined);// false

逻辑运算

// 条件判断中会转换为布尔值
if ("东巴文") {
    console.log("执行");        // 执行
}

if (0) {
    console.log("不执行");
}

// 逻辑运算符返回原值
console.log(1 || 2);            // 1
console.log(0 || 2);            // 2
console.log(1 && 2);            // 2
console.log(0 && 2);            // 0

转换为字符串

转换规则表

原始值 转换结果 东巴文说明
undefined "undefined" -
null "null" -
true "true" -
false "false" -
123 "123" -
NaN "NaN" -
Infinity "Infinity" -
[] "" 空数组
[1, 2] "1,2" 数组元素逗号连接
{} "[object Object]" 对象
function(){} "function(){}" 函数源码

对象转字符串

// 对象转字符串的流程
let obj = {
    name: "东巴文",
    
    // 1. 优先调用[Symbol.toPrimitive]
    [Symbol.toPrimitive](hint) {
        if (hint === "string") {
            return this.name;
        }
        return 42;
    },
    
    // 2. 其次调用toString()
    toString() {
        return "toString结果";
    },
    
    // 3. 最后调用valueOf()
    valueOf() {
        return "valueOf结果";
    }
};

console.log(String(obj));       // "东巴文"
console.log(obj + "");          // "42"

转换为数字

转换规则表

原始值 转换结果 东巴文说明
undefined NaN -
null 0 -
true 1 -
false 0 -
"123" 123 纯数字字符串
"3.14" 3.14 浮点数
"" 0 空字符串
"东巴文" NaN 非数字字符串
[] 0 空数组
[5] 5 单元素数组
[1, 2] NaN 多元素数组
{} NaN 对象

对象转数字

let obj = {
    // 1. 优先调用[Symbol.toPrimitive]
    [Symbol.toPrimitive](hint) {
        if (hint === "number") {
            return 100;
        }
        return null;
    },
    
    // 2. 其次调用valueOf()
    valueOf() {
        return 50;
    },
    
    // 3. 最后调用toString()
    toString() {
        return "25";
    }
};

console.log(Number(obj));       // 100

转换为布尔值

假值（Falsy）

只有以下值转换为false：

const falsyValues = [
    false,
    0,
    -0,
    0n,
    "",          // 空字符串
    null,
    undefined,
    NaN
];

// 检测假值
function isFalsy(value) {
    return !value;
}

真值（Truthy）

除假值外的所有值都是真值：

// 这些都是真值
console.log(Boolean([]));        // true（空数组）
console.log(Boolean({}));        // true（空对象）
console.log(Boolean(" "));       // true（空格字符串）
console.log(Boolean("false"));   // true（字符串"false"）
console.log(Boolean(-1));        // true（负数）
console.log(Boolean(Infinity));  // true
console.log(Boolean(function(){})); // true（函数）

转换为对象

原始值包装对象

// 字符串
let str = "东巴文";
console.log(str.length);         // 3（自动包装）
console.log(str.toUpperCase());  // "东巴文"（自动包装）

// 数字
let num = 123;
console.log(num.toFixed(2));     // "123.00"（自动包装）

// 布尔值
let bool = true;
console.log(bool.toString());    // "true"（自动包装）

// null和undefined没有包装对象
// console.log(null.toString()); // TypeError
// console.log(undefined.toString()); // TypeError

相等运算符与类型转换

== 的转换规则

// 1. 类型相同，直接比较
console.log(1 == 1);             // true
console.log("a" == "a");         // true

// 2. null == undefined
console.log(null == undefined);  // true

// 3. 数字与其他类型比较，转为数字
console.log(1 == "1");           // true
console.log(1 == true);          // true
console.log(0 == false);         // true

// 4. 字符串与布尔值，都转为数字
console.log("1" == true);        // true
console.log("0" == false);       // true

// 5. 对象与原始值，对象转为原始值
console.log([1] == 1);           // true
console.log([1, 2] == "1,2");    // true

== 转换规则表

类型1 类型2 转换规则 东巴文说明
null undefined 相等 特殊规则
数字 字符串 字符串转数字 "5" → 5
布尔值 任意 布尔值转数字 true → 1
对象 原始值 对象转原始值 调用valueOf/toString

经典陷阱

console.log([] == false);        // true
// [] → "" → 0, false → 0

console.log([] == ![]);          // true
// ![] → false, [] → "" → 0, false → 0

console.log({} == !{});          // false
// !{} → false, {} → "[object Object]" → NaN, false → 0

console.log("" == 0);            // true
console.log("" == false);        // true
console.log(0 == false);         // true

最佳实践

// 推荐：使用严格相等 ===
console.log(5 === 5);            // true
console.log(5 === "5");          // false
console.log(null === undefined); // false

// 明确的类型转换
console.log(Number("5") === 5);  // true
console.log(String(5) === "5");  // true
console.log(Boolean(1) === true);// true

东巴文建议：始终使用===进行相等比较，避免隐式类型转换带来的意外结果。

类型转换总结

显式转换方法

目标类型 方法 东巴文推荐
String String(), toString(), +"" String()最清晰
Number Number(), parseInt(), parseFloat(), + Number()通用
Boolean Boolean(), !! !!更简洁
Object Object(), new包装对象 按需使用

隐式转换场景

场景 触发运算符 转换目标 东巴文提醒
字符串拼接 + String 注意顺序
算术运算 -, *, /, % Number 自动转换
比较运算 == 视情况 使用===避免
条件判断 if, while Boolean 了解假值
逻辑运算 ||, && 不转换 返回原值

下一步

掌握了类型转换后，让我们继续学习：

  1. 运算符概述 - 学习运算符
  2. 算术运算符 - 学习算术运算
  3. 比较运算符 - 学习比较运算

东巴文（db-w.cn） - 让编程学习更简单

🔄 东巴文寄语：理解类型转换是避免JavaScript陷阱的关键。掌握显式转换方法，了解隐式转换规则，让你的代码更加可靠。在 db-w.cn，我们帮你避开每一个坑！

上一章：引用类型
下一章：运算符概述