loyalvi
js类型转换
loyalvi Lv7
  2026-03-13 16:44:14   2026-03-16 10:42:02    

js 的类型转换

js数据类型

JavaScript 有七种数据类型，分为基本数据类型和引用数据类型。

基本数据类型（Primitive Data Types）

基本数据类型是不可变的数据类型，它们的值是直接存储在变量访问的位置的。JavaScript 有六种基本数据类型：

  1. Number
    • 用于表示数字，包括整数和浮点数。例如：42、3.14。
    • JavaScript 中的数字都是以 64 位浮点数形式存储的，即使是整数也是如此。
  2. String
    • 用于表示文本数据。字符串是由字符组成的序列，可以使用单引号 '、双引号 " 或反引号 ` 来定义字符串。例如：'Hello'、"World"、`JavaScript`。
    • 字符串是不可变的，每次对字符串进行修改操作时，都会生成一个新的字符串。
  3. Boolean
    • 用于表示逻辑实体，只有两个值：true 和 false。
    • 常用于条件判断中，例如在 if 语句中判断某个条件是否成立。
  4. Undefined
    • 表示变量已声明但未初始化，即没有赋予具体的值。例如： 
      1
      2
      let x;
      console.log(x); // 输出 undefined
    • 当函数没有明确返回值时，也会返回 undefined。
  5. Null
    • 表示故意赋予变量的空值。例如： 
      1
      2
      let y = null;
      console.log(y); // 输出 null
    • 它是一个表示“无”的特殊值，与 undefined 不同，null 是一个明确的空值赋值。
  6. Symbol（ES6 新增）
    • 是一种基本数据类型，表示一个唯一的、不可变的数据类型。每个 Symbol 值都是唯一的，即使它们的描述相同。例如： 
      1
      2
      3
      let s1 = Symbol('foo');
      let s2 = Symbol('foo');
      console.log(s1 === s2); // 输出 false
    • 常用于对象属性的键，可以保证属性名的唯一性，避免命名冲突。

引用数据类型（Reference Data Types）

引用数据类型是可变的数据类型，它们的值是存储在内存中的对象。变量存储的是对象的引用（内存地址），而不是实际的数据。JavaScript 中的引用数据类型主要是 Object，包括以下几种常见形式：

  1. Object
    • 是一个无序的键值对集合。例如： 
      1
      2
      3
      4
      let person = {
          name: 'Alice',
          age: 30
      };
    • 对象的键可以是字符串或 Symbol，值可以是任意类型。
  2. Array
    • 是一种特殊的对象，用于存储多个值。例如： 
      1
      let numbers = [1, 2, 3, 4, 5];
    • 数组的索引是特殊的键，从 0 开始。
  3. Function
    • 是一种特殊的对象，用于封装可执行的代码。例如： 
      1
      2
      3
      function greet(name) {
          console.log(`Hello, ${name}!`);
      }
    • 函数也是对象，可以有属性和方法。
  4. Date
    • 用于表示日期和时间。例如： 
      1
      2
      let now = new Date();
      console.log(now); // 输出当前日期和时间
    • Date 对象提供了多种方法来获取和设置日期和时间。
  5. RegExp
    • 用于表示正则表达式。例如： 
      1
      let regex = /pattern/gi;
    • 正则表达式对象用于字符串匹配、替换等操作。

特殊情况：BigInt（ES2020 新增）

  • BigInt 是一种新的数字类型，用于表示大于 2^53 - 1 的整数。例如： 
    1
    let bigNumber = BigInt(1234567890123456789012345678901234567890n);
  • BigInt 可以处理非常大的整数，常用于加密算法等需要大整数运算的场景。

类型判断

  • 可以使用 typeof 操作符来判断变量的数据类型。例如： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    console.log(typeof 42); // "number"
    console.log(typeof 'Hello'); // "string"
    console.log(typeof true); // "boolean"
    console.log(typeof undefined); // "undefined"
    console.log(typeof null); // "object"（这是一个历史遗留问题）
    console.log(typeof Symbol('foo')); // "symbol"
    console.log(typeof BigInt(1234567890123456789012345678901234567890n)); // "bigint"
    console.log(typeof {}); // "object"
    console.log(typeof []); // "object"
    console.log(typeof function() {}); // "function"
    了解这些数据类型及其特点对于编写高效、可靠的 JavaScript 代码非常重要。

类型转换

JavaScript 是一种动态类型语言，这意味着变量的类型可以在运行时改变。类型转换是将一个类型的值转换为另一个类型的值的过程。JavaScript 中的类型转换可以分为两种：隐式类型转换和显式类型转换。

