JavaScript 基礎：變數與資料型別完全指南

各位好！

這篇是 JavaScript 系列的第二單元，我們要深入理解如何在 JavaScript 中儲存和處理資料。

變數宣告：const、let、var

JavaScript 有三種宣告變數的方式，但現代開發中主要使用前兩種。

const：常數（推薦優先使用）

const name = "小明";
const age = 25;
const PI = 3.14159;

// 嘗試修改會報錯
// name = "小華";  // TypeError: Assignment to constant variable

特性： - 宣告後不能重新賦值 - 必須在宣告時初始化 - 區塊作用域（後面會詳細說明）

何時使用： 當你確定這個變數不會被重新賦值時（大部分情況）

let：可變變數

let count = 0;
count = 1;      // 可以修改
count = count + 1;  // 可以重複修改

let status;     // 可以先宣告
status = "active";  // 之後再賦值

特性： - 可以重新賦值 - 可以先宣告後賦值 - 區塊作用域

何時使用： 當變數的值需要改變時（例如計數器、累加器）

var：舊式寫法（不推薦）

var oldStyle = "不建議使用";

為什麼不推薦： - 函式作用域（容易產生意外的變數覆蓋） - 變數提升（Hoisting）行為容易造成混淆 - 沒有區塊作用域的保護

結論： 現代開發中，優先使用 const，需要修改時才用 let，避免使用 var。

基本資料型別

JavaScript 有七種基本資料型別（Primitive Types）。

1. String（字串）

字串是文字資料，用單引號、雙引號或反引號包起來。

const str1 = "Hello";
const str2 = 'World';
const str3 = `Hello World`;  // 模板字串

// 字串串接
const greeting = "Hello" + " " + "World";
console.log(greeting);  // "Hello World"

// 模板字串（推薦）
const name = "小明";
const age = 25;
const message = `我是${name}，今年${age}歲`;
console.log(message);  // "我是小明，今年25歲"

// 跨行字串
const multiLine = `第一行
第二行
第三行`;

// 常用字串方法
const text = "JavaScript";
console.log(text.length);          // 10（長度）
console.log(text.toLowerCase());   // "javascript"
console.log(text.toUpperCase());   // "JAVASCRIPT"
console.log(text.slice(0, 4));     // "Java"
console.log(text.includes("Script")); // true

2. Number（數字）

JavaScript 的數字包含整數和浮點數。

const integer = 42;
const float = 3.14;
const negative = -10;
const scientific = 2.5e6;  // 2500000

// 基本運算
console.log(10 + 5);   // 15（加法）
console.log(10 - 5);   // 5（減法）
console.log(10 * 5);   // 50（乘法）
console.log(10 / 5);   // 2（除法）
console.log(10 % 3);   // 1（餘數）
console.log(2 ** 3);   // 8（次方）

// 特殊數字值
console.log(1 / 0);        // Infinity
console.log(-1 / 0);       // -Infinity
console.log("abc" / 2);    // NaN (Not a Number)

// 檢查是否為數字
console.log(isNaN(123));      // false
console.log(isNaN("abc"));    // true
console.log(Number.isInteger(3.14));  // false
console.log(Number.isInteger(42));    // true

3. Boolean（布林值）

布林值只有兩個值：true 或 false。

const isLoggedIn = true;
const hasPermission = false;

// 比較運算會回傳布林值
console.log(5 > 3);      // true
console.log(5 < 3);      // false
console.log(5 === 5);    // true
console.log(5 !== 10);   // true

// 邏輯運算
console.log(true && true);    // true（且）
console.log(true || false);   // true（或）
console.log(!true);           // false（非）

4. Undefined

變數已宣告但未賦值時的預設值。

let notAssigned;
console.log(notAssigned);  // undefined

function doSomething() {
  // 沒有 return 時，函式回傳 undefined
}
console.log(doSomething());  // undefined

5. Null

代表「刻意的空值」。

let user = null;  // 明確表示「沒有使用者」

// undefined vs null
let a;           // undefined（未賦值）
let b = null;    // null（明確設為空）

6. BigInt（大整數）

用於處理超過安全範圍的整數。

const bigNumber = 1234567890123456789012345678901234567890n;
console.log(typeof bigNumber);  // "bigint"

7. Symbol（符號）

用於建立唯一識別符（進階用途，初學者可以先跳過）。

const sym = Symbol("description");

型別檢查

使用 typeof 運算子檢查變數的型別。

console.log(typeof "Hello");      // "string"
console.log(typeof 42);           // "number"
console.log(typeof true);         // "boolean"
console.log(typeof undefined);    // "undefined"
console.log(typeof null);         // "object"（這是歷史遺留問題）
console.log(typeof {});           // "object"
console.log(typeof []);           // "object"（陣列也是物件）
console.log(typeof function(){}); // "function"

型別轉換

JavaScript 會自動轉換型別，但有時我們需要明確轉換。

自動型別轉換（隱式轉換）

// 字串 + 數字 = 字串
console.log("5" + 3);     // "53"

// 數字 - 字串 = 數字
console.log("5" - 3);     // 2

// 布林值轉數字
console.log(true + 1);    // 2
console.log(false + 1);   // 1

明確型別轉換（顯式轉換）

// 轉成字串
const num = 42;
const str = String(num);        // "42"
const str2 = num.toString();    // "42"

// 轉成數字
const text = "123";
const number = Number(text);    // 123
const int = parseInt("123.45"); // 123
const float = parseFloat("123.45"); // 123.45

// 轉成布林值
console.log(Boolean(1));        // true
console.log(Boolean(0));        // false
console.log(Boolean(""));       // false
console.log(Boolean("text"));   // true
console.log(Boolean(null));     // false
console.log(Boolean(undefined));// false

Truthy 和 Falsy 值

在條件判斷中，某些值會被視為 false：

// Falsy 值（會被視為 false）
if (false) {}
if (0) {}
if ("") {}
if (null) {}
if (undefined) {}
if (NaN) {}

// 其他所有值都是 Truthy（會被視為 true）
if (true) {}
if (1) {}
if ("hello") {}
if ([]) {}      // 空陣列也是 truthy
if ({}) {}      // 空物件也是 truthy

實戰練習：變數與型別操作

// 練習 1：基本資料處理
const firstName = "王";
const lastName = "小明";
const fullName = firstName + lastName;
console.log(`完整姓名：${fullName}`);

// 練習 2：數學計算
const price = 100;
const quantity = 3;
const discount = 0.1;
const total = price * quantity * (1 - discount);
console.log(`總價：${total} 元`);

// 練習 3：溫度轉換
function celsiusToFahrenheit(celsius) {
  return (celsius * 9/5) + 32;
}
console.log(`25°C = ${celsiusToFahrenheit(25)}°F`);

// 練習 4：型別檢查與轉換
function addNumbers(a, b) {
  // 確保輸入是數字
  const num1 = Number(a);
  const num2 = Number(b);

  if (isNaN(num1) || isNaN(num2)) {
    return "請輸入有效的數字";
  }

  return num1 + num2;
}

console.log(addNumbers(5, 3));      // 8
console.log(addNumbers("5", "3"));  // 8
console.log(addNumbers("abc", 3));  // "請輸入有效的數字"

常見陷阱與注意事項

1. 字串數字相加

console.log("5" + 3);   // "53"（不是 8！）
console.log("5" - 3);   // 2（數學運算會轉型）

解決方法： 明確轉換型別

console.log(Number("5") + 3);  // 8

2. const 不是完全不可變

const arr = [1, 2, 3];
arr.push(4);  // 可以！陣列內容可以改變
console.log(arr);  // [1, 2, 3, 4]

// 但不能重新賦值
// arr = [5, 6, 7];  // 錯誤！

const obj = { name: "小明" };
obj.age = 25;  // 可以！物件屬性可以改變
console.log(obj);  // { name: "小明", age: 25 }

3. 比較運算的陷阱

// == vs ===
console.log(5 == "5");   // true（會自動轉型）
console.log(5 === "5");  // false（嚴格比較）

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

// 建議：永遠使用 === 和 !==

4. NaN 的特殊性

console.log(NaN === NaN);  // false（NaN 不等於任何值，包括自己）
console.log(isNaN(NaN));   // true（正確的檢查方式）

實用工具函式

// 檢查是否為數字
function isNumeric(value) {
  return !isNaN(parseFloat(value)) && isFinite(value);
}

console.log(isNumeric("123"));    // true
console.log(isNumeric("abc"));    // false
console.log(isNumeric("123abc")); // false

// 安全的字串轉數字
function toNumber(value, defaultValue = 0) {
  const num = Number(value);
  return isNaN(num) ? defaultValue : num;
}

console.log(toNumber("123"));     // 123
console.log(toNumber("abc"));     // 0
console.log(toNumber("abc", -1)); // -1

// 格式化數字（千分位）
function formatNumber(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

console.log(formatNumber(1234567));  // "1,234,567"

小結

這篇我們學習了：

• 三種變數宣告方式：const、let、var
• 七種基本資料型別：String、Number、Boolean、Undefined、Null、BigInt、Symbol
• 如何檢查和轉換型別
• Truthy 和 Falsy 的概念
• 常見陷阱與解決方法

下一步：

完成這篇後，你已經能夠： - 正確宣告和使用變數 - 處理不同型別的資料 - 理解型別轉換的機制

前往下一篇：單元三：運算子與條件判斷

在那裡，我們會學習如何用程式做決策和邏輯判斷。