[JavaScript] 型態轉換
JavaScript 資料的型態
JavaScript的資料有五種不同的形態:
-
string-字串
-
number-數字
-
boolean-布林
-
object-物件
-
function-函數
JavaScript物件的三種型態:
-
Object-物件
-
Date-日期
-
Array-陣列
JavaScript兩種不為數值得型態:
-
null-空值
-
undefined-無法定義
typeof 返回資料型態
使用typeof來查看資料的值型態為何:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML=
typeof "Berry" + "<br>" +
typeof 3.14 + "<br>" +
typeof NaN + "<br>" +
typeof false + "<br>" +
typeof [1, 2, 3, 4] + "<br>" +
typeof { name: 'Berry', age: 18 } + "<br>" +
typeof new Date() + "<br>" +
typeof function () { } + "<br>" +
typeof myCar + "<br>" +
typeof null;
</script>
</body>
</html>
"Berry" 為字串。
3.14、NaN 為數字。
false 為布林值。
[1, 2, 3, 4]、{ name: 'Berry', age: 18 }、new Date()、null 為物件。
function () { } 為函數。
myCar 該變數並無定義，顯示無法定義。
constructor 屬性
使用constructor屬性查看資料的構造函數:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML=
"Berry".constructor + "<br>" +
(3.14).constructor + "<br>" +
false.constructor + "<br>" +
[1, 2, 3, 4].constructor + "<br>" +
{ name: 'Berry', age: 18 }.constructor + "<br>" +
new Date().constructor + "<br>" +
function () { }.constructor;
</script>
</body>
</html>
"Berry" 構造函數為function String() { [native code] }
(3.14) 構造函數為function Number() { [native code] }
false 構造函數為function Boolean() { [native code] }
[1, 2, 3, 4] 構造函數為function Array() { [native code] }
{ name: 'Berry', age: 18 } 構造函數為function Object() { [native code] }
new Date() 構造函數為function Date() { [native code] }
function () { } 構造函數為function Function() { [native code] }
應用constructor屬性，確認物件是否為陣列型態:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function isArray(x) {
if (x.constructor.toString().indexOf("Array") > -1) {
return "變數為陣列";
}
else {
}
return "變數不為陣列";
}
document.getElementById("demo").innerHTML = isArray(fruits);
</script>
</body>
</html>
var fruits = ["Banana", "Orange", "Apple", "Mango"] 定義變數fruits為陣列。
function isArray(x) 定義一個函數，與參數x。
if (x.constructor.toString().indexOf("Array") > -1)
將參數x使用constructor來顯示出構造函數，並以indexOf("Array")找出Array文字為第幾個字。
若參數x為陣列字，構造函數便會是function Array() { [native code] }。便能找出Array文字位於第9個，顯示大於-1。
isArray(fruits) 依照函數判斷，返回是否為陣列的文字。
JavaScript型態轉換
JavaScript可以由兩種方式來轉換資料的型態:
-
JavaScript的function做轉換
-
JavaScript自動轉換
數字轉為字串
String()方法可以轉換型態為字串。可用於任何型態的數字、文字、變數、表達式。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 123;
document.getElementById("demo").innerHTML =
String(x) + "<br>" +
String(123) + "<br>" +
String(100 + 23);
</script>
</body>
</html>
var x = 123 定義變數x為字串"123"。
String(x) 將變數x轉為字串"123"。
String(123) 將數字123轉為字串"123"。
String(100 + 23) 將表達式100+23計算後轉為字串"123"。
toString()方法轉為字串型態:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 123;
document.getElementById("demo").innerHTML =
x.toString() + "<br>" +
(123).toString() + "<br>" +
(100 + 23).toString();
</script>
</body>
</html>
var x = 123 定義變數x為字串"123"。
x.toString() 將變數x轉為字串"123"。
(123).toString() 將數字123轉為字串"123"。
(100 + 23).toString() 將表達式100+23計算後轉為字串"123"。
布林值轉為字串
String()方法可以轉換型態為字串，除了上述的數字、文字、變數、表達式，也能夠將布林值(Booleans)轉為字串。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
String(false) + "<br>" +
String(true);
</script>
</body>
</html>
String(false) 返回字串"false"。
String(true) 返回字串"true"。
toString()方法轉為字串型態:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
false.toString() + "<br>" +
true.toString();
</script>
</body>
</html>
false.toString() 返回字串"false"。
true.toString() 返回字串"true"。
日期轉為字串
String()方法可以轉換型態，將日期轉為字串。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = String(Date());
</script>
</body>
</html>
String(Date()) 將日期型態轉為字串型態。
toString()方法轉為字串型態:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Date().toString();
</script>
</body>
</html>
Date().toString() 將日期型態轉為字串型態。
字串轉為數字
Number()方法可以將字串轉為數字。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Number("3.14") + "<br>" +
Number(" ") + "<br>" +
Number("") + "<br>" +
Number("Berry");
</script>
</body>
</html>
Number("3.14") 將字串"3.14"轉為數字3.14。
Number(" ") 將空字串" "轉為數字0。
Number("") 將空字串""轉為數字0。
Number("Berry") 將字串"Berry"轉為數字，因Berry不為數字，因此顯示NaN(Not A Number)。
運算式變更型態
JavaScript做運算時，會自動將變數做型態的轉換。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x="5";
var y=+x;
document.getElementById("demo").innerHTML =
"變數x的值為" + x + ",型態為" + typeof x + "<br>" +
"變數y的值為" + y + ",型態為" + typeof y;
</script>
</body>
</html>
var x="5" 定義變數x為字串"5"，最後顯示的值為5，型態為字串string。
var y=+x 定義變數y為指派運算+x，最後顯示的值為5，型態為數字number。
若變數無法轉型時，其值會顯示為NaN。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x="Berry";
var y=+x;
document.getElementById("demo").innerHTML =
"變數x的值為" + x + ",型態為" + typeof x + "<br>" +
"變數y的值為" + y + ",型態為" + typeof y;
</script>
</body>
</html>
var x="Berry" 定義變數x為字串"Berry"，最後顯示的值為Berry，型態為字串string。
var y=+x 定義變數y為指派運算+x，英文字Berry無法做運算，最後顯示的值為NaN，型態為數字number。
當JavaScript以不同型態的資料做運算時，會將運算的值適時的轉為較正確的型態，再做運算:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
(5 + null) + "<br>" +
("5" + null) + "<br>" +
("5" + 2) + "<br>" +
("5" - 2) + "<br>" +
("5" * "2") + "<br>" +
("5" / "2");
</script>
</body>
</html>
(5 + null) 數字5+null。null為空值，轉換成數字型態為0。表達式為5+0，結果為數字5。
("5" + null) 字串"5"+null。null為空值，轉換字串型態為"null"。表達式為"5"+"null"，結果為字串"5null"。
("5" + 2) 字串"5"+數字2。數字2轉換成字串型態"2"。表達式為"5"+"2"，結果為數字"52"。
("5" - 2) 字串"5"-數字2。字串"5"轉換成數字型態5。表達式為5-2，結果為數字3。
("5" * "2") 字串"5"*字串"2"。字串"5"與字串"2"轉換成數字型態5、2。表達式為5*2，結果為數字10。
("5" / "2") 字串"5"/字串"2"。字串"5"與字串"2"轉換成數字型態5、2。表達式為5/2，結果為數字2.5。
布林值轉為數字
Number()方法將布林值轉為數字型態:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Number(false) + "<br>" +
Number(true);
</script>
</body>
</html>
Number(false) 布林值false轉為數字為0。
Number(true) 布林值true轉為數字為1。
日期轉為數字
Number()方法將日期轉為數字型態:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var D = new Date();
document.getElementById("demo").innerHTML = Number(D);
</script>
</body>
</html>
var D = new Date() 定義變數D為一個日期物件。
Number(D) 將變數D從日期型態轉為數字型態。
getTime()方法將日期轉為數字型態:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var D = new Date();
document.getElementById("demo").innerHTML = D.getTime();
</script>
</body>
</html>
var D = new Date() 定義變數D為一個日期物件。
D.getTime() 將變數D從日期型態轉為數字型態。
輸出時的型態
JavaScript在輸出物件、數字、布林或變數的值時，會自動將資料轉為字串型態:
document.getElementById("demo").innerHTML = myVar;
// if myVar = {name:"Fjohn"} // toString converts to "[object Object]"
// if myVar = [1,2,3,4] // toString converts to "1,2,3,4"
// if myVar = new Date() // toString converts to "Fri Jul 18 2014 09:08:55 GMT+0200"
// if myVar = 123 // toString converts to "123"
// if myVar = true // toString converts to "true"
// if myVar = false // toString converts to "false"