隐式类型转换（类型强制）

隐式类型转换是由 JavaScript 引擎自动进行的，通常发生在不同类型的值进行运算或比较时。以下是一些常见的隐式类型转换场景：

  • 字符串连接：当使用 + 操作符进行字符串连接时，如果其中一个操作数是字符串，另一个操作数会被转换为字符串。
    1
    console.log('Hello, ' + 123); // 输出 "Hello, 123"
  • 布尔值转换：在进行逻辑运算或条件判断时，非布尔值会被转换为布尔值。
    1
    2
    3
    if (1) {
      console.log('1的布尔值为true');
    }
  • 数值转换：在进行数学运算时，非数值类型会被转换为数值类型。
    1
    console.log('123' - 1); // 输出 122
  • == 操作符：使用 == 进行相等性比较时，如果两个操作数的类型不同，JavaScript 会尝试进行类型转换，以使它们的类型相同，然后再进行比较。
    1
    console.log('5' == 5); // 输出 true

显式类型转换

显式类型转换是通过使用特定的方法或操作符来手动进行的。以下是一些常见的显式类型转换方法：

  • 转换为字符串
    • 使用 String() 函数：
      1
      2
      const num = 123;
      const str = String(num); // "123"
    • 使用模板字符串或字符串连接：
      1
      2
      const num = 123;
      const str = `${num}`; // "123"
  • 转换为数值
    • 使用 Number() 函数：
      1
      2
      const str = '123';
      const num = Number(str); // 123
    • 使用一元加号 +：
      1
      2
      const str = '123';
      const num = +str; // 123
    • 使用 parseInt() 和 parseFloat() 函数：
      1
      2
      3
      const str = '123.45';
      const intNum = parseInt(str); // 123
      const floatNum = parseFloat(str); // 123.45
  • 转换为布尔值
    • 使用 Boolean() 函数：
      1
      2
      const value = '0';
      const bool = Boolean(value); // true
    • 使用逻辑非操作符 !：
      1
      2
      const value = '0';
      const bool = !!value; // true
  • 转换为对象
    • 使用 Object() 函数：
      1
      2
      const value = '123';
      const obj = Object(value); // String { "123" }

特殊值的类型转换

  • null 和 undefined
    • 转换为数值时，null 转换为 0，undefined 转换为 NaN。
    • 转换为字符串时，null 转换为 "null"，undefined 转换为 "undefined"。
    • 转换为布尔值时，null 和 undefined 都转换为 false。
  • NaN
    • NaN 是一个特殊的数值，表示“不是一个数字”。
    • NaN 与任何值（包括自身）进行相等性比较的结果都是 false。
    • 使用 isNaN() 函数可以检测一个值是否为 NaN。

注意事项

  • 隐式类型转换可能导致一些意想不到的结果，因此在进行类型敏感的操作时，最好使用显式类型转换来确保类型正确。
  • 使用 === 进行严格相等性比较可以避免隐式类型转换的影响，因为 === 不会进行类型转换，而是直接比较值和类型是否都相等。

常见的数值类型及其布尔转换规则

在 JavaScript 中，不同的数值类型在布尔上下文中会被转换为布尔值。以下是常见的数值类型及其布尔转换规则：

  • 数字：
    • 任何非零的数值（包括正数和负数）都会被转换为 true。
    • 数值 0 会被转换为 false。
    • 数值 NaN（Not-a-Number）也会被转换为 false。
  • 字符串：
    • 非空字符串会被转换为 true。
    • 空字符串 "" 会被转换为 false。
  • 数组：
    • 非空数组会被转换为 true。
    • 空数组 [] 会被转换为 true（注意，空数组不是假值）。
  • 对象：
    • 任何对象（包括 null 之外的任何对象）都会被转换为 true。
    • null 会被转换为 false。
  • undefined：
    • undefined 会被转换为 false。
      这些转换规则在 JavaScript 中是隐式的，通常在条件判断（如 if 语句）中会自动应用。例如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
if (1) { // true
  console.log("非零数值是真值");
}
if (0) { // false
  console.log("零是假值");
}
if (NaN) { // false
  console.log("NaN是假值");
}
if ("hello") { // true
  console.log("非空字符串是真值");
}
if ([]) { // true
  console.log("非空数组是真值");
}
if ({}) { // true
  console.log("对象是真值");
}
if (null) { // false
  console.log("null是假值");
}
if (undefined) { // false
  console.log("undefined是假值");
}

这些规则对于理解 JavaScript 中的条件判断和逻辑运算非常重要。

布尔值的隐式转换

