社群 學習 工具庫 休閒
搜尋
繁体中文

JavaScript 類型轉換

Number() 轉換為數字， String() 轉換為字串， Boolean() 轉換為布林值。

JavaScript 資料型別

#在JavaScript 中有5 個不同的資料型別：

  • string

  • number

  • #boolean

  • object

  • ##function

3 種物件類型：

    ##Object

    • Date

    • Array

#2 個不包含任何值的資料型別：

null

undefined

    • typeof 運算子

  • 你可以使用 typeof 運算子來檢視JavaScript 變數的資料型態。 

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网(php.cn)</title>
</head>
<body>
<p> typeof 操作符返回变量、对象、函数、表达式的类型。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
    typeof "john" + "<br>" +
    typeof 3.14 + "<br>" +
    typeof NaN + "<br>" +
    typeof false + "<br>" +
    typeof [1,2,3,4] + "<br>" +
    typeof {name:'john', age:34} + "<br>" +
    typeof new Date() + "<br>" +
    typeof function () {} + "<br>" +
    typeof myCar + "<br>" +
    typeof null;
</script>
</body>
</html>

    執行程式嘗試

  • 請注意：

  • #NaN 的資料型別是number

##陣列(Array)的資料型別是object

日期(Date)的資料型別為objectnull 的資料型別是object

未定義變數的資料型別為undefined

如果物件是JavaScript Array 或JavaScript Date ，我們就無法透過 typeof 來判斷他們的類型，因為都是回傳Object。

constructor 屬性

#constructor 屬性傳回所有 JavaScript 變數的建構子。 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网(php.cn)</title>
</head>
<body>
<p> constructor 属性返回变量或对象的构造函数。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
    "john".constructor + "<br>" +
    (3.14).constructor + "<br>" +
    false.constructor + "<br>" +
    [1,2,3,4].constructor + "<br>" +
    {name:'john', age:34}.constructor + "<br>" +
    new Date().constructor + "<br>" +
    function () {}.constructor;
</script>
</body>
</html>

執行程式嘗試

你可以使用constructor 屬性來檢視是物件是否為陣列(包含字串"Array"):

#實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网(php.cn)</title>
</head>
<body>
<p>判断是否为数组。</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);
function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>
</body>
</html>
執行程式嘗試一下#你可以使用constructor 屬性來查看是物件是否為日期(包含字串"Date") :

    實例

  • <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网(php.cn)</title>
</head>
<body>
<p>判断是否为日期。</p>
<p id="demo"></p>
<script>
var myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);
function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}
</script>
</body>
</html>
    • 執行程式嘗試

JavaScript 類型轉換

JavaScript 變數可以轉換為新變數或其他資料型別：

#透過使用JavaScript 函數########### #透過JavaScript 自身自動轉換##################將數字轉換為字串############全域方法 String() 可以將數字轉換為字串。 ###

該方法可用於任何類型的數字，字母，變量，表達式：

實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网(php.cn)</title>
</head>
<body>
<p> String() 方法可以将数字转换为字符串。</p>
<p id="demo"></p>
<script>
    var x = 123;
    document.getElementById("demo").innerHTML =
            String(x) + "<br>" +
            String(123) + "<br>" +
            String(100 + 23);
</script>
</body>
</html>

運行程式嘗試

Number 方法 toString() 也是有相同的效果。

實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网(php.cn)</title>
</head>
<body>
<p>toString() 方法将数字转换为字符串。</p>
<p id="demo"></p>
<script>
    var x = 123;
    document.getElementById("demo").innerHTML =
            x.toString() + "<br>" +
            (123).toString() + "<br>" +
            (100 + 23).toString();
</script>
</body>
</html>

執行程式嘗試

數字轉換為字串的方法：

方法描述
#toExponential()把物件的值轉換為指數計數法。
toFixed()把數字轉換成字串，結果的小數點後面有指定位數的數字。
toPrecision()把數字格式化為指定的長度。

將布林值轉換為字串

全域方法 String() 可以將布林值轉換為字串。

String(false)        // 回傳"false"
String(true)         // 返回"true"

。

false.toString()     // 返回"false"
true.toString()      // 返回"true"


將日期轉換為字串


全域方法 String() 可以將日期轉換為字串。

String(Date())     +0200 (W. Europe Daylight Time)

