[JavaScript] 何謂強制轉型、以及如何作到轉換型別?

🔍小範例大學問👊

1. 強制轉型的種類:

  • 「明確的」強制轉型(explicit coercion):
    程式碼中刻意寫出來的型別轉換。
  • 「隱含的」強制轉型(implicit coercion):
    程式碼中沒有明確指出要轉換型別卻轉型了。

2. 「明確的」強制轉型(explicit coercion):

🔄強制轉型成字串 String()

let a = 1;
let b = String(a);
console.log(typeof a); // number
console.log(typeof b); // string
let c = null;
let d = String(c);
console.log(typeof d, d); // string null

let e = undefined;
let f = String(e);
console.log(typeof f, f); // string undefined

let g = true;
let h = String(g);
console.log(typeof h, h); // string true

let i = [1, 2, 3];
let j = String(i);
console.log(typeof j, j); // string "1,2,3"

let n = {
  myName: "Peter",
  age: 18
};
let m = String(n);
console.log(typeof m, m); // string [object Object]

💬說明:物件轉型字串時,不管物件內容為何,強制轉型後都會形成 [object Object] 。

🔄強制轉型成數字 number()

let a  = '1';
let b = Number(a);
console.log(typeof b, b); // number 1
let a  = '我是誰';
let b = Number(a);
console.log(typeof b, b); // number NaN

let c  = [1, 2, 3];
let d = Number(c);
console.log(typeof d, d); // number NaN

let e  = {
  age : 18,
  myName :'Peter'
};
let f = Number(e);
console.log(typeof f, f); // number NaN

💬說明:如果轉型字串非數字時,強制轉型後會形成 NaN 。

let a  = null;
let b = Number(a);
console.log(typeof b, b); // number 0

let c = undefined;
let d = Number(c);
console.log(typeof d, d); // number NaN

let e = true;
let f = Number(e);
console.log(typeof f, f); // number 1

💬說明: true 的值為 1 ; false 的值為 0 。

🔄強制轉型成布林值 number()

let a = '';
let b = Boolean(a);
console.log(typeof b, b); // boolean false

let c = NaN;
let d = Boolean(c);
console.log(typeof d, d); // boolean false

let e = 0;
let f =Boolean(e);
console.log(typeof f, f); // boolean false

let g = null;
let h =Boolean(g);
console.log(typeof h, h); // boolean false

let i = undefined;
let j =Boolean(i);
console.log(typeof j, j); // boolean false

let m = false;
let n =Boolean(m);
console.log(typeof n, n); // boolean false

💬說明:除了上述六種情況都會強制轉型為 boolean 的 false 之外,都會轉型成 boolean 的 true。

( 六種強制轉型false )
false空字串0nullNaNundefined

3. 「隱含的」強制轉型(implicit coercion):

🔄強制轉型成字串 string ( +加法 )

const a = '2';
const b = 3;
const c = true;
const d = null;
const e = undefined;
const f = NaN;
const g = [4, 5];
const h = {
  A:1,
  B:2
}

console.log(a + b); // 23
console.log(a + c); // 2true
console.log(a + d); // 2null
console.log(a + e); // 2undefined
console.log(a + f); // 2NaN
console.log(a + g); // 24,5
console.log(a + h); // 2[object Object]

💬說明:字串跟所有型別做加法時,皆會強制轉型為字串。

console.log(typeof (b + c)); // number
console.log(typeof (b + d)); // number
console.log(typeof (b + e)); // number
console.log(typeof (b + f)); // number
console.log(typeof (b + g)); // string
console.log(typeof (b + h)); // string

💬說明:除了數字型別之外的加法,皆會強制轉型為字串。

( + 法視為數字型別 )
numberbooleanNaNnullundefined

🔄強制轉型成數字 number ( -減 *乘 /除法 )

console.log(typeof (b - a)); // number
console.log(typeof (b * a)); // number
console.log(typeof (b / c)); // number
console.log(typeof (b - c)); // number
console.log(typeof (b * d)); // number
console.log(typeof (b / d)); // number
console.log(typeof (b * e)); // number
console.log(typeof (b / e)); // number
console.log(typeof (b * f)); // number
console.log(typeof (b / f)); // number

💬說明:毫無懸念,全數為數字型別(但不是所有都是強制轉型,可參考上面的那張表格)。

  • 來看一下陣列和物件做減、乘、除法,會如何?
console.log(typeof (g - h), g - h); // number NaN
console.log(typeof (g * h), g * h); // number NaN
console.log(typeof (g / h), g / h); // number NaN

💬說明:沒想到,還是強制轉型為數字型別(竟然不會報錯!)。

🔄強制轉型成布林值 boolean

在什麼狀況下會隱含地將值強制轉為布林呢?直接看實例吧。

let a = 520;
let b = '森七七也是真的';
let c = undefined;
let d = null;

if (a) {
  // true
  console.log(`${a}是真的`); // 520是真的
}

while (c) {
  // false
  console.log('我想~不告訴你'); // 因為是false,所以不會出現
}

let tellMe = (c == d) ? b : a;
             //true
console.log(tellMe); // 森七七也是真的

if (a || b) {
  // true
  console.log('你搞的我好亂啊'); // 你搞的我好亂啊
}
( 強制轉型布林 )
if => 條件判斷
for => 的條件判斷
while => 條件是否成立
三元運算式 => 值1 : 值2 的條件運算
邏輯運算子 => OR 、 AND

4. Symbol 的強制轉型:

const a = Symbol('強制轉字串很可以');
String(a);
console.log(a);// "Symbol(強制轉字串很可以)"

const b = Symbol('轉字串來暗的不行喔');
b + ''; // TypeError: Cannot convert a Symbol value to a string(錯誤訊息)

💬說明:在轉為字串方面,將 symbol 明確的強制轉型是允許的,但隱含的強制轉型是被禁止的,並且會丟出錯誤訊息。

const c = Symbol(123);
Number(c); // TypeError: Cannot convert a Symbol value to a number(錯誤訊息)

const d = Symbol(456);
789 + d; // TypeError: Cannot convert a Symbol value to a number(錯誤訊息)

💬說明:在轉為數字方面,無論是明確或隱含都是禁止的,並且會丟出錯誤訊息。

const e = Symbol(true);
const f = Symbol(false);
Boolean(e); // true
Boolean(f); // true
console.log(e); // Symbol(true)
console.log(f); // Symbol(false)

const g = Symbol(true);
const h = Symbol(false);
if (g) {
  console.log('g 是真的');
}// g 是真的
if (h) {
  console.log('h 是真的');
}// h 是真的

💬說明:在轉為布林方面,無論是明確或隱含都是可以的,並且結果都是 true。

Symbol明確強制轉型隱含強制轉型
轉成字串✔️
轉成數字
轉成布林✔️✔️

5. 有用的功能? OR 缺陷?:

當你對隱含的強制轉型停留在一知半解的階段時,就會覺得這個設計是極大的缺陷;但了解透徹之後,或許它就會變成了有用的功能,減少冗贅、反覆套用與避免過於細節調節的步驟。

隱含的強制轉型數字字串布林
運算類:加( + )法✔️
運算類:減( – )乘( * )除( / )法✔️
if、for、while、三元運算式、邏輯運算子✔️

💬說明:方便記憶的簡表,詳細內容還是需要爬一下文。


參考文章

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

%d 位部落客按了讚: