JavaScript 类型转换

JavaScript 是一种动态类型语言。变量本身不直接关联类型；值才有关联。当一个操作符或函数期望某个特定类型的值但接收到另一个类型的值时，就会发生类型转换（或强制转换，coercion）。JavaScript 提供了显式转换函数，如 Number()、String() 和 Boolean()。

JavaScript 数据类型

JavaScript 拥有以下基本数据类型 (primitive data types):

string: 表示文本数据。
number: 表示数值（包括整数和浮点数）。
boolean: 表示 true 或 false。
null: 表示刻意 ausencia 的任何对象值。
undefined: 表示尚未赋值的变量。
symbol (ES6): 表示唯一标识符。
bigint (ES2020): 表示任意精度的整数。

以及一种非基本（复杂）数据类型：

object: 表示键值对的集合或更复杂的实体。这包括 Array、Date、Function 和常规对象。

`typeof` 操作符

使用 typeof 操作符来查找 JavaScript 值或变量的数据类型。

typeof "John";          // Returns "string" (返回 "string")
typeof 3.14;            // Returns "number" (返回 "number")
typeof NaN;             // Returns "number" (NaN 表示 Not-a-Number，非数字值，但其类型是 number)
typeof false;           // Returns "boolean" (返回 "boolean")
typeof [1, 2, 3, 4];    // Returns "object" (返回 "object")
typeof {name:'John'};   // Returns "object" (返回 "object")
typeof new Date();      // Returns "object" (返回 "object")
typeof function() {};   // Returns "function" (函数在技术上是对象，但 typeof 对它们有特殊的返回值)
typeof myUndeclaredVar; // Returns "undefined" (如果 myUndeclaredVar 未声明或已声明但未赋值，返回 "undefined")
typeof null;             // Returns "object" (这是 JavaScript 中一个长期存在的怪异之处)
typeof Symbol('id');    // Returns "symbol" (返回 "symbol")
typeof 100n;            // Returns "bigint" (返回 "bigint")

关键观察：

NaN 的数据类型是 "number"。
数组的数据类型是 "object"。
日期的数据类型是 "object"。
null 的数据类型是 "object" (一个历史遗留的错误，不太可能修复)。
未声明或未初始化的变量的数据类型是 "undefined"。

	要专门检查值是否为数组，请使用 `Array.isArray(value)`。要检查对象是否为特定类（例如 `Date`）的实例，请使用 `value instanceof Date`。

`constructor` 属性

大多数 JavaScript 值（除了 null 和 undefined）都有一个 constructor 属性，它返回创建实例原型的构造函数。

"John".constructor;                // Returns function String() { [native code] } (返回 String() 构造函数)
(3.14).constructor;               // Returns function Number() { [native code] } (返回 Number() 构造函数)
false.constructor;                // Returns function Boolean() { [native code] } (返回 Boolean() 构造函数)
[1,2,3,4].constructor;            // Returns function Array() { [native code] } (返回 Array() 构造函数)
({name:'John'}).constructor;      // Returns function Object() { [native code] } (返回 Object() 构造函数)
(new Date()).constructor;         // Returns function Date() { [native code] } (返回 Date() 构造函数)
(function() {}).constructor;      // Returns function Function() { [native code] } (返回 Function() 构造函数)

虽然可以检查 constructor，但为了可靠的类型检查，最好使用 typeof、instanceof 或特定的方法，如 Array.isArray()。

现代类型检查的例子：

function isArray(value) {
  return Array.isArray(value);
}

function isDate(value) {
  return value instanceof Date && !isNaN(value);
}

console.log(isArray([1, 2])); // true
console.log(isDate(new Date())); // true

显式类型转换 (Explicit Type Conversion)

可以使用全局函数将 JavaScript 变量显式转换为另一种数据类型：

String(value): 将值转换为字符串。
Number(value): 将值转换为数字。
Boolean(value): 将值转换为布尔值。

JavaScript 在某些情况下也会执行自动（隐式）类型转换。

转换为字符串 (Converting to String)

全局函数 String() 可以将数字、布尔值和日期转换为字符串。

String(123);          // returns "123" (返回 "123")
String(100 + 23);     // returns "123" (返回 "123")
String(false);        // returns "false" (返回 "false")
String(true);         // returns "true" (返回 "true")
String(new Date());   // returns a string representation of the date, e.g., "Mon Jul 22 2024 ..." (返回日期的字符串表示，例如 "Mon Jul 22 2024 ...")

大多数值也有一个 toString() 方法：

(123).toString();        // "123"
false.toString();      // "false"
(new Date()).toString(); // String representation of the date (日期的字符串表示)

