一、基礎入門：理解 JavaScript 在哪裏執行

1. JavaScript、ECMAScript 與執行環境

學習 JavaScript 的第一步，是分清楚三件事：

JavaScript：你用來編寫程式的語言。
ECMAScript：定義這個語言如何運作的標準。
執行環境：真正執行程式，並提供額外功能的平台。

例如以下程式：

const message = "你好，JavaScript！";
console.log(message);

const message = "你好，JavaScript！";
console.log(message);

當中的 const、字串及函式呼叫語法，屬於 ECMAScript 定義的語言功能；console 則由執行環境提供。

1.1 JavaScript 是甚麼？

JavaScript 是一種通用程式語言，最初用於網頁互動，現在亦廣泛用於伺服器、命令列工具、桌面及流動應用。

常見應用

場景	例子
網頁互動	按鈕操作、表單驗證、選單
資料請求	從 API 取得產品、天氣或帳戶資料
伺服器開發	建立 HTTP API、處理業務邏輯
自動化工具	整理檔案、產生報表
即時應用	聊天室、通知、協作工具

JavaScript 的基本特性

動態型別：變數不需要預先指定固定型別。
支援多種程式設計方式：程序式、物件導向及函式式。
以原型為基礎：物件可以透過原型鏈共享行為。
函式是一級值：可以存入變數、作為參數及回傳值。
有自動記憶體管理：由垃圾回收機制回收不再需要的記憶體。

let value = 100;
value = "一百"; // 同一個變數可以改為儲存字串

const double = number => number * 2;

console.log(double(5)); // 10

let value = 100;
value = "一百"; // 同一個變數可以改為儲存字串

const double = number => number * 2;

console.log(double(5)); // 10

JavaScript 與 Java 是不同語言。 名稱相似，不代表語法、型別系統或執行方式相同。

1.2 ECMAScript 是甚麼？

ECMAScript 是 JavaScript 核心語言的標準。

你可以將它理解為一份規則書，規定：

哪些語法有效。
有哪些資料型別。
變數及作用域如何運作。
運算子如何比較及轉換值。
函式及物件如何運作。
哪些內建物件及方法應該存在。

ECMAScript 規範的內容

類別	例子
語法	`const`、`let`、`if`、`class`
型別	`string`、`number`、`bigint`、`symbol`
核心物件	`Object`、`Array`、`Map`、`Set`
資料處理	`JSON`、`RegExp`
非同步語言功能	`Promise`、`async`／`await`
模組語法	`import`、`export`

例如：

const prices = [100, 200, 300];
const total = prices.reduce((sum, price) => sum + price, 0);

const prices = [100, 200, 300];
const total = prices.reduce((sum, price) => sum + price, 0);

這裏的陣列、箭頭函式及 reduce() 都屬於 ECMAScript 核心功能。

ECMAScript 不包括甚麼？

以下功能不屬於 ECMA-262 核心語言標準：

操作網頁：document、DOM。
瀏覽器視窗：window。
計時器：setTimeout()。
網絡請求：fetch()。
輸出訊息：console.log()。
讀取電腦檔案：Node.js 的 node:fs。

不屬於核心語言，不代表只有瀏覽器能使用。 例如 fetch() 及計時器也可以由其他執行環境提供。

另外，Intl 國際化 API 由另一份 ECMAScript 標準 ECMA-402 定義。

常見版本名稱

名稱	說明
ES5	ECMAScript 第 5 版
ES6／ES2015	同一版本的兩種常見名稱
ES2016、ES2017……	以年份命名的年度版本
ES2026	ECMAScript 2026 年版本

標準版本不是你必須安裝的一個軟件版本。 真正決定程式能否執行的，是目標引擎及環境支援哪些功能。

1.3 JavaScript 引擎是甚麼？

JavaScript 引擎是負責理解及執行 JavaScript 程式碼的軟件。

常見引擎包括：

引擎	常見使用平台
V8	Chrome、Node.js
SpiderMonkey	Firefox
JavaScriptCore	Safari

可以先將執行過程理解為：

程式碼 → 解析 → 執行 → 產生結果

現代引擎通常會結合直譯及即時編譯（JIT）等技術，因此不宜將 JavaScript 簡化成「永遠逐行直譯的語言」。

引擎與環境有甚麼分別？

引擎：負責執行語言本身。
環境：使用引擎，並提供檔案、網絡、畫面等外部能力。

Chrome 與 Node.js 都使用 V8，但只有 Chrome 的一般網頁環境才有頁面的 document。

同一款引擎，不代表擁有相同 API。

1.4 執行環境是甚麼？

執行環境是讓 JavaScript 程式運作的整體平台。

它通常包括：

JavaScript 引擎。
平台提供的 API。
工作排程及事件循環機制。
與作業系統、網絡或使用者介面互動的能力。

最常見的兩種環境是瀏覽器及 Node.js。

A. 瀏覽器環境

瀏覽器讓 JavaScript 與網頁互動：

const title = document.querySelector("h1");

if (title) {
  title.textContent = "歡迎學習 JavaScript";
}

const title = document.querySelector("h1");

if (title) {
  title.textContent = "歡迎學習 JavaScript";
}

常見瀏覽器 API：

API	功能
`document`	存取及修改頁面 DOM
`window`	一般網頁視窗的全域物件
`location`	取得或操作網址
`localStorage`	儲存少量字串資料
`fetch()`	發送網絡請求
`addEventListener()`	監聽事件