在 JavaScript 中，布尔值的隐式转换是指将非布尔类型的值转换为布尔值，这个过程通常发生在条件判断等场景中。以下是 JavaScript 中各种类型值隐式转换为布尔值的规则：

1. 数字类型

  • 非零数字：任何非零数字（包括正数、负数和小数）都会被转换为 true。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    if (1) {
      console.log("1 is true"); // 输出 "1 is true"
    }
    if (-5) {
      console.log("-5 is true"); // 输出 "-5 is true"
    }
    if (3.14) {
      console.log("3.14 is true"); // 输出 "3.14 is true"
    }
  • 零和 NaN：数字 0 和 NaN 会被转换为 false。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    if (0) {
      console.log("0 is true"); // 不会输出
    } else {
      console.log("0 is false"); // 输出 "0 is false"
    }
    if (NaN) {
      console.log("NaN is true"); // 不会输出
    } else {
      console.log("NaN is false"); // 输出 "NaN is false"
    }

2. 字符串类型

  • 非空字符串：任何非空字符串（包括只包含空格的字符串）都会被转换为 true。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    if ("Hello") {
      console.log("'Hello' is true"); // 输出 "'Hello' is true"
    }
    if (" ") {
      console.log("A string with a space is true"); // 输出 "A string with a space is true"
    }
    if ("0") {
      console.log("'0' is true"); // 输出 "'0' is true"
    }
  • 空字符串：空字符串 "" 会被转换为 false。 
    1
    2
    3
    4
    5
    if ("") {
      console.log("'' is true"); // 不会输出
    } else {
      console.log("'' is false"); // 输出 "'' is false"
    }

3. 对象类型

  • 所有对象：包括数组、函数、普通对象等，都会被转换为 true。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    if ({}) {
      console.log("An empty object is true"); // 输出 "An empty object is true"
    }
    if ([1, 2, 3]) {
      console.log("An array is true"); // 输出 "An array is true"
    }
    if (function() {}) {
      console.log("A function is true"); // 输出 "A function is true"
    }

4. 特殊值

  • null：会被转换为 false。 
    1
    2
    3
    4
    5
    if (null) {
      console.log("null is true"); // 不会输出
    } else {
      console.log("null is false"); // 输出 "null is false"
    }
  • undefined：会被转换为 false。 
    1
    2
    3
    4
    5
    if (undefined) {
      console.log("undefined is true"); // 不会输出
    } else {
      console.log("undefined is false"); // 输出 "undefined is false"
    }

总结

在 JavaScript 中，以下值会被隐式转换为 false：

  • false
  • 0
  • NaN
  • ""（空字符串）
  • null
  • undefined
    所有其他值都会被隐式转换为 true。这种隐式转换在条件判断、逻辑运算等场景中非常常见，了解这些规则有助于编写更清晰、更可靠的代码。

比较运算符

在 JavaScript 中，==（松散相等）是一种比较运算符，它在比较两个值时允许隐式类型转换，而 ===（严格相等）则要求值和类型都相同。== 的行为规则较为复杂，以下是其核心逻辑和常见场景的详细分析：

一、== 的比较规则

当使用 x == y 时，JavaScript 会按以下优先级规则进行类型转换和比较：

规则优先级顺序：

  1. 如果类型相同，直接比较值（等同于 ===）。
  2. 如果类型不同，尝试按以下顺序转换类型：
    • 数字 vs 字符串：将字符串转为数字再比较。
    • 布尔值 vs 非布尔值：将布尔值转为数字（true→1，false→0），再比较。
    • 对象 vs 原始值：将对象转为原始值（调用 valueOf() 或 toString()），再比较。
  3. 特殊值处理：
    • null 和 undefined 在 == 下相等，但与其他值比较时不会转换。
    • NaN 不等于任何值（包括自身）。

二、具体场景示例

1. 数字 vs 字符串

字符串会被转换为数字：

1
2
3
console.log(5 == "5");    // true（"5" → 5）
console.log(0 == "");     // true（"" → 0）
console.log("1.23" == 1.23); // true

2. 布尔值 vs 其他类型

布尔值会先转为数字（true→1，false→0）：

1
2
3
4
console.log(true == 1);   // true（true → 1）
console.log(false == 0);  // true（false → 0）
console.log(true == "1"); // true（true→1，"1"→1）
console.log(false == ""); // true（false→0，""→0）

3. 对象 vs 原始值

对象会通过 ToPrimitive 转换为原始值：