数字到字符串的方法，如 toExponential()、toFixed() 和 toPrecision()，提供对格式化更多的控制。

方法 (Method)	描述 (Description)
toExponential(fractionDigits?)	返回一个字符串，将数字四舍五入并使用指数表示法书写。
toFixed(digits?)	返回一个字符串，将数字四舍五入并书写指定数量的小数位。
toPrecision(precision?)	返回一个字符串，将数字书写指定长度（总有效数字位数）。

转换为数字 (Converting to Number)

全局函数 Number() 将值转换为数字。

包含有效数字表示的字符串（如 “3.14”）会转换为数字（如 3.14）。空字符串或仅包含空格的字符串转换为 0。其他非数字字符串转换为 NaN。

Number("3.14");    // returns 3.14 (返回 3.14)
Number(" ");       // returns 0 (返回 0)
Number("");         // returns 0 (返回 0)
Number("99 88");   // returns NaN (返回 NaN)
Number("abc");     // returns NaN (返回 NaN)
Number(false);     // returns 0 (返回 0)
Number(true);      // returns 1 (返回 1)
Number(new Date());// returns timestamp (milliseconds since epoch) (返回时间戳，自 epoch 起的毫秒数)

parseInt(string, radix) 和 parseFloat(string) 函数也用于将字符串转换为数字。对于 parseInt，总是指定基数（radix）（通常十进制使用 10）。

方法 (Method)	描述 (Description)
parseFloat(string)	解析一个字符串并返回一个浮点数。在第一个非数字字符处停止。
parseInt(string, radix?)	解析一个字符串并返回一个整数。应该指定基数（例如，十进制使用 10，二进制使用 2）。

一元加 (+) 操作符是将值转换为数字的一种简洁方式：

const y = "5";
const x = +y; // x is the number 5 (x 是数字 5)

const z = "John";
const w = +z; // w is NaN (w 是 NaN)

转换为布尔值 (Converting to Boolean)

全局函数 Boolean() 将值转换为布尔值。

转换为 false（假值，falsy values）的值有：false、0、-0、0n (BigInt 零)、"" (空字符串)、null、undefined 和 NaN。

所有其他值，包括任何对象、非空数组、非空字符串和非零数字，都转换为 true（真值，truthy values）。

Boolean(0);           // false
Boolean("");          // false
Boolean(null);        // false
Boolean(undefined);   // false
Boolean(NaN);         // false

Boolean(1);           // true
Boolean("hello");    // true
Boolean({});          // true
Boolean([]);          // true

自动（隐式）类型转换 (Automatic (Implicit) Type Conversion)

当操作符与混合类型一起使用时，JavaScript 通常会自动执行类型转换。

结果有时可能出乎意料：

5 + null;      // returns 5        (null is converted to 0) (null 转换为 0)
"5" + null;  // returns "5null"  (null is converted to "null") (null 转换为 "null")
"5" + 2;     // returns "52"     (2 is converted to "2") (2 转换为 "2")
"5" - 2;     // returns 3        ("5" is converted to 5) ("5" 转换为 5)
"5" * "2";   // returns 10       (both "5" and "2" converted to numbers) ("5" 和 "2" 都转换为数字)
5 == "5";    // returns true     (string "5" converted to number 5 for comparison with ==) (字符串 "5" 转换为数字 5 用于 == 比较)

为了避免使用 == 时出现意外行为，强烈建议使用严格相等运算符 ===，它检查值和类型的相等性，而不执行类型强制转换。

输出中的自动字符串转换 (Automatic String Conversion in Output)

当对象或变量在期望字符串的上下文中使用时（例如，设置 element.textContent），JavaScript 会自动调用其 toString() 方法（如果适用，也会调用 valueOf()）。

// Consider myVar assigned different values: (考虑 myVar 被赋予不同的值)
// let myVar = {name:"John"};  // .toString() typically converts to "[object Object]" (.toString() 通常转换为 "[object Object]")
// let myVar = [1,2,3,4];     // .toString() converts to "1,2,3,4" (.toString() 转换为 "1,2,3,4")
// let myVar = new Date();      // .toString() converts to a date string like "Mon Jul 22 2024..." (.toString() 转换为日期字符串，例如 "Mon Jul 22 2024...")
// let myVar = 123;           // .toString() converts to "123" (.toString() 转换为 "123")
// let myVar = true;          // .toString() converts to "true" (.toString() 转换为 "true")

// Example with DOM element: (使用 DOM 元素的例子)
// const demoElement = document.getElementById("demo");
// if (demoElement) demoElement.textContent = myVar;