JS 类型转换

网站

JavaScript 类型转换

类型转换 | MDN

JavaScript 数据类型和数据结构 | MDN

引入

JS 中的数据有不同类型，例如字符串、数字、布尔值、null、undefined。

当不同类型的数据一起运算或比较时，JS 可能会自动转换类型。为了减少意外结果，就需要理解类型转换。

正文

定义

定义

JS 类型转换指的是把一种数据类型转换成另一种数据类型，常见转换包括转字符串、转数字、转布尔值。

类型转换分两种：

• 显式转换：自己主动调用方法转换
• 隐式转换：JS 在运算或比较时自动转换

初学时建议优先使用显式转换，因为代码更清楚。

常见类型

JS 中常见基础类型：

类型	示例
string	"hello"
number	100、3.14
boolean	true、false
undefined	undefined
null	null
symbol	Symbol()
bigint	123n

查看数据类型常用 typeof。

console.log(typeof "hello");
console.log(typeof 100);
console.log(typeof true);

输出结果：

"string"
"number"
"boolean"

转成字符串

常见方式：

写法	作用
String(value)	转成字符串
value.toString()	调用值的字符串方法
value + ""	通过字符串拼接隐式转换

String()

String() 可以把值转成字符串。

let age = 18;
let text = String(age);
 
console.log(text);
console.log(typeof text);

输出结果：

"18"
"string"

String() 对 null 和 undefined 也能正常转换。

console.log(String(null));
console.log(String(undefined));

输出结果：

"null"
"undefined"

toString()

很多值都有 toString() 方法。

let num = 100;
 
console.log(num.toString());

但是 null 和 undefined 不能直接调用 toString()。

let value = null;
 
console.log(value.toString());

这种写法会报错。

所以不确定值是不是 null 或 undefined 时，使用 String(value) 更安全。

字符串拼接转换

只要 + 的一边是字符串，通常会发生字符串拼接。

console.log(100 + "px");
console.log(true + "");

输出结果：

"100px"
"true"

这种写法很常见，但有时候会让结果不直观。

转成数字

常见方式：

写法	作用
Number(value)	转成数字
parseInt(value)	转成整数
parseFloat(value)	转成小数
+value	使用一元加号转换成数字

Number()

Number() 用于把值转成数字。

console.log(Number("123"));
console.log(Number("3.14"));
console.log(Number(true));
console.log(Number(false));

输出结果：

123
3.14
1
0

如果字符串不能转换成有效数字，结果是 NaN。

console.log(Number("hello"));

输出结果：

NaN

NaN 表示不是一个有效数字。

parseInt()

parseInt() 用于解析整数。

console.log(parseInt("100px"));
console.log(parseInt("3.14"));

输出结果：

100
3

parseInt() 会从字符串开头开始解析，遇到不能解析的字符就停止。

如果开头就不能解析，结果是 NaN。

console.log(parseInt("px100"));

输出结果：

NaN

实际使用时，建议写上进制参数 10。

console.log(parseInt("100", 10));

parseFloat()

parseFloat() 用于解析小数。

console.log(parseFloat("3.14px"));
console.log(parseFloat("100"));

输出结果：

3.14
100

它和 parseInt() 类似，也是从字符串开头开始解析。

转成布尔值

Boolean() 用于把值转成布尔值。

console.log(Boolean(1));
console.log(Boolean(0));
console.log(Boolean("hello"));
console.log(Boolean(""));

输出结果：

true
false
true
false

在 JS 中，有些值会被转换成 false，其他大多数值会被转换成 true。

常见假值：

值	说明
false	布尔值 false
0	数字 0
-0	负 0
0n	BigInt 的 0
""	空字符串
null	空值
undefined	未定义
NaN	不是有效数字

其他大多数值都是真值。

console.log(Boolean("0"));
console.log(Boolean("false"));
console.log(Boolean([]));
console.log(Boolean({}));

