DAY4:JavaScript 啟航：變數、資料型態與語言核心

17th鐵人賽

jklu7limj

2025-09-18 20:19:07

12 瀏覽

分享至

想像一下，我們要蓋一棟房子（我們的 BLE 偵錯工具），今天就是來學習如何製造最基本的「磚塊」。這些磚塊就是程式中的資料。我們將學習如何「製造磚塊」（賦予資料型態）以及如何「存放和標記磚塊」（宣告變數），這是所有程式設計的起點。

準備我們的「實驗室」：學會在哪裡撰寫並看到 JavaScript 的成果。
學習「變數」：認識程式中用來存放資料的「標籤收納盒」。
認識三種基本「資料型態」：文字、數字、以及「是/非」判斷。
學會第一個魔法指令 console.log()：讓我們能看透盒子裡到底裝了什麼。

1. 準備我們的實驗室：瀏覽器開發者工具

JavaScript 最棒的地方就是，你的實驗室隨處可見！它就內建在你的 Chrome 或 Edge 瀏覽器中。

步驟一：在瀏覽器的任何分頁上，按下鍵盤上的 F12 鍵。
步驟二：畫面右邊或下方會跳出一個視窗，這就是「開發者工具」。
步驟三：在上方找到並點擊 Console (或「主控台」) 這個選項。

這個 Console 就是我們今天寫程式和看結果的地方。它就像一張草稿紙，讓我們可以快速測試想法。

現在，請將下方的程式碼，一次性地複製並貼到你剛剛打開的 Console 視窗中，然後按下 Enter 執行。看看會發生什麼事！


// --- 歡迎來到 JavaScript 的世界！ ---

// 1. 使用 const 製作一個「密封盒」，標籤是 deviceName，裡面放文字
const deviceName = '我的第一個 BLE 裝置';

// 2. 使用 let 製作一個「活動蓋盒」，標籤是 batteryPercent，裡面放數字
let batteryPercent = 95;

// 3. 使用 let 製作另一個「活動蓋盒」，標籤是 isConnected，裡面放「是非」狀態
let isConnected = false; // 剛開始，裝置還沒連線

// 4. 現在，使用 console.log() 這個魔法指令，來看看盒子裡有什麼
console.log('--- 裝置資訊 ---');
console.log('裝置名稱:', deviceName);
console.log('目前電量:', batteryPercent);
console.log('是否已連線:', isConnected);
console.log('-----------------');

// 5. 模擬裝置連線成功後，狀況改變了！
// isConnected 是 let 盒子，所以我們可以更換裡面的東西
isConnected = true;
// 電量也下降了
batteryPercent = 92;

// 6. 再次檢查一下現在的狀況
console.log('--- 狀態更新！ ---');
console.log('裝置已連線:', isConnected);
console.log('更新後電量:', batteryPercent);

// deviceName 是 const 密封盒，如果你試圖改變它（如下面這行），就會報錯！
// deviceName = '另一個裝置'; // 試著把這行的註解拿掉再執行看看

按下回車鍵後，你應該會看到以下的畫面。

下面，我會簡單的介紹一下這份程式碼的變數種類。

2. 核心概念一：變數 (Variable) - 程式的「標籤收納盒」

在程式中，我們需要處理很多資料，比如裝置名稱 "我的心率帶"、電量 98 等等。如果隨手亂放，很快就會搞混。

所以，我們需要變數——它就像一個個貼好標籤的透明收納盒。

貼標籤的動作，叫做「宣告 (Declare)」。
標籤的名字，就是「變數名稱 (Variable Name)」。
放進盒子的東西，就是「值 (Value)」。

在 JavaScript 中，我們用兩個關鍵字來宣告（製作）盒子：

let：製作一個「活動蓋」的盒子。你可以隨時更換裡面的東西。
const：製作一個「密封」的盒子。東西一旦放進去，就不能再更換了。

簡單原則：優先用 const (密封盒)。除非你很確定之後需要更換內容，才用 let (活動蓋盒)。

3. 核心概念二：資料型態 (Data Types) - 盒子裡能放什麼？

不同的資料有不同的用途。就像你不會用裝文件的檔案夾去裝水一樣。程式需要知道它處理的是哪一種類型的資料。今天我們先認識三種最基本的：

String (字串)：就是文字。任何你想當作文字來顯示的內容，都要用單引號 '' 或雙引號 "" 包起來。
- 我的第一個 BLE 裝置
- "電量剩下："
Number (數字)：就是數字，用來做數學運算。注意：數字不需要加引號！
- 100
- 3.14
Boolean (布林)：代表一個是非題，只有兩種可能的答案：true (是/真) 或 false (否/假)。它常用來表示一種狀態。
- true (例如：裝置已連線)
- false (例如：裝置未連線)