1
2
3
4
5
6
// 数组转字符串 → 转数字
console.log([] == 0);     // true（[] → "" → 0）
console.log([2] == 2);    // true（[2] → "2" → 2）
// 对象转原始值
const obj = { valueOf: () => 10 };
console.log(obj == 10);   // true（obj → 10）

4. 特殊值比较

  • null 和 undefined 的宽松相等：
    1
    2
    3
    console.log(null == undefined); // true
    console.log(null == 0);         // false（null 不转换）
    console.log(undefined == "");   // false
  • NaN 的特殊性：
    1
    console.log(NaN == NaN);        // false

三、隐式转换的陷阱

== 的隐式转换可能导致反直觉的结果：

1
2
3
4
5
6
7
// 示例 1：布尔值的陷阱
console.log(false == "0");    // true（false→0， "0"→0 → 0==0）
console.log(false == []);     // true（[] → "" → 0，false→0）
// 示例 2：空数组的陷阱
console.log([] == ![]);       // true（![] → false → 0，[] → "" → 0 → 0==0）
// 示例 3：对象与原始值
console.log("[object Object]" == {}); // true（{} 调用 toString()）

四、== 和 === 的对比

场景 == 结果 === 结果 原因
5 == "5" true false 字符串转数字后相等
true == 1 true false 布尔值转数字后相等
null == undefined true false 特殊规则
0 == false true false 布尔值转数字后相等
[] == 0 true false 对象转原始值后比较

五、== 的工作流程图解

1
2
3
4
5
6
7
8
x == y 的比较流程：
1. 如果 x 和 y 类型相同 → 直接比较值（同 ===）。
2. 如果类型不同：
   a. 如果一方是数字，另一方是字符串 → 将字符串转为数字。
   b. 如果一方是布尔值 → 将布尔值转为数字（true→1，false→0）。
   c. 如果一方是对象，另一方是原始值 → 对象转原始值（ToPrimitive）。
3. 再次比较转换后的值。
4. 特殊处理：null == undefined → true。

六、最佳实践

  1. 优先使用 ===：避免隐式类型转换带来的意外行为。
  2. 明确类型转换：若需类型转换，显式使用 Number()、String() 等函数。
  3. 避免复杂比较：如涉及对象或空值，使用 === 更安全。

通过理解 == 的隐式转换规则，可以更安全地处理 JavaScript 中的比较操作。

js类型转换
posts/92aca09d/
作者
loyalvi
发布于
2026-03-13 16:44
许可
  1. js 的类型转换
    1. js数据类型
      1. 基本数据类型（Primitive Data Types）
      2. 引用数据类型（Reference Data Types）
      3. 特殊情况：BigInt（ES2020 新增）
      4. 类型判断
    2. 类型转换
      1. 隐式类型转换（类型强制）
      2. 显式类型转换
      3. 特殊值的类型转换
      4. 注意事项
    3. 常见的数值类型及其布尔转换规则
    4. 布尔值的隐式转换
      1. 1. 数字类型
      2. 2. 字符串类型
      3. 3. 对象类型
      4. 4. 特殊值
      5. 总结
    5. 比较运算符
      1. 一、== 的比较规则
        1. 规则优先级顺序：
      2. 二、具体场景示例
        1. 1. 数字 vs 字符串
        2. 2. 布尔值 vs 其他类型
        3. 3. 对象 vs 原始值
        4. 4. 特殊值比较
      3. 三、隐式转换的陷阱
      4. 四、== 和 === 的对比
      5. 五、== 的工作流程图解
      6. 六、最佳实践
© 2020 - 2026    loyalvi
由 Hexo 驱动 & 主题 Keep
访客数 访问量
  1. js 的类型转换
    1. js数据类型
      1. 基本数据类型（Primitive Data Types）
      2. 引用数据类型（Reference Data Types）
      3. 特殊情况：BigInt（ES2020 新增）
      4. 类型判断
    2. 类型转换
      1. 隐式类型转换（类型强制）
      2. 显式类型转换
      3. 特殊值的类型转换
      4. 注意事项
    3. 常见的数值类型及其布尔转换规则
    4. 布尔值的隐式转换
      1. 1. 数字类型
      2. 2. 字符串类型
      3. 3. 对象类型
      4. 4. 特殊值
      5. 总结
    5. 比较运算符
      1. 一、== 的比较规则
        1. 规则优先级顺序：
      2. 二、具体场景示例
        1. 1. 数字 vs 字符串
        2. 2. 布尔值 vs 其他类型
        3. 3. 对象 vs 原始值
        4. 4. 特殊值比较
      3. 三、隐式转换的陷阱
      4. 四、== 和 === 的对比
      5. 五、== 的工作流程图解
      6. 六、最佳实践