[JavaScript] 型態轉換

[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"

 

 END 

回目錄