Web前端入门第 57 问：JavaScript 数据类型与类型转换

前端开发 2025年06月03日09:36

在程序语言中，数据类型是基础，一切程序都是建立在基础数据之上。

如果说程序如同万丈高楼平地起，那么数据类型就像沙、石、钢筋、水泥等等最基础的原料。一样的高楼，不同的人，用相同的原料，造的方法也会有千般变化。

在 JS 中，数据类型可以分为原始类型和对象类型。

原始类型
直接存储值，不可变（值的地址不可变），共 7 种：

1、number 数值类型，包括整数、浮点数、Infinity、NaN。

const num1 = 123;
const num2 = 123.456;
const num3 = Infinity;
const num4 = NaN;
const num5 = new Number(456); // 使用构造函数声明，获得一个 Number 对象
console.log(typeof num5); // object
const num6 = Number(456); // 函数式声明 Number 类型
console.log(typeof num6); // number
2、string 字符串类型。单双引号声明的字符串不允许换行，可使用反引号申明多行字符串和模版字符串。

const bool1 = true;
const bool2 = false;
const bool3 = new Boolean(true);
console.log(typeof bool3); // object
const bool4 = Boolean(true);
console.log(typeof bool4); // boolean
4、null 表示空值。

const empty = null;
console.log(typeof empty); // object
5、undefined 未定义的值。

let u1; // 未声明变量，默认为 undefined
const u2 = undefined; // 显示使用 undefined 声明变量
6、symbol 唯一且不可变的值（符号）。就算使用 Symbol 声明的内容一样，但是两个变量其实是不相等的！！

const sym1 = Symbol('前端路引'); // 带描述的符号
const sym2 = Symbol('前端路引');
console.log(sym1 === sym2); // false
const sym3 = Symbol.for('前端路引'); // 全局符号
const sym4 = Symbol.for('前端路引');
console.log(sym3 === sym4); // true
console.log(Symbol.keyFor(sym3)); // 前端路引
const sym5 = Symbol(); // 不带描述的符号
7、bigint 大整数（以 n 结尾，如 123n），一般用于表示大于 2^53 - 1 的整数，ES2020+ 引入的新的数据类型，使用时需注意兼容性。

const big1 = 123n;
const big2 = BigInt(123);
console.log(big1 === big2); // true
console.log(typeof big1); // bigint
console.log(big1 === 123) // false
console.log(big1 === 123n); // true
对象类型
存储引用（内存地址），可变，包含所有非原始类型的值：

1、普通对象

const arr1 = []; // 空数组
const arr2 = [1, 2, 3]; // 带元素的数组
const arr3 = new Array();
const arr4 = Array(10).fill('前端路引'); // 创建一个长度为 10 的数组，并填充内容
3、函数

类型转换
JS 的类型转换分为隐式转换（明确表明由 A 转为 B）和显式转换（自动发生的类型转换）。

显式转换
通过对象方法强制转换：

1、转字符串

String(123); // "123"
[1,2].toString(); // "1,2"
2、转数字

Number("123"); // 123
Number("abc"); // NaN
parseInt("12px");// 12
3、转布尔

Boolean(""); // false
Boolean({}); // true
隐式转换
一半多发生于运算符，比如：

1、字符串拼接

console.log('1' + 1); // 11
console.log(1 + '1'); // 11
2、数学运算

console.log('1' - 1); // 0
console.log(1 - '1'); // 0
console.log('1' * 1); // 1
console.log(1 * '1'); // 1
console.log('1' / 1); // 1
console.log(1 / '1'); // 1
3、逻辑运算

if (0) { // 0 为 false，将不会执行代码块
console.log('0');
}
常见转换规则
原始值转字符串转数字转布尔值
true "true" 1 true
false "false" 0 false
0 "0" 0 false
"" "" 0 false
"123" "123" 123 true
null "null" 0 false
undefined "undefined" NaN false
NaN "NaN" NaN false
[] "" 0 true
[5] "5" 5 true
{} "[object Object]" NaN true
常见陷阱与最佳实践
1、== vs ===