iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 8
1
Modern Web

【這些年我似是非懂的 Javascript】系列 第 8

【這些年我似是非懂的 Javascript】Day 8 - 魔幻邪惡的強制轉型 #第一章 # 心情轉折

看到標題先不要罵我xD
我是說外面很多人對於強制轉型的既定印象。

黃渤說得好

因為恐懼所以你憤怒

圖片來源

我之前說過,當你了解過後也許你就不會認為他那麼的壞,
也許能夠善用它的好處且避開他的壞處。

最底下也會分享我這幾天在煩惱的事情和解決方式,
以及最後的心情轉變和決定。

幹話繼續說,
那我們就開始今天的分享吧~


轉換值

從某個型別到另一個型別,如果明確的進行就是"型別轉換",
如果是隱性的就稱之為"強制轉型",跟之前說過的明確的強制轉型隱含的強制轉型其實是一樣的意思。
請再看一次範例xD

const a = 123;
const b = a+'456'; // 123456 隱含的強制轉型

const c = String(a); // '123' 明確的強制轉型 

如果你是對於上面的範例覺得很清楚,其實對你來說就沒有所謂的隱含明確的區分,反之如果你對於這些都不熟悉,其實這些對你來說都是隱含的。

抽象的值運算

這邊主要要探討的是規範了的值如何變成一個 string, number 或是 boolean ,ES5 中的 section 9 定義了幾個抽象運算,主要就有值轉換的規則,接著我們會透過 toString, toNumbertoBoolean 來當主要的分享。

ToString

簡單來說就是任何不是 string 的值被強制轉換成 string,這過程是透過剛剛所說的 section 9.8 的 toString抽象運算處理的。

太大太小的值會被轉換成指數

const a = 1.01 *1000000000000000000*1000000000000000000
a.toString(); // "1.01e+36"

Array 字串話後會以 "," 隔開

const a = [1,2,3]
a.toString(); // '1,2,3'

JSON 的字串化

相信對於使用過 JS 的你一定對 JSON.stringify(..) 不陌生吧!?
不過你知道嗎他其實跟 toString(..)轉換的結果是相同的,
不管如何他都會回傳給你一個 string
那又如何?
啊...萬一他不是 JSON 呢?
例如以下範例

JSON.stringify(1) // "1"
JSON.stringify(null) // "null"
JSON.stringify(true) // "true"

另外 JSON.stringify(..)在遇到 undefined function symbol 會直接忽略。

ToNumber

基本上就是從非數字轉到數字一樣經由 ES5 所定義的抽象運算處理的。
例如 true 變成 1 或著是 false 變成 0
String to number 基本上運作方式就是照字面上如果轉換失敗就會是 NaN,需要注意的是以 0 為前綴的八進位數字不會被當成八進位會直接變成十進位,畢竟他還是沒那麼聰明不知道你是八進位還是十進位xD

ToBoolean

還記得之前提過 Falsy&Truthy 嗎?
不記得可以回去看一下XDD
這邊就不介紹了... 連結在這~
【這些年我似是非懂的 Javascript】Day 3 - 你一定可以入的了門 #上篇
...

...

...

開玩笑的~ xD

這邊主要要釐清一些我們可能誤解的觀念,
通常我們會覺得 0 就是 false1 就是 true ,在判斷上也許強制轉型會自動把它轉成你所想的那樣,
但是 number 就是 number
boolean 就是 boolean
我們不一樣~~~
每個人都有不同的境遇~ 的境遇~ 的境遇~~ (自己製造 echo)

圖片來源

聰明的你一定知道 Boolean 會有哪兩個東西~
沒錯!
就是 FalseTrue
接著我們就要討論除了這兩個東西之外的什麼東西會變成 Falsy值,什麼東西會變 Truthy值。

Falsy值

在 JS 中只有少數的值會被強制轉成 false 如下~

  • undefined
  • null
  • false
  • +0, -0 和 NaN
  • ""

