JavaScript 基础数据类型转换教程

竹里

发布时间：2026-10-13| 4人浏览过

原创

掌握 JavaScript 的数据类型转换是编写稳定代码的基础。本文将系统讲解数值型、字符串型和布尔型之间的相互转换机制，涵盖显式转换函数与隐式运算技巧，帮助你避免常见的类型错误。

数值型转换为字符串类型

在 JavaScript 中，将数字转换为字符串主要有三种常用方式：调用 toString() 方法、使用全局函数 String() 以及通过加法运算符与空字符串拼接。

toString() 方法：这是最直接的转换方式，适用于非 null 和 undefined 的数值。
String() 强制转换：作为全局函数，它能安全地将任意值转为字符串，包括 null 和 undefined。
加法拼接：利用 JavaScript 的特性，当加号一侧为字符串时，另一侧会被隐式转为字符串。

// 1. 将数字型转换为字符串类型
var num = 10;

// 方式一：toString() 方法
var str = num.toString();
console.log(str); // "10"
console.log(typeof str); // string

// 方式二：String() 全局函数
console.log(String(num)); // "10"

// 方式三：加号拼接（推荐用于简单场景）
var str1 = num + '';
console.log(str1); // "10"
console.log(typeof str1); // string

字符串类型转换为数值型

将字符串转换为数值需要根据需求选择整数、浮点数或通用数值类型。常用的方法包括 parseInt()、parseFloat()、Number() 以及利用算术运算进行的隐式转换。

第1步：使用 parseInt() 获取整数

parseInt(string) 从字符串左侧开始解析，遇到非数字字符即停止，并返回已解析的整数值。它常用于提取混合字符串中的数字部分，如 "10px" 会转为 10。

// 2. 将字符串转换为数字型 - parseInt()
console.log(parseInt('15')); // 15
console.log(typeof parseInt('15')); // number

// 对于浮点数字符串，parseInt 会截断小数部分，只取整数
console.log(parseInt('3.14')); // 3
console.log(parseInt('3.94')); // 3
console.log(parseInt(3.94)); // 3

第2步：使用 parseFloat() 获取浮点数

parseFloat(string) 类似 parseInt，但能识别第一个小数点，并保留其后的所有有效数字。如果字符串以 "0x" 开头，也会被当作整数解析。

// parseFloat() 保留小数部分
console.log(parseFloat('3.14')); // 3.14
console.log(parseFloat('3'));   // 3 (没有小数则返回整数形式)

第3步：使用 Number() 进行严格转换

Number() 是更严格的转换函数。只有整个字符串完全能被解析为数字时才会成功，否则返回 NaN。它适用于已知内容为纯数字的场景。

// Number() 强制转换
console.log(Number('12')); // 12
console.log(typeof Number('12')); // number
// 注意：Number('12abc') 会返回 NaN

第4步：利用算术运算隐式转换

通过加减乘除运算，JavaScript 会自动尝试将操作数转换为数值。减去 0、乘以 1 或除以 1 是常用的快捷技巧，但需注意减法和乘法对非数字字符的处理差异。

// 利用算术运算符进行隐式转换
console.log('12' - 0);      // 12
console.log('123' - '120'); // 3 (两个字符串相减也会先转数字)
console.log('123' * 1);    // 123
console.log('123' / 1);    // 123

转换为布尔型

在逻辑判断中，经常需要将其他类型转换为布尔值。JavaScript 使用 Boolean() 函数进行显式转换。其核心规则如下：

转换为 false 的值：空字符串 ' '、0、NaN、null、undefined。
转换为 true 的值：除了上述“假值”以外的所有值，包括非空字符串、非零数字、对象等。

// 3. 转换为布尔型
console.log(Boolean(''));       // false (空字符串)
console.log(Boolean(' '));      // true (包含空格是非空字符串)
console.log(Boolean(0));        // false
console.log(Boolean(NaN));      // false
console.log(Boolean(null));     // false
console.log(Boolean(undefined));// false

console.log(Boolean('aniu'));   // true (非空字符串)
console.log(Boolean(15));       // true (非零数字)