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 中可用的不同資料型別的更多資訊。