JavaScript 数据类型详解:从基础到进阶，一篇全搞定!

JavaScript 是一种动态类型语言，这意味着变量的数据类型是在运行时自动确定的。理解数据类型、如何判断它们以及如何进行类型转换是掌握 JavaScript 的关键之一。

本文将带你全面了解 JavaScript 中的数据类型、类型判断方法以及类型转换技巧，并附上示例代码帮助你加深理解。

一、JavaScript 中的基本数据类型

JavaScript 有 7 种基本数据类型（Primitive Data Types）和 1 种复杂数据类型（Object）。我们先来看基本类型：

1. 基本数据类型（Primitive Types）

Js
let a; // undefined
let b = null; // null
let c = true; // boolean
let d = 42; // number
let e = "Hello"; // string
let f = Symbol("foo"); // symbol
let g = 9007199254740991n; // bigint

2. 复杂数据类型（Reference Type）

object：对象、数组、函数等都属于对象类型。

Js
let obj = { name: "Tom" }; // 对象
let arr = [1, 2, 3]; // 数组
let func = function() {}; // 函数

二、数据类型的判断方法

在 JavaScript 中，判断数据类型的方法主要有以下几种：

1. typeof 运算符

适用于判断基本类型，但不能区分 null 和 object。

Js
console.log(typeof 123); // number
console.log(typeof "abc"); // string
console.log(typeof true); // boolean
console.log(typeof undefined); // undefined
console.log(typeof Symbol()); // symbol
console.log(typeof 123n); // bigint
console.log(typeof {}); // object
console.log(typeof null); // object 
console.log(typeof function(){}); // function 
 注意：typeof null 返回 "object"，这是历史遗留问题。

2. instanceof 运算符

用于检测某个对象是否是某个构造函数的实例。

Js
console.log([] instanceof Array); // true
console.log({} instanceof Object); // true
console.log(function(){} instanceof Function); // true

instanceof 只能用于判断引用类型。

3. Object.prototype.toString.call()

这是最通用、最准确的类型判断方式，可以正确识别所有内置类型。

Js
function getType(value) {
return Object.prototype.toString.call(value).slice(8, -1);
}
console.log(getType(123)); // Number
console.log(getType("abc")); // String
console.log(getType(true)); // Boolean
console.log(getType(undefined)); // Undefined
console.log(getType(null)); // Null
console.log(getType({})); // Object
console.log(getType([])); // Array
console.log(getType(function(){})); // Function
console.log(getType(Symbol())); // Symbol
console.log(getType(123n)); // BigInt

三、数据类型转换（Type Conversion）

JavaScript 是动态类型语言，支持隐式和显式类型转换。

1. 显式类型转换（Explicit）

转换为字符串

Js
String(123); // "123"
String(true); // "true"
String(null); // "null"
String(undefined); // "undefined"

转换为数字

Js
Number("123"); // 123
Number("123a"); // NaN
Number(true); // 1
Number(false); // 0
Number(null); // 0
Number(undefined); // NaN

转换为布尔值

Js
Boolean(0); // false
Boolean(""); // false
Boolean(null); // false
Boolean(undefined); // false
Boolean(NaN); // false
Boolean(1); // true
Boolean("abc"); // true

2. 隐式类型转换（Implicit）

JavaScript 在运算过程中会自动进行类型转换，例如：

Js
console.log(1 + "2"); // "12" （数字转字符串）
console.log("2" * "3"); // 6 （字符串转数字）
console.log(+"123"); // 123 （字符串转数字）
console.log(!!"hello"); // true （字符串转布尔）

四、总结与建议

五、练习题（附答案）

Q1：以下代码输出什么？

Js
console.log(typeof typeof 123);

 答案："string"

解析：typeof 123 是 "number"，再 typeof "number" 是 "string"。

Q2：以下代码输出什么？

Js
console.log(Object.prototype.toString.call(Math));

答案："[object Math]"

Q3：以下代码输出什么？

Js
console.log([] + []);

 答案：""

解析：空数组转换为字符串是空字符串，相加还是空字符串。

六、结语

掌握 JavaScript 的数据类型、类型判断和类型转换机制，是写出健壮、可维护代码的基础。希望本文能帮你打下坚实的基础，让你在开发中游刃有余！