轉化規(guī)則：

@1、那字符串包起來

image.png

image.png

[前幾篇提到對象轉為數(shù)字時的流程
1.Symbol.toPrimitive，沒有值的話再走下一步
2.基于valueOf查看原始值，不是原始值的話再下一步
3.調用toString
4.把toString后的值通過Number轉換]：http://www.itdecent.cn/p/a36980234665
同樣，對象轉為字符串也會走1-3步

但是普通對象沒有Symbol.toPrimitive，所以會直接調用所屬類原型上的方法：Object.prototype.toString[普通對象調用這個方法并不是單混用來轉換字符串，還可以用來檢測數(shù)據(jù)類型的]
結果如下：

image.png

出現(xiàn)轉換的情況：

@1：String([val])或者[val].toString()

• 第一種：Symbol.toPrimitive -> valueOf -> toString() 需要經(jīng)歷幾個步驟
• 第二中：直接調用[val]所屬類原型上的toString，直接轉化為字符串了[普通對象用來檢測數(shù)據(jù)類型]

@2、"+" 在js中，除了數(shù)學運算，還可能是字符串拼接
什么情況下是數(shù)學運算呢？什么情況下是字符串拼接？
除了以下幾種情況是字符串拼接，其他大都是數(shù)學運算
①、 "+"號有兩邊[左右兩邊都有值]，一邊是字符串，則一定是字符串拼接

image.png

let obj = {
  [Symbol.toPrimitive](hint) {
    console.log(hint)
    return 0
  }
}
console.log(1 + obj) // 1

檢測隨想的Symbol.toPrimitive方法，如果有，則執(zhí)行這個方法，傳遞hint(hint形參，值有'number','string','default') ->'default'
上述例子有Symbol.toPrimitive，所以執(zhí)行Symbol.toPrimitive，輸出hint的值為‘default’
返回數(shù)字0
所以1 + 0 = 1，最后結果是數(shù)字1

再來看一個字符串拼接的例子

let obj = {
  [Symbol.toPrimitive](hint) {
    console.log(hint)
    return '0'
  }
}
console.log(1 + obj) // '10'

執(zhí)行完Symbol.toPrimitive，返回的是字符串'0',此時就是字符串拼接，最后結果是'10'

如果不認為的重寫Symbol.toPrimitive，obj是沒有這個屬性的，會再基于valueOf獲取原始值
如果獲取的不是原始值，再基于toString把其轉換為字符串："[object Object]"
此時"+"遇到了字符串，則變?yōu)樽址唇?1[object Object]'
所以，"+"號有兩邊，其中一邊是對象，可能會出現(xiàn)字符出拼接

練習題：

1 + new Date()

解析：事件對象Date()是有內置的Symbol.toPrimitive屬性的，所以會調用Symbol.toPrimitive()，并且傳遞一個參數(shù)：'default'

image.png

執(zhí)行完new Date() [Symbol.toPrimitive] ('default')后，結果為：
"Fri Jul 23 2021 00:30:03 GMT+0800 (中國標準時間)"
1 + "Fri Jul 23 2021 00:30:03 GMT+0800 (中國標準時間)"
明顯是字符串拼接，所以最后結果是字符串："1Fri Jul 23 2021 00:30:03 GMT+0800 (中國標準時間)"
在看一個練習題：

1 + new Number(10)

image.png

new 一個Number(10)：
得到的是一個非標準特殊對象 原始值類型的值，基于構造函數(shù)，new出來的實例對象，所以也要先去判斷是否有Symbol.toPrimitive這個屬性
經(jīng)驗證是沒有的，所以要再基于valueOf()查找原始值，結果是10
1 + 10 明顯是數(shù)學運算，所以最后結果是11
所以，"+"號有兩邊，其中一邊是對象，到底是字符串拼接還是數(shù)學運算，要看內部處理機制是怎么處理的

特殊：

{} + 1

結果是1，前提是沒有被()包起來，或者在對象的左邊，沒有其他操作（例如聲明變量接受值等）此時瀏覽器是把當前操作分解成為兩部分"{}代碼塊"和”+1 “，兩部分之間沒有安息，所以結果是1

image.png

image.png

練習題：

let result = 100 + true +21.2 + null + undefined + 'Tencent' + [] + null + 9 + false
console.log(result)

1.100+true = 101

2. 101 + 21.1 = 122.2

3.122.2 + null ->122.2 + Number(null) -> 122.2+0 -> 122.2

4.122.2 + undefined = 122.2 + Number(undefiend) -> 122.2 + NaN - > NaN(任何數(shù)字和NaN相加都是NaN)

5.NaN + 'Tencent' -> 'NaNTencent'

6.'NaNTencent' + [] -> String([]) -> 'NaNTencent'+'' -> 'NaNTencent'

7.'NaNTencent' + null -> 'NaNTencent' + String(null) -> 'NaNTencent' + 'null' ->

9.'NaNTencentnull' + 9 -> 'NaNTencentnull9'

10.'NaNTencentnull9' + false -> 'NaNTencentnull9false'

image.png