注意：瀏覽器中的 Web Worker 是另一種執行情境，沒有頁面的 window 或 document，不能直接操作 DOM。

B. Node.js 環境

Node.js 讓 JavaScript 在瀏覽器以外執行，例如讀取檔案或建立伺服器。

以下例子可儲存為 read-file.mjs，並以 node read-file.mjs 執行：

import { readFile } from "node:fs/promises";

try {
  const text = await readFile("./notes.txt", "utf8");
  console.log(text);
} catch (error) {
  console.error("讀取檔案失敗：", error);
}

import { readFile } from "node:fs/promises";

try {
  const text = await readFile("./notes.txt", "utf8");
  console.log(text);
} catch (error) {
  console.error("讀取檔案失敗：", error);
}

這個例子需要目前工作目錄中有 notes.txt。

常見 Node.js API：

API／模組	功能
`process`	程序資訊、環境變數等
`node:fs`	檔案系統操作
`node:path`	處理檔案路徑
`node:http`	HTTP 伺服器及相關功能
`Buffer`	二進位資料處理

Node.js 預設不提供網頁 DOM，因此一般不能直接使用 document.querySelector()。

1.5 同一段程式，為何有時可以執行，有時不可以？

原因通常有三種：

原因一：使用了環境專屬 API

console.log(document.title);

console.log(document.title);

在有頁面的瀏覽器環境：可以執行。
在預設 Node.js 環境：通常會出現 ReferenceError。

因為 Node.js 沒有頁面的 document。

原因二：引擎尚未支援語法或方法

較舊的引擎可能不認識某些新語法，或沒有某個新增內建方法。

要分清楚：

語法不支援：可能在解析階段就失敗。
方法不存在：呼叫時可能出現 TypeError。

原因三：權限或執行條件不符合

例如地理位置或通知 API，即使瀏覽器提供該功能，也可能需要：

安全環境，例如 HTTPS。
使用者授權。
使用者操作。
符合瀏覽器政策。

有 API，不代表任何時候都能成功使用。

1.6 全域物件與 `globalThis`

全域物件提供目前環境中的部分全域功能。

執行情境	常見名稱
一般瀏覽器網頁	`window`
Web Worker	`self`
Node.js	`global`
跨環境存取	`globalThis`

跨環境程式碼一般優先考慮 globalThis：

console.log(typeof globalThis.console); // 通常是 "object"

const hasFetch = typeof globalThis.fetch === "function";
console.log("是否提供 fetch：", hasFetch);

console.log(typeof globalThis.console); // 通常是 "object"

const hasFetch = typeof globalThis.fetch === "function";
console.log("是否提供 fetch：", hasFetch);

但 globalThis 只提供一致的存取方式，不會令所有環境擁有相同功能。

亦要注意：頂層的 let、const 不會因此自動成為全域物件的屬性；模組中的宣告則屬於模組作用域。

1.7 語言、平台 API 與第三方套件的分別

寫 JavaScript 時，你經常會同時接觸三層功能：

層次	來源	例子
核心語言	ECMAScript 標準	`Array`、`Map`、`Promise`
平台 API	瀏覽器或其他執行環境	DOM、`fetch()`、`node:fs`
第三方套件	另外安裝的函式庫或框架	React、Vue、Express

例如：

const names = ["小明", "小美"];
const result = names.map(name => `你好，${name}`);

console.log(result);

const names = ["小明", "小美"];
const result = names.map(name => `你好，${name}`);

console.log(result);

陣列、map()、模板字串：核心語言。
console：平台 API。
沒有使用第三方套件。

先分清功能來自哪一層，會更容易找文件、理解錯誤及判斷相容性。

1.8 動手練習

練習一：在瀏覽器 Console 執行

開啟瀏覽器開發者工具，選擇 Console，輸入：

console.log("你好，JavaScript！");
console.log(10 + 20);
console.log(typeof document);
console.log(typeof process);

console.log("你好，JavaScript！");
console.log(10 + 20);
console.log(typeof document);
console.log(typeof process);

在一般網頁環境中，通常會看到：

你好，JavaScript！
30
object
undefined

你好，JavaScript！
30
object
undefined

練習二：在 Node.js 執行

安裝 Node.js 後，建立 hello.js：

console.log("你好，Node.js！");
console.log(10 + 20);
console.log(typeof document);
console.log(typeof process);

console.log("你好，Node.js！");
console.log(10 + 20);
console.log(typeof document);
console.log(typeof process);

在終端機執行：

node hello.js

node hello.js

通常會看到：

你好，Node.js！
30
undefined
object

你好，Node.js！
30
undefined
object

這兩個練習展示：核心語言行為相同，但環境提供的物件不同。

typeof 可以安全檢查未宣告的名稱；但對仍處於暫時性死區的 let／const 變數使用 typeof，仍會拋出錯誤。

本節重點

JavaScript 是程式語言。
ECMAScript 定義核心語言規則。
引擎負責執行 JavaScript。
執行環境 提供引擎及額外平台能力。
瀏覽器與 Node.js 不具有完全相同的 API。
第三方框架不等於 JavaScript 本身。

最值得記住的一句話：

JavaScript 決定你怎樣寫程式；ECMAScript 規定語言行為；執行環境決定程式可以接觸甚麼外部功能。