記熟之外的以上其他全部都是 true
所以也就是其他都在 truthy清單....嗎?
不對!
JS 並沒有真正定義 truthy 清單,所以這應該保持保留的態度。
整個就是薛丁格的 Boolean (誤

Falsy 物件

看到這應該會覺得一個黑人問號,
說好只有上面那些,怎麼又會有 Falsy 物件?
還記得之前學過"物件包裹器"嗎?
簡單啦!
那就是包裹著 falsy 的值的物件包裹器 就是 Fasly 物件囉!
...
...
...

先來猜看看以下的結果是如何

const a = new Boolean(false);
const b = new Number(0);
const c = new String("");
const d = a && b && c;

const d = Boolean(a && b && c);

...
...
...

答案是

true

原因就跟之前提過的一樣他們還是物件包裹器所以是一個物件
他並不在 falsy 名單內當然是 true 啊!

所以由此可知...
犯人不是物件包裹器裡面包著 falsy 的值...
真相只有一個!

圖片來源

犯人就是 document.all
書上說是廣為人知的,
但是我根本不知道這東西是什麼...
(可能要之後實際遇到才會有那種"哦哦哦"的感覺!!!!)
只好在家默默地說:我就知道
簡單來說原因是瀏覽器會基於 JS 的正規語意讓他們創造出奇特的行為,它的外觀就是正常的物件但是轉完 boolean 就會變 false 。
然後他又是一個永久性的 bug 。 (怎麼感覺 JS bug 真多 xDDD)
但沒關係有愛就行(?)

Truthy 值

上面提到除了在上面的 falsy 值外和那個特殊的 document.all 物件之外,其他都是 True 嗎?

那你一定知道底下這個範例的結果是如何!

const a = "false";
const b = "0";
const c = "''";

const d = Boolean( a && b && c);

d; //?

答案是~~~~

True

因為他們都是 string~
看一下上面提的,只有"空字串"才是 falsy 的,
他們裡面都有 string 的值,就算他們看起來很 falsy xD。

以上~ 是今天的內容
接著是今天的重頭戲(?


心情轉折分享

最近在調整作息和研究這系列的時間,
因為覺得文章感覺都變得有點倉促(像在趕稿xDD)
非常違背我的初衷。

誰說鐵人賽一定要拼死拼活!?

圖片來源截圖自"反正我很閒"的影片0:54處->連結

目前我的想法是每天固定專屬於研究這系列的時間,
這樣不僅學習效果好,更不會因為沒有達到自己內心預期的進度造成心情鬱卒。
更重要的是,我希望身心靈都能建築在快樂學習上。
絕對不是因為我自己希望能每天打球運動,
俗話說的好,

打球打得好,程式沒煩惱,打球打不好,什麼都不好。

來分享一下我最近規律的作息和快樂學習時間表

時間 任務
7:30 ~ 8:00 起床賴床刷牙洗臉
8:00 ~ 9:15 黃金讀書寫文章時間
9:15 ~ 9:45 上班途中買早餐等等
9:45 ~ 19:00 上班 (中午休息時間可能會看大概 30 分鐘的書)
19:00 ~ 20:00 吃飯飯、耍廢、聽音樂
20:00 ~ 22:00 黃金讀書寫文章時間
22:00 ~ 24:00 打球揮灑油脂
00:00 ~ 7:30 洗澡睡覺~

(時間正負最多半小時)

希望你跟我都可以一起成為時間管理大師!
一起放鬆學習沒煩惱~

這樣的每天持續學習應該沒有違背鐵人的精神吧!?
素不素!?
素嘛!(自己說)

明天繼續分享關於強制轉型

感謝你的收看。
我們明天見~


參考來源:

你所不知道的 JS|導讀,型別與文法 (You Don't Know JS: Up & Going)


上一篇
【這些年我似是非懂的 Javascript】Day 7 - Natives 原生功能
下一篇
【這些年我似是非懂的 Javascript】Day 9 - 魔幻邪惡的強制轉型 #第二章 #明確的強制轉型
系列文
【這些年我似是非懂的 Javascript】34

1 則留言

1
fillano
iT邦超人 1 級 ‧ 2020-09-22 11:28:05

記得以前Yahoo邀請Rasmus Lerdorf來演講,會後還有聚會,他送獎品時問的幾乎都是PHP自動轉型的問題。對動態型別語言而言,這應該是很重要的主題,只是似乎反而比較少人深入去瞭解。

Robin iT邦新手 4 級 ‧ 2020-09-22 20:25:39 檢舉

我的猜想是...許多人都是從靜態語言的角度來學習靜態語言,所以對於 JS 的自動轉型不習慣或是在不知情的情況下被雷到導致憤恨 xDD

我要留言

立即登入留言