##toString( ) 也有相同的效果。

Date().toString()   // 回傳Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

日期轉換為字串的函數：

方法描述getDate()從Date 物件傳回一個月中的某一天(1 ~ 31)。 getDay()從 Date 物件傳回一週中的某一天 (0 ~ 6)。 getFullYear()從 Date 物件以四位數字傳回年份。 getHours()傳回 Date 物件的小時 (0 ~ 23)。 getMilliseconds()傳回 Date 物件的毫秒(0 ~ 999)。 getMinutes()返回 Date 物件的分鐘 (0 ~ 59)。 getMonth()從 Date 物件傳回月份 (0 ~ 11)。 getSeconds()傳回 Date 物件的秒數 (0 ~ 59)。 getTime()傳回 1970 年 1 月 1 日至今的毫秒數。

將字串轉換為數字

全域方法 Number() 可以將字串轉換為數字。

字串包含數字(如 "3.14") 轉換為數字 (如 3.14).

空字串轉換為 0。

其他的字串會轉換為 NaN (不是個數字)。

Number("3.14")    // 返回3.14
Number(" ")       // 返回0 
Number(   88")   // 傳回NaN

字串轉為數字的方法：

方法parseFloat()parseInt()

一元運算子+

Operator + 可用來將變數轉換為數字：

實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网(php.cn)</title>
</head>
<body>
<p> typeof 操作符返回变量或表达式的类型。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var y = "5";
        var x = + y;
        document.getElementById("demo").innerHTML =
                typeof y + "<br>" + typeof x;
    }
</script>
</body>
</html>

執行程式嘗試一下

如果變數不能轉換，它仍然會是一個數字，但值為NaN (不是一個數字):

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网(php.cn)</title>
</head>
<body>
<p> typeof 操作符返回变量或表达式的类型。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
    var y = "John";
    var x = + y;
    document.getElementById("demo").innerHTML =
typeof x + "<br>" + x;
}
</script>
</body>
</html>

執行程式嘗試

將布林值轉換為數字

全域方法 Number() 可將布林值轉換為數字。

Number(false)     // 返回0
Number(true)      // 返回1

將日期轉換為數字

#全域方法 Number() 可將日期轉換為數字。

d = new Date();
Number(d)          // 回傳 1404568027739

#日期方法

d = new Date();
d.getTime()        // 返回1404568027739

自動轉換類型

#當JavaScript 嘗試操作一個"錯誤" 的資料型別時，會自動轉換為"正確" 的資料型態。

以下輸出結果不是你所期望的：

5 + null    // 回傳5         null 轉換為0
"5" + null     null 轉換為0
"5" + null     null 轉換為0
"5" + null     null 轉換為0

"5" 轉換為"null"
"5" + 1     // 返回"51"      1 轉換為"1"  

"5" - 1   

##

自動轉換成字串

#當你嘗試輸出一個物件或變數時JavaScript 會自動呼叫變數的toString() 方法：

document.getElementById("demo").innerHTML = myVar;

// if myVar = {name:"Fjohn"}  / / toString 轉換為"[object Object]"
// if myVar = [1,2,3,4]       // toString 轉換為"1,2,3,4"
// if myVar = new Date()      // toString 轉換為"Fri Jul 18 2014 09:08:55 GMT+0200"

#數字和布林值也常互相轉換：



數字和布林值也常互相轉換：


#// if myVar = 123             // toString 轉換為"123"

// if myVar = true              // toString 轉換為"false" ################ 繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文网(php.cn)</title> </head> <body> <p> typeof 操作符返回变量、对象、函数、表达式的类型。</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = typeof "john" + "<br>" + typeof 3.14 + "<br>" + typeof NaN + "<br>" + typeof false + "<br>" + typeof [1,2,3,4] + "<br>" + typeof {name:'john', age:34} + "<br>" + typeof new Date() + "<br>" + typeof function () {} + "<br>" + typeof myCar + "<br>" + typeof null; </script> </body> </html>
提交重置程式碼
上一節 下一節
教程列表
獲取幫助
  • 課程推薦
  • 課件下載
課件暫不提供下載，工作人員正在整理中，後期請多關注該課程~

看過本課程的同學也在學習

最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)  492836 次播放
##說明
解析一個字串，並傳回一個浮點數。
解析一個字串，並傳回一個整數。