输出结果都是：

true

注意："0" 和 "false" 是非空字符串，所以是真值。

隐式转换

隐式转换是 JS 自动进行的类型转换。

它经常出现在运算、比较、条件判断中。

+ 运算中的转换

+ 比较特殊。

如果两边都是数字，就做加法。

console.log(1 + 2);

输出结果：

3

如果其中一边是字符串，通常会变成字符串拼接。

console.log("1" + 2);
console.log(1 + "2");

输出结果：

"12"
"12"

这也是 JS 中很常见的坑。

-、*、/ 运算中的转换

-、*、/ 通常会尝试把值转换成数字。

console.log("10" - 2);
console.log("10" * 2);
console.log("10" / 2);

输出结果：

8
20
5

如果无法转换成数字，就得到 NaN。

console.log("hello" - 1);

输出结果：

NaN

比较中的转换

== 会进行隐式类型转换。

console.log(1 == "1");

输出结果：

true

=== 不会进行类型转换，要求值和类型都相同。

console.log(1 === "1");

输出结果：

false

实际写代码时，建议优先使用 === 和 !==。

这样判断更严格，也更不容易出意外。

条件判断中的转换

if 判断中，条件会被转换成布尔值。

let name = "Tom";
 
if (name) {
  console.log("有名字");
}

这里 name 是非空字符串，会被当成 true。

空字符串会被当成 false。

let title = "";
 
if (title) {
  console.log("有标题");
} else {
  console.log("没有标题");
}

例子

表单输入转换成数字

表单输入框拿到的值通常是字符串。

<input class="age" value="18">

const input = document.querySelector(".age");
const age = Number(input.value);
 
console.log(age + 1);

如果不转换，input.value + 1 可能会变成字符串拼接。

console.log(input.value + 1);

结果可能是：

"181"

判断用户是否输入内容

const name = "";
 
if (!name) {
  console.log("请输入用户名");
}

空字符串 "" 会被转换成 false。

!name 就表示没有输入内容。

处理价格字符串

const price = "99.5元";
const number = parseFloat(price);
 
console.log(number);

输出结果：

99.5

如果字符串是从数字开头的，parseFloat() 可以解析出前面的数字部分。

常见写法

写法	作用
String(value)	转成字符串
Number(value)	转成数字
Boolean(value)	转成布尔值
parseInt(value, 10)	解析整数
parseFloat(value)	解析小数
typeof value	查看数据类型
===	严格相等，不自动转换类型
!==	严格不相等，不自动转换类型

特点

• 类型转换可以把一种数据类型变成另一种数据类型
• 显式转换是自己主动转换，代码更清楚
• 隐式转换是 JS 自动转换，容易出现意外结果
• + 遇到字符串时常常会变成字符串拼接
• -、*、/ 通常会尝试转成数字
• if 条件会自动转成布尔值
• == 会隐式转换，=== 不会隐式转换

注意事项

• 表单输入框的值通常是字符串，做计算前要先转数字
• 不确定值是否为 null 或 undefined 时，转字符串优先用 String()
• 判断相等时，优先使用 ===
• 不要依赖复杂的隐式转换，代码会变得难读
• NaN 表示不是有效数字，可以用 Number.isNaN() 判断
• "0"、"false"、[]、{} 都是真值，不要误以为它们是 false

理解

可以把 JS 类型转换理解为：让数据变成当前操作需要的类型。

例如表单输入拿到的是字符串，但计算年龄时需要数字，所以要用 Number() 转换。

隐式转换虽然方便，但有时候会让结果很奇怪，比如 "1" + 2 得到的是 "12"。

所以我的理解是：能明确转换就明确转换，能用 === 就不用 ==，不要让 JS 自己猜太多。

引出

理解类型转换之后，可以继续学习 JS 数据类型、JS 布尔值 和 JS 运算符，这些内容经常一起影响代码结果。