JavaScript 类型转换

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

自动类型转换

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

alert("3" - 2);  // Outputs: 1 
alert("3" + 2);  // Outputs: "32" (because + is also concatenation operator)
alert(3 + "2");  // Outputs: "32"
alert("3" * "2");  // Outputs: 6
alert("10" / "2");  // Outputs: 5
alert(1 + true);  // Outputs: 2 (because true is converted to 1)
alert(1 + false);  // Outputs: 1 (because false is converted to 0)
alert(1 + undefined);  // Outputs: NaN
alert(3 + null);  // Outputs: 3 (because null is converted to 0)
alert("3" + null);  // Outputs: "3null"
alert(true + null);  // Outputs: 1
alert(true + undefined);  // Outputs: NaN

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

将值转换为数字

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

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

var str = "123";
alert(typeof str); // Outputs: string

var num = Number(str); // Becomes a number 123
alert(typeof num); // Outputs: number

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

Number("10.5")  // returns 10.5
Number(true)  // returns 1
Number(false)  // returns 0
Number(null)  // returns 0
Number(" 123 ")  // returns 123
Number(" ")  // returns 0
Number("")  // returns 0
Number("123e-1")  // returns 12.3
Number("0xFF") // returns 255 (hexadecimal representation)
Number("undefined")  // returns NaN
Number("null")  // returns NaN
Number("Hello World!")  // returns NaN

将值转换为字符串

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

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

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

var str = String(bool); // Becomes a string "true"
alert(typeof str); // Outputs: string

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

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

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

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

var str = num.toString(); // Becomes a string "123"
alert(typeof str); // Outputs: string

将值转换为布尔值

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

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

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

如果你仔细看到这个例子,你会发现字符串- 0 ,字符串-falseBoolean() 方法返回 true ,而 0 和 false 的 Boolean() 方法返回 false 值。

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

对象对原始数据类型的转换

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

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

var date1 = new Date(2018, 5, 24);
alert(date1); // Display date string like: Sun Jun 24 2018 00:00:00

var date2 = new Date(2025, 8, 15);
var time = date2 - date1;
alert(time) // Display time in milliseconds: 228096000000

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

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

var d = new Date(2018, 5, 24);
d.toDateString(); // returns date like Sun Jun 24 2018 00:00:00
d.valueOf(); // returns 1529778600000

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

使用运算符键入转换

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

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

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

var x = "15"; // x is a string
var y = x - 0;
alert(typeof(y)); // Outputs: number
alert(y); // Outputs: 15

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

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

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