深度理解JS数据类型转换

50 阅读4分钟

JavaScript 是一门非常灵活的编程语言,它的类型系统相对简单且易于使用。在 ES6 之前,JavaScript 总共有六种数据类型:五种简单数据类型(Primitive)和一种复杂数据类型(Object)。我将详细讲解这些数据类型,并深入探讨它们之间的转换规则。

JavaScript 数据类型概述

简单数据类型(Primitive)

简单数据类型是基本的数据单元,直接存储实际值。拷贝式赋值意味着当你复制一个变量时,会创建该值的一个副本。

  • String: 字符串用于表示文本。
  • Number: 数字可以是整数或浮点数。
  • Boolean: 布尔值只有两个可能的值:truefalse
  • Null: 表示“无”或“空”,只有一个值:null
  • Undefined: 变量声明但未赋值时,默认值为 undefined

复杂数据类型

复杂数据类型存储的是对象的引用地址,而不是实际的对象本身。

  • Object: 对象可以包含多个属性和方法。常见的对象包括数组、函数等。

下面是一个简单的例子来说明这两种类型的区别:

let str = "Hello";
let num = 42;
let bool = true;
let nul = null;
let undef;

console.log(typeof str); // "string"
console.log(typeof num); // "number"
console.log(typeof bool); // "boolean"
console.log(typeof nul); // "object" (这是一个历史遗留问题)
console.log(typeof undef); // "undefined"

let obj = { name: "Alice" };
let arr = [1, 2, 3];
let func = function() {};

console.log(typeof obj); // "object"
console.log(Array.isArray(arr)); // true
console.log(typeof func); // "function"

注意:虽然 typeof null 返回 "object",但实际上 null 是一个特殊的原始值。

为什么 JavaScript 的类型会发生变化?

JavaScript 是一种弱类型语言,这意味着变量的类型可以在运行时改变。这种特性使得 JavaScript 在处理不同类型的变量时非常灵活,但也可能导致一些难以预料的行为。例如,当我们对字符串执行算术运算时,JavaScript 会自动将其转换为数字:

console.log(Number("1")); // 输出: 1
console.log(5 + "10"); // 输出: "510" (字符串拼接)
console.log(5 - "10"); // 输出: -5 (数值减法)

这种隐式类型转换有时会导致意想不到的结果,因此了解显式类型转换的方法非常重要。

如何确定变量的确切类型?

要准确判断一个变量的类型,可以使用 typeof 操作符。但对于某些特殊情况,如 nulltypeof 返回的结果并不是预期的 "object" 而是 "null"。因此,在某些情况下需要结合其他方法来判断变量的类型。

console.log(typeof "Hello"); // "string"
console.log(typeof 42); // "number"
console.log(typeof true); // "boolean"
console.log(typeof null); // "object"
console.log(typeof undefined); // "undefined"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(Array.isArray([])); // true
console.log(typeof function(){}); // "function"

为了更准确地判断数组类型,可以使用 Array.isArray() 方法。

Boolean 类型转换规则

布尔类型转换主要涉及将其他类型的值转换为布尔值的情况。以下是转换为 false 的情况:

  • "" (空字符串)
  • 0, -0, +0
  • null
  • undefined
  • NaN
  • false

所有其他值都会被转换为 true

显示类型转换

你可以使用 Boolean() 构造函数来进行显示类型转换。

console.log(Boolean()); // false
console.log(Boolean(false)); // false
console.log(Boolean(true)); // true
console.log(Boolean(undefined)); // false
console.log(Boolean(null)); // false
console.log(Boolean(+0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean('')); // false
console.log(Boolean('hello')); // true
console.log(Boolean({})); // true
console.log(Boolean([])); // true

隐式类型转换

在逻辑判断中,JavaScript 会自动进行隐式类型转换。

if ("") {
  console.log("This will not be executed");
}

if ([]){
  console.log("This will be executed because an empty array is truthy");
}

+0 和 -0

在 JavaScript 中,+0-0 是不同的值,但在大多数情况下表现相同。唯一的区别在于除以这两个值的结果不同。

console.log(1 / +0); // Infinity
console.log(1 / -0); // -Infinity

为了区分 +0-0,可以使用 Object.is() 方法。

console.log(Object.is(+0, -0)); // false
console.log(Object.is(5, 5)); // true

NaN

NaN 是一个特殊的数值,代表“Not-a-Number”。它的类型仍然是 number,但它并不等于任何值,包括自身。

console.log(typeof NaN); // "number"
console.log(NaN == NaN); // false
console.log(NaN === NaN); // false

为了避免意外出现 NaN,可以使用 Number.isNaN() 进行检查。

console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(parseInt("abc"))); // true
console.log(Number.isNaN(parseInt("12abc"))); // false

Number 类型转换

将其他类型转换为数字类型可以通过 Number() 构造函数或一元加号运算符实现。

显示类型转换

console.log(Number()); // NaN
console.log(Number(undefined)); // NaN
console.log(Number(null)); // 0
console.log(Number(false)); // 0
console.log(Number(true)); // 1
console.log(Number("123")); // 123
console.log(Number("abc")); // NaN
console.log(Number("12.34")); // 12.34
console.log(Number("   123   ")); // 123
console.log(Number("123px")); // NaN

隐式类型转换

当数值参与运算时,JavaScript 会尝试将非数值类型转换为数值类型。

console.log(2 * "a"); // NaN
console.log(2 + "a"); // "2a"
console.log("5" - 2); // 3
console.log("5" * 2); // 10
console.log("5" / 2); // 2.5

String 类型转换

将其他类型转换为字符串类型可以通过 String() 构造函数或 .toString() 方法实现。

显示类型转换

console.log(String()); // ""
console.log(String(undefined)); // "undefined"
console.log(String(null)); // "null"
console.log(String(false)); // "false"
console.log(String(true)); // "true"
console.log(String(123)); // "123"
console.log(String(-0)); // "0"
console.log(String(NaN)); // "NaN"
console.log(String({})); // "[object Object]"
console.log(String([])); // ""
console.log(String([1, 2, 3])); // "1,2,3"

隐式类型转换

当字符串与数值相加时,JavaScript 会将数值转换为字符串。

console.log(2 + "a"); // "2a"
console.log(2 + ""); // "2"
console.log("" + 2); // "2"
console.log(1 + 2 + "3"); // "33"
console.log("1" + 2 + 3); // "123"

理解 JavaScript 中的数据类型及其转换规则对于编写健壮的代码至关重要。通过显式和隐式的类型转换,我们可以更好地控制程序的行为。希望本文能帮助你更好地理解和应用这些知识。

屏幕截图 2024-12-17 131740.png

看到这就点个赞吧