JAVASCRIPT 基础教程
JAVASCRIPT & DOM
JAVASCRIPT & BOM
JAVASCRIPT 高级教程
JAVASCRIPT 示例
JAVASCRIPT 参考

JavaScript 类型转换

在本教程中,您将学习如何在 JavaScript 中转换值的数据类型。

自动类型转换

大多数情况下,JavaScript 在表达式中使用时会自动将值从一种数据类型转换为另一种数据类型。 例如,在数学运算中,值会自动转换为数字。 但是,最终结果并不总是您所期望的:

alert("3" - 2);  // 输出: 1 
alert("3" + 2);  // 输出: "32" (因为 + 也是连接运算符)
alert(3 + "2");  // 输出: "32"
alert("3" * "2");  // 输出: 6
alert("10" / "2");  // 输出: 5
alert(1 + true);  // 输出: 2(因为 true 转换为 1)
alert(1 + false);  // 输出: 1(因为 false 被转换为 0)
alert(1 + undefined);  // 输出: NaN
alert(3 + null);  // 输出: 3(因为 null 被转换为 0)
alert("3" + null);  // 输出: "3null"
alert(true + null);  // 输出: 1
alert(true + undefined);  // 输出: NaN

在某些情况下,我们需要手动将值从一种数据类型转换为另一种数据类型。 JavaScript 提供了许多不同的方法来执行此类数据类型转换任务。 在接下来的部分中,我们将详细讨论这些方法。

将值转换为数字

当我们从基于字符串的源(如文本输入)读取值时,通常需要进行数字转换,但我们希望输入一个数字,或者希望将其视为一个数字。

在这种情况下,您可以使用全局方法 Number() 将字符串转换为数字。

var str = "123";
alert(typeof str); // 输出: 字符串

var num = Number(str); // 变成数字 123
alert(typeof num); // 输出: 数字

如果字符串不是有效数字,则结果将为 NaN。 空字符串转换为 0。

Number("10.5")  // 返回 10.5
Number(true)  // 返回 1
Number(false)  // 返回 0
Number(null)  // 返回 0
Number(" 123 ")  // 返回 123
Number(" ")  // 返回 0
Number("")  // 返回 0
Number("123e-1")  // 返回 12.3
Number("0xFF") // 返回 255(十六进制表示)
Number("undefined")  // 返回 NaN
Number("null")  // 返回 NaN
Number("Hello World!")  // 返回 NaN

将值转换为字符串

同样,您可以使用 String() 方法将值转换为字符串。

以下示例将向您展示如何将布尔值转换为字符串。

var bool = true;
alert(typeof bool); // 输出: boolean

var str = String(bool); // 变成字符串 "true"
alert(typeof str); // 输出: 字符串 

String() 方法可用于任何类型的数字、变量或表达式:

String(10.5)  // 返回 "10.5"
String(123)  // 返回 "123"
String(100 + 23)  // 返回 "123"
String(true)  // 返回 "true"
String(false)  // 返回 "false"
String(123e-1)  // 返回 "12.3"
String(0xFF) // 返回 "255"
String(undefined)  // 返回 "undefined"
String(null)  // 返回 "null"

另一种将数字转换为字符串的技术是使用 toString() 方法:

var num = 123;
alert(typeof num); // 输出: number

var str = num.toString(); // 变成一个字符串 "123"
alert(typeof str); // 输出: string

将值转换为布尔值

布尔转换也非常简单。 您可以使用 Boolean() 方法将任何值转换为布尔值(即 truefalse)。

直观上为空的值,例如 0nullfalseundefinedNaN 或空字符串 ("") 变为 false。 其他值变为 true,如下例所示:

Boolean(0) // 返回 false
Boolean(null)  // 返回 false
Boolean(false)  // 返回 false
Boolean(undefined)  // 返回 false
Boolean(NaN)  // 返回 false
Boolean("") // 返回 false
Boolean("0") // 返回 true
Boolean(1) // 返回 true
Boolean(true) // 返回 true
Boolean("false") // 返回 true
Boolean("Hello World!") // 返回 true
Boolean(" ") // 返回 true

如果您仔细查看该示例,您会发现 Boolean() 方法为字符串为零"0"和字符串"false"返回 true,而它为值 0 和 false 返回 false

注意: 在某些编程语言(即 PHP)中,字符串"0"被视为 false。 但在 JavaScript 中,非空字符串始终是 true


对象到原始类型转换

到目前为止,我们看到的所有转换都是在原始类型(一次只能保存一个值的数据类型)上执行的。 但是对于复杂的数据类型(例如对象)会发生什么,让我们看看。

当我们尝试打印像 alert(obj)document.write(obj) 这样的对象时,JavaScript 会自动执行对象到字符串的转换。 同样,当我们尝试添加或减去对象或应用数学函数(例如,添加或减去日期对象)时,会自动执行对象到数字的转换。 这是一个例子:

var date1 = new Date(2018, 5, 24);
alert(date1); // 显示日期字符串如:Sun Jun 24 2018 00:00:00

var date2 = new Date(2025, 8, 15);
var time = date2 - date1;
alert(time) // 以毫秒为单位显示时间: 228096000000

您还可以使用 toString() 方法手动执行对象到字符串的转换,该方法返回对象的字符串表示形式。 此外,您可以对某些对象(例如 Date)使用 valueOf() 方法来执行对象到数字的转换。 这是一个例子:

var arr = [1, 2, 3];
arr.toString(); // 返回 "1,2,3"

var d = new Date(2018, 5, 24);
d.toDateString(); // 返回日期如 Sun Jun 24 2018 00:00:00
d.valueOf(); // 返回 1529778600000

注意: 对象到布尔值的转换无关紧要,因为所有对象(包括数组和函数)在布尔上下文中都是真实的。 所以只有字符串和数字的转换。


使用运算符进行类型转换

某些 JavaScript 运算符,例如 +- 运算符,也可用于执行类型转换,如下例所示:

var x = "10"; // x is a string
var y = +x;
alert(typeof(y)); // 输出: number
alert(y); // 输出: 10

var x = 10; // x 是一个数字
var y = x + "";
alert(typeof(y)); // 输出: string
alert(y); // 输出: 10

var x = "15"; // x 是一个字符串
var y = x - 0;
alert(typeof(y)); // 输出: number
alert(y); // 输出: 15

var x = "123";
alert(typeof(!!x)); // 输出: boolean
alert(!!x); // 输出: true

var x = "Hello World!";
var y = +x;
alert(typeof(y));// 输出: number
alert(y); // 输出: NaN

我们希望您已经了解数据类型转换的基础知识。 请查看 JavaScript 数据类型 章节,了解更多关于 JavaScript 中可用的不同数据类型的信息。

Advertisements