首頁 > web前端 > 前端問答 > JavaScript型別轉換(詳解及實例)

JavaScript型別轉換(詳解及實例)

WBOY
發布: 2022-01-12 18:05:50
轉載
1954 人瀏覽過

這篇文章為大家帶來了JavaScript中類型轉換的相關知識,將值轉換為原始值、轉換為數字和轉換為字串,這剛好對應了引擎內部的三種抽像操作:ToPrimitive() 、ToNumber()、ToString(),希望對大家有幫助。

JavaScript型別轉換(詳解及實例)

JavaScript 加法規則

#在JavaScript中,加法的規則其實很簡單,只有兩種情況:

  • 數字和數字相加

  • #字串和字串相加

所有其他類型的值都會自動轉換成這兩種類型的值

在JavaScript中,一共有兩種類型的值:

  • 原始值有: undefined、null、 布林值(boolean)、 數字(number)、字串(string)、symbol

  • 物件值:其他的所有值都是物件類型的值,包括陣列(arrays)和函數(functions)

型別轉換

加法運算子會觸發三種型別轉換:將值轉換為原始值、轉換為數字、轉換為字串,這剛好對應了JavaScript引擎內部的三個抽像操作:ToPrimitive()、ToNumber()、ToString()

透過ToPrimitive() 將值轉換為原始值

ToPrimitive(input, PreferredType?)
登入後複製

可選參數PreferredType可以是Number或String,它只代表了一個轉換的偏好,轉換結果不一定必須是這個參數所指的型別,但轉換結果一定是一個原始值.如果PreferredType被標誌為Number,則會進行下面的操作來轉換輸入的值(§9.1):

  • 如果輸入的值已經是個原始值,則直接回傳它.

  • 否則,如果輸入的值是一個物件.則呼叫該物件的valueOf()方法.如果valueOf( )方法的回傳值是一個原始值,則傳回這個原始值.

  • 否則,呼叫這個物件的toString()方法.如果toString()方法的回傳值是一個原始值,則回傳這個原始值.

  • 否則,拋出TypeError異常.

如果PreferredType被標誌為String,則轉換操作的第二步和第三步的順序會調換.如果沒有PreferredType這個參數,則PreferredType的值會按照這樣的規則來自動設定: Date類型的物件會被設定為String,其它類型的值會被設定為Number .

透過ToNumber()將值轉換為數字

JavaScript型別轉換(詳解及實例)

如果輸入的值是對象,則會先呼叫ToPrimitive(obj, Number)將該物件轉換為原始值,然後在呼叫ToNumber()將這個原始值轉換為數字.

透過ToString()將值轉換為字串

JavaScript型別轉換(詳解及實例)

如果輸入的值是物件,則會先呼叫ToPrimitive(obj, String)將該物件轉換為原始值,然後再呼叫ToString()將這個原始值轉換為字串.

#demo

var obj = {
    valueOf: function () {
        console.log("valueOf");
        return {}; // 没有返回原始值
    },
    toString: function () {
        console.log("toString");
        return {}; // 没有返回原始值
    }
}
登入後複製

Number作為一個函數被呼叫(而不是作為建構子呼叫)時,會在引擎內部呼叫ToNumber()操作:

Number(obj)
// output
valueOf
toString
Uncaught TypeError: Cannot convert object to primitive value
String(obj)
// output
toString
valueOf
Uncaught TypeError: Cannot convert object to primitive value
登入後複製

##加法

    value1 + value2
登入後複製

在計算這個表達式時,操作步驟是這樣的:

  • 將兩個運算元轉換為原始值(下面是數學表示法,不是JavaScript程式碼):

  • #
        prim1 := ToPrimitive(value1)
        prim2 := ToPrimitive(value2)
    登入後複製
PreferredType被省略,因此Date 類型的值採用String,其他類型的值採用Number.

  • 如果prim1 或prim2 中的任一個為字串,則將另外一個也轉換成字串,然後返回兩個字串連接操作後的結果;

  • #否則,將prim1 和prim2 都轉換為數字類型,返回他們的和。

[] []

# 輸出: ''

[]會轉換成一個原始值,先嘗試valueOf() 方法,傳回數組本身(this):

> var arr = [];
> arr.valueOf() === arr
true
登入後複製

這樣的結果不是原始值,所以再呼叫toString() 方法,傳回一個空字串(是一個原始值)。因此,[] [] 的結果其實是兩個空字串的連結.

> [] + {}
'[object Object]'
登入後複製

#{} {}

輸出: NaN

  • JavaScript引擎將第一個{}解釋成一個空的程式碼區塊並忽略了它

  • 這裡的加號並不是代表加法的二元運算符,而是一個一元運算符,作用是將它後面的運算元轉換成數字,和Number() 函數完全一樣。例如:

+{}
Number({})
Number({}.toString())  // 因为{}.valueOf()不是原始值
Number("[object Object]")
NaN
登入後複製
> {} + []
0
登入後複製
  • {} 忽略

  • +[] = Number([]) = Number([].toString()) = Number("") = 0

有趣的是,Node.js的REPL在解析类似的输入时,与Firefox和Chrome(和Node.js一样使用V8引擎)的解析结果不同.下面的输入会被解析成一个表达式,结果更符合我们的预料:

> {} + {}
'[object Object][object Object]'
> {} + []
'[object Object]'
登入後複製

总结

对象.valueOf() === 对象

数组对象.toString() === 数组对象.join()

对象.toString() === "[object Object]"

Javacript 中 + 号工作:

  • 数字 + 数字

  • 字符串 + 字符串

【相关推荐:javascript学习教程

以上是JavaScript型別轉換(詳解及實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:juejin.im
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板