除了以上這些資料型態之外，還有兩種型態，這兩種型態最容易混淆，但非常重要：

undefined (未定義)
- 比喻：一個你已經拿到手但還沒放任何東西的「空盒子」。
- 解釋：當你宣告了一個變數，但沒有給它任何值，JavaScript 會自動給它一個 undefined 的值。它代表「存在這個盒子，但內容未知」。
- 範例：let deviceVersion; // 我們宣告了變數，但還沒從裝置讀到版本號
null (空值)
- 比喻：一個你刻意清空並貼上「空」字條的盒子。
- 解釋：它代表「開發者就有意地表示這裡沒有值」。它不是一個意外，而是一個賦值。通常用來表示一個物件不存在，或清除一個變數的內容。
- 範例：let selectedDevice = null; // 一開始還沒有選擇任何裝置

undefined vs null 的簡單區分：

undefined 是 JavaScript 給的，代表「你忘了放東西」。

null 是你自己給的，代表「我故意不放東西」。

4. 魔法指令 `console.log()` 與實戰演練

console.log() 是我們最重要的朋友。你在括號 () 裡放什麼，它就會在 Console 裡幫你印出來，讓我們能清楚看到程式的執行狀況。

但是當程式變得複雜時，有時候我們不確定某个變數到底是什麼型態。這時，typeof 就派上用場了。

typeof 是一個關鍵字，你把它放在任何變數前面，它就會回傳一個字串，告訴你那個變數是什麼型態。

語法：typeof 你的變數名稱

讓我們把所有學到的型態都宣告出來，並立刻用 typeof 來驗證它們。請把下面的程式碼貼到瀏覽器的 Console 中執行。

// --- 歡迎來到 JavaScript 的世界！ ---

// 1. 使用 const 製作一個「密封盒」，標籤是 deviceName，裡面放文字
const deviceName = '我的第一個 BLE 裝置';
// 2. 使用 let 製作一個「活動蓋盒」，標籤是 batteryPercent，裡面放數字

let batteryPercent = 95;
  
// 3. 使用 let 製作另一個「活動蓋盒」，標籤是 isConnected，裡面放「是非」狀態

let isConnected = false; // 剛開始，裝置還沒連線

// 4. 現在，使用 console.log() 這個魔法指令，來看看盒子裡有什麼

console.log('--- 裝置資訊 ---');

console.log('裝置名稱:', deviceName);

console.log('目前電量:', batteryPercent);

console.log('是否已連線:', isConnected);

console.log('-----------------');

// 5. 模擬裝置連線成功後，狀況改變了！

// isConnected 是 let 盒子，所以我們可以更換裡面的東西

isConnected = true;

// 電量也下降了

batteryPercent = 92;

// 6. 再次檢查一下現在的狀況

console.log('--- 狀態更新！ ---');

console.log('裝置已連線:', isConnected);

console.log('更新後電量:', batteryPercent);

// deviceName 是 const 密封盒，如果你試圖改變它（如下面這行），就會報錯！

// deviceName = '另一個裝置'; // 試著把這行的註解拿掉再執行看看

// 宣告各種不同型態的變數

const isCharging = false;                // Boolean

let selectedCharacteristic = null;       // Null (刻意設為空值)

let firmwareVersion;                     // Undefined (只宣告，未賦值)

// 一個描述裝置的 Object (物件)

const myDeviceObject = {

  name: deviceName, // 屬性的值可以是另一個變數

  battery: batteryPercent,

  isConnected: true

};

// --- 使用 typeof 檢查每一個變數 ---

console.log("--- 變數型態大檢查 ---");

// 使用逗號可以在 console.log 中印出多個項目

console.log("變數 deviceName 的值是:", deviceName, ", 型態是:", typeof deviceName);

console.log("變數 batteryPercent 的值是:", batteryPercent, ", 型態是:", typeof batteryPercent);

console.log("變數 isCharging 的值是:", isCharging, ", 型態是:", typeof isCharging);

console.log("變數 selectedCharacteristic 的值是:", selectedCharacteristic, ", 型態是:", typeof selectedCharacteristic);

console.log("變數 firmwareVersion 的值是:", firmwareVersion, ", 型態是:", typeof firmwareVersion);

console.log("變數 myDeviceObject 的型態是:", typeof myDeviceObject);

console.log("----------------------");

不知道你有沒有注意到當我們檢查 null 的型態會回傳 'object' ，'object'指的是一種叫做物件的資料型態，說明如下。