本站電子書

您可以在這些電子書店找到本站電子書: Google Play 圖書iBooks StoreHyReadReadmooPubu
===>>>本站推出學習遊戲意見調查<<<===《如何自學程式設計》入選 Google Play 台灣地區2016年度最佳書籍

JavaScript 快速導覽 - 型態轉換

JavaScript 會自動偵測字面常數 (literal) 的資料型態 (data type) ,指派到哪個變數 (variable) ,該變數也會具有與字面常數相同的資料型態。



由於很多情況下需要轉換原本變數的資料型態,通常可利用全域函數 (global function) 進行資料型態的轉換,例如
function run() {
    var c = document.getElementById("content");
    var n1 = document.createElement("p");
    var n2 = document.createElement("p");
    var n3 = document.createElement("p");
    var n4 = document.createElement("p");
    var n5 = document.createElement("p");
    var t1 = "22";
    var t2 = "22d";
    var t3 = 22;
    var t4 = 0;
    var t5 = false;
    n1.appendChild(document.createTextNode(Number(t1)));
    c.appendChild(n1);
    n2.appendChild(document.createTextNode(Number(t2)));
    c.appendChild(n2);
    n3.appendChild(document.createTextNode(Boolean(t3)));
    c.appendChild(n3);
    n4.appendChild(document.createTextNode(Boolean(t4)));
    c.appendChild(n4);
    n5.appendChild(document.createTextNode(typeof(String(t5))));
    c.appendChild(n5);
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:run16.js
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2010 年 11 月 */


利用以下的 HTML 文件載入
<html>

<head>
<title>JavaScript Demo</title>
<script src="run16.js" type="text/javascript"></script>
</head>

<body>
<input id="b" type="button" value="RUN" onclick="run();">
<div id="content"></div>
</body>

</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:jsexample19.html
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2010 年 11 月 -->


瀏覽器 (broswer) 開啟後執行,如下



Boolean() 、 Number() 、 String() 為三個全域函數,全域的意思是可以在任何地方直接使用。利用 Boolean() 可將變數的數值直轉換為布林型態, Number() 轉換成數字, String() 轉換成字串。


第 15 行
n2.appendChild(document.createTextNode(Number(t2)));


由輸出可看出,含有非數字符號的字串,轉換成數字的值會是 NaN 。


另外有兩個全域函數, parseFloat() 及 parseInt() 可從含有其他符號的字串中解析出數字, parseFloat() 會包含小數點, parseInt() 則否,例如
function run() {
    var c = document.getElementById("content");
    var n1 = document.createElement("p");
    var n2 = document.createElement("p");
    var n3 = document.createElement("p");
    var n4 = document.createElement("p");
    var n5 = document.createElement("p");
    var n6 = document.createElement("p");
    var t1 = "22.22";
    var t2 = "22d";
    var t3 = "22";
    n1.appendChild(document.createTextNode(parseFloat(t1)));
    c.appendChild(n1);
    n2.appendChild(document.createTextNode(parseInt(t1)));
    c.appendChild(n2);
    n3.appendChild(document.createTextNode(parseFloat(t2)));
    c.appendChild(n3);
    n4.appendChild(document.createTextNode(parseInt(t2)));
    c.appendChild(n4);
    n5.appendChild(document.createTextNode(parseFloat(t3)));
    c.appendChild(n5);
    n6.appendChild(document.createTextNode(parseInt(t3)));
    c.appendChild(n6);
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:run17.js
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2010 年 11 月 */


利用以下的 HTML 文件載入
<html>

<head>
<title>JavaScript Demo</title>
<script src="run17.js" type="text/javascript"></script>
</head>

<body>
<input id="b" type="button" value="RUN" onclick="run();">
<div id="content"></div>
</body>

</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:jsexample20.html
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2010 年 11 月 -->


瀏覽器 (broswer) 開啟後執行,如下



中英文術語對照
字面常數literal
資料型態data type
變數variable
全域函數global function






沒有留言: