JS类型转换 – JavaScript高级教程

上一章JavaScript教程请查看：JS数学操作

在本教程中，你将学习如何在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 
alert(1 + false);  // : 1 
alert(1 + undefined);  // : NaN
alert(3 + null);  // : 3
alert("3" + null);  // : "3null"
alert(true + null);  // : 1
alert(true + undefined);  // : NaN

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

值到数字的转换

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

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

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

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

如果字符串不是有效的数字，结果将是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); // string "true"
alert(typeof str); // : string

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(); // string "123"
alert(typeof str); // : string

将值转换为布尔值

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

直观上为空的值，如0、null、false、undefined、NaN或空字符串(“”)将变为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”的字符串返回true，而对带0和false的字符串返回false。

注意：在一些编程语言(即PHP)中，字符串“0”被视为false，但在JavaScript中，非空字符串总是为真。

对象到基本类型的转换

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

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

var date1 = new Date(2030, 5, 24);
alert(date1); 

var date2 = new Date(2025, 8, 15);
var time = date2 - date1;
alert(time) 

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

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

var d = new Date(2018, 5, 24);
d.toDateString(); 
d.valueOf(); 

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

使用运算符进行类型转换

某些JavaScript操作符，如+和-操作符，也可用于执行类型转换，如下例所示:

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

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

var x = "15"; // x => a string
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中可用的不同数据类型的信息。