在JavaScript中，處理資料的型態是非常重要的。忽略型別處理可能會導致非預期的錯誤。這篇文章將分享幾個常見的型別陷阱，並提供一些建議來避免這些問題。

常見的型別陷阱

1. 字串與布林值的混淆
   在處理URL參數時，所有的參數都會以字串形式出現。例如，有一個查詢字串?category=abc&drawn=true，我們需要分別取出category和drawn參數。

const urlParams = new URLSearchParams(window.location.search);
const category = urlParams.get('category'); // "abc"
const drawn = urlParams.get('drawn'); // "true"

此時，如果我們直接使用Boolean(drawn)來判斷drawn，會得到非預期的結果。

console.log(Boolean(drawn)); // true，即使drawn="false"也會是true

解決方案是將drawn的值與字串"true"進行比較：

const isDrawn = drawn === 'true';
console.log(isDrawn); // true或false

2. 數字與字串的混用
   JavaScript在進行數值運算時，可能會出現字串與數字混用的情況。例如：

const num1 = '10';
const num2 = 20;
const result = num1 + num2;
console.log(result); // "1020"，而不是30

這是因為num1是一個字串，+運算符在這裡進行了字串拼接。解決方案是顯式地將字串轉換為數字：

const result = Number(num1) + num2;
console.log(result); // 30

3. null和undefined的混淆
   null和undefined在JavaScript中經常被混淆。null表示一個有意的空值，而undefined表示一個未定義的值。處理這兩種型別時，需要特別小心：

let value = null;
console.log(value == undefined); // true
console.log(value === undefined); // false

為了避免混淆，建議始終使用===來進行比較：

if (value === null) {
  console.log('value is null');
} else if (value === undefined) {
  console.log('value is undefined');
}

避免型別陷阱的建議

1.顯式轉型：在需要進行型別轉換時，顯式地進行轉型，避免隱式轉型帶來的困擾。

const str = '123';
const num = Number(str); // 將字串顯式轉換為數字

2.使用嚴格相等運算符：始終使用===和!==來進行比較，避免因型別自動轉換導致的錯誤。

const a = 0;
console.log(a === false); // false
console.log(a == false); // true，因為0會被轉換為false

3.善用TypeScript：如果項目允許，使用TypeScript來進行型別檢查，可以在編譯階段捕獲型別錯誤。

let count: number = 5;
count = 'five'; // 會在編譯時報錯