ES5, ES6 和 CommonJS 簡介

簡介

隨著時代推進，JavaScript 也有一些重大的演變，ES5 和 ES6 都帶來了重要的改良。此外，CommonJS 在模組化 JavaScript 的發展中也扮演關鍵角色，尤其是在伺服器端環境。以下將簡單介紹它們之間的差異和應用情境。

---

ES5

ES5 於 2009 年發布，是一次大幅提升 JavaScript 可用性與效能的重要更新。主要功能包含：

• 嚴格模式 ("use strict")：有助於偵測常見錯誤。
• 陣列方法：map(), filter(), reduce() 等。
• JSON 解析：內建 JSON.parse() 與 JSON.stringify()。
• 物件方法：Object.create(), Object.defineProperty()。 ES5 在所有瀏覽器中都有很高的支援度，是目前相容性最高的選擇。

---

ES6 (ECMAScript 2015)

ES6 引入現代語法與功能，使 JavaScript 更加強大且易讀：

• let 與 const：區塊作用域的變數宣告方式。
• 箭頭函式 (=>)：更簡潔的函式語法。
• 模板字面值 (Template Literals)：使用反引號與 ${variable} 進行字串插值。
• 類別 (class)：更直覺的物件導向寫法。
• 模組 (import/export)
• Promises 和 async/await：讓非同步操作更簡單直觀。 ES6 已被廣泛採用，但若需支援舊版瀏覽器，通常需要使用 Babel 等工具進行轉譯。

---

CommonJS

CommonJS 是一種為伺服器端 JavaScript (如 Node.js) 設計的模組系統：

• require() 與 module.exports 用於模組化。
• 同步載入模組，使其很適合後端環境。 範例：

javascript
1const fs = require("fs");  
2fs.readFileSync("file.txt", "utf8");  

CommonJS 在 Node.js 中仍然常見，但隨著 ES6 模組 (import/export) 普及，現代應用多傾向採用後者。

---

ES5 vs ES6 vs CommonJS

比較項目	ES5	ES6 (ES2015)	CommonJS
標準年份	2009	2015	非正式標準
執行環境	瀏覽器（舊） / Node.js 支援部分	現代瀏覽器 / Node.js	主要是 Node.js
模組語法	無原生模組	import / export	require() / module.exports
模組載入方式	無（需 IIFE / script tag）	靜態解析（編譯時）	動態載入（執行時）
是否支援靜態分析	否	是	否
執行時機	立即執行 script	在模組鏈接後執行	在第一次 require 呼叫時執行
匯出值是否為常數	N/A	是（綁定 live binding）	否（拷貝值或物件）
匯入循環依賴	不支援	支援，透過 live binding	支援，但可能是未完成的物件
預設匯出	無	export default	透過 module.exports = ... 模擬
具名匯出	無	export { a, b }	透過設定 exports 屬性

---

結論

ES5 注重相容性，ES6 帶來現代功能，而 CommonJS 在後端開發中依然有其角色。理解它們的差異有助於為專案選擇最佳方案。