JavaScript - 類型轉換
你好，有志於JavaScript開發者！今天，我們將進入JavaScript類型轉換的迷人世界。如果你是編程新手，不必擔心；我會一步步引導你，就像我這些年來為無數學生所做的一樣。所以，來一杯咖啡（或你喜歡的飲料），我們開始吧！
JavaScript 類型轉換
在我們深入細節之前，讓我們先了解類型轉換的意思。想像你有一盒樂高積木，但有些零件是木頭做的。要建造你的樂高城堡，你需要將那些木頭零件轉換成樂高積木。這基本上就是JavaScript中的類型轉換——將數據從一種類型轉換為另一種類型。
在JavaScript中，我們有兩種主要的轉換類型：
- 隱式轉換（也稱為類型強制）
- 明式轉換（也稱為類型轉 casting）
讓我們詳細探討每一種。
隱式類型轉換
隱式轉換在JavaScript中是自動發生的，當JavaScript嘗試對不同類型的值進行操作時。這就像JavaScript說："別擔心，這個我來！"然後在背後進行類型轉換。
轉換為字符串（隱式轉換）
JavaScript在將事物轉換為字符串方面非常友好。這就像那個能夠與任何人打交道的朋友！
let num = 5;
let str = "The number is: " + num;
console.log(str); // 輸出: "The number is: 5"
console.log(typeof str); // 輸出: "string"在這個例子中，JavaScript在我們使用+運算符與字符串相加時自動將數字5轉換為字符串。就像JavaScript為我們在數字周圍加上引號一樣。
轉換為數字（隱式轉換）
當涉及到數字時，JavaScript會盡力理解事物，有點像數學老師解讀學生凌亂的字跡。
let str = "10";
let num = str - 5;
console.log(num); // 輸出: 5
console.log(typeof num); // 輸出: "number"在這裡，JavaScript看到-運算符，心想："啊哈！我們一定是在做數學！"所以它將字符串"10"轉換為數字10，然後減去5。
轉換為布爾值（隱式轉換）
JavaScript有一個簡單的規則來將值轉換為布爾值：有些值被認為是"真"（truthy），有些則是"假"（falsy）。這就像將學生分為"出勤"和"缺勤"兩類。
if ("Hello") {
console.log("這將會運行，因為 'Hello' 是真值");
}
if (0) {
console.log("這不會運行，因為 0 是假值");
}在這些例子中，JavaScript隱式將"Hello"轉換為true，將0轉換為false。
Null 轉換為數字（隱式轉換）
Null是一個棘手的東西。當它被轉換為數字時，它變成了0。這就像那個沒有交作業但仍然得到零分的學生。
let x = null;
console.log(+x); // 輸出: 0單一正號+運算符嘗試將null轉換為數字，結果為0。
Undefined 與數字和布爾值（隱式轉換）
Undefined更加棘手。它就像那個不但沒有交作業，甚至不在班級名單上的學生！
let x;
console.log(+x); // 輸出: NaN（不是數字）
console.log(Boolean(x)); // 輸出: false當轉換為數字時，undefined變成了NaN。當轉換為布爾值時，它變成了false。
明式類型轉換
明式轉換是我們，作為程序員，取得控制權並告訴JavaScript我們想要什麼類型。這就像你是戲劇的導演，並告訴你的演員們要精確地扮演哪些角色。
轉換為字符串（明式轉換）
我們有幾種方法可以進行字符串轉換：
let num = 123;
let str1 = String(num);
let str2 = num.toString();
let str3 = num + "";
console.log(str1, typeof str1); // 輸出: "123" string
console.log(str2, typeof str2); // 輸出: "123" string
console.log(str3, typeof str3); // 輸出: "123" string所有這些方法都達到同樣的效果，但String()和toString()在表達我們的意圖上更明確。
轉換為數字（明式轉換）
對於數字轉換，我們有類似的選項：
let str = "456";
let num1 = Number(str);
let num2 = parseInt(str);
let num3 = +str;
console.log(num1, typeof num1); // 輸出: 456 number
console.log(num2, typeof num2); // 輸出: 456 number
console.log(num3, typeof num3); // 輸出: 456 numberNumber()和parseInt()在表達我們的意圖上更清晰，而單一正號+是一些開發者使用的簡寫。
轉換為布爾值（明式轉換）
布爾值轉換非常直接：
let str = "Hello";
let bool1 = Boolean(str);
let bool2 = !!str;
console.log(bool1, typeof bool1); // 輸出: true boolean
console.log(bool2, typeof bool2); // 輸出: true booleanBoolean()函數清晰易讀。雙重否定(!!)是一些開發者使用的簡寫，但對初學者可能會感到困惑。
日期轉換為字符串/數字
日期在JavaScript中是一個特殊情況。它們可以轉換為字符串和數字：
let date = new Date();
let dateString = String(date);
let dateNumber = Number(date);
console.log(dateString); // 輸出: "Mon May 15 2023 12:34:56 GMT+0000 (協調世界時)"
console.log(dateNumber); // 輸出: 1684154096000 (自1970年1月1日以來的毫秒數)將日期轉換為字符串給我們一個可讀的格式，而將其轉換為數字給我們自Unix紀元以來的毫秒數。
JavaScript 轉換表
為了總結我們學到的所有轉換方法，這裡有一個方便的表格：
| 原始值 | 轉換為字符串 | 轉換為數字 | 轉換為布爾值 |
|---|---|---|---|
| false | "false" | 0 | false |
| true | "true" | 1 | true |
| 0 | "0" | 0 | false |
| 1 | "1" | 1 | true |
| "0" | "0" | 0 | true |
| "1" | "1" | 1 | true |
| NaN | "NaN" | NaN | false |
| Infinity | "Infinity" | Infinity | true |
| -Infinity | "-Infinity" | -Infinity | true |
| "" | "" | 0 | false |
| "20" | "20" | 20 | true |
| [ ] | "" | 0 | true |
| [20] | "20" | 20 | true |
| [10,20] | "10,20" | NaN | true |
| ["twenty"] | "twenty" | NaN | true |
| ["ten","twenty"] | "ten,twenty" | NaN | true |
| function(){} | "function(){}" | NaN | true |
| { } | "[object Object]" | NaN | true |
| null | "null" | 0 | false |
| undefined | "undefined" | NaN | false |
就这样！我們已經穿越了JavaScript類型轉換的土地。記住，熟能生巧，所以不要害怕嘗試這些概念。誰知道呢？你可能會發現自己享受將樂高積木轉換成木頭塊，然後再轉換回來的過程！
祝快樂編程，未來的JavaScript大師們！
Credits: Image by storyset