什麼是編碼？ 🔐
在Web開發中，你經常會聽到「編碼」、「Base64」、「URL編碼」等術語。編碼到底是什麼？讓我用非常簡單的方式來解釋！
用日常生活來比喻編碼？
我們可以把編碼比作翻譯。
翻譯的故事 🌏
讓我們把中文的「你好」轉換成不同的形式：
- 英文: "Hello" (英文編碼)
- 數字: "78 105 104 97 111" (數字編碼)
- 表情符號: "👋😊" (表情符號編碼)
編碼 = 將資料轉換為另一種格式
編碼的定義
編碼 (Encoding)
- 將資料轉換為特定格式的過程
- 目的：用於傳輸、儲存、顯示等
解碼 (Decoding)
- 將編碼的資料恢復為原始狀態的過程
原始資料 → [編碼] → 轉換後的資料 → [解碼] → 原始資料
"你好" → "%E4%BD%A0%E5%A5%BD" → "你好"
為什麼需要編碼？
1. 安全傳輸 📤
特殊字元或中文在網際網路上可能會出現亂碼。
原始: "你好"
URL編碼: "%E4%BD%A0%E5%A5%BD"
→ 可以在網際網路上安全傳輸！
2. 將二進位資料轉換為文字 🖼️
可以將圖像或檔案轉換為文字進行傳輸。
圖像檔案 → Base64編碼 → 文字字串
→ 可以包含在JSON或HTML中！
3. 處理特殊字元 ✨
URL中有些字元不能使用。
空格: " " → "%20"
&: "&" → "%26"
#: "#" → "%23"
主要編碼類型
1. Base64編碼 📦
用於將圖像或檔案轉換為文字！
原始文字:
Hello World
Base64編碼:
SGVsbG8gV29ybGQ=
特點:
- 將二進位資料轉換為文字
- 用於電子郵件、JSON、HTML
- 資料大小增加約33%
- 不是加密！（任何人都可以解碼）
使用範例:
<!-- 直接在HTML中嵌入圖像 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAA..." />
2. URL編碼 (百分號編碼) 🔗
在URL中安全地包含中文或特殊字元！
原始:
https://example.com/search?q=你好
URL編碼:
https://example.com/search?q=%E4%BD%A0%E5%A5%BD
需要編碼的字元:
空格: " " → "%20" 或 "+"
中文: "你好" → "%E4%BD%A0%E5%A5%BD"
特殊字元: "?" → "%3F"
"&" → "%26"
"=" → "%3D"
"#" → "%23"
安全字元 (無需編碼):
A-Z, a-z, 0-9, -, _, ., ~
3. HTML實體編碼 📝
在HTML中顯示特殊字元！
原始:
<div>Hello & Goodbye</div>
HTML實體:
<div>Hello & Goodbye</div>
主要實體:
< → <
> → >
& → &
" → "
' → '
空格 →
4. UTF-8編碼 🌏
可以表示世界上所有語言的編碼！
特點:
- 可以表示中文、日文、表情符號等所有字元
- Web標準編碼
- 英文是1位元組，中文是3位元組
範例:
英文 "A": 1位元組
中文 "好": 3位元組
表情符號 "😊": 4位元組
實際應用範例
範例 1: 搜尋URL 🔍
使用者搜尋:
"學習JavaScript"
瀏覽器發送的URL:
https://google.com/search?q=%E5%AD%B8%E7%BF%92+JavaScript
範例 2: 將圖像轉換為Base64 📸
原始圖像:
logo.png (10KB)
Base64編碼:
iVBORw0KGgoAAAANSUhEUgAAAAUA... (13KB文字)
在HTML中使用:
<img src="data:image/png;base64,iVBORw0KGgo..." />
範例 3: 電子郵件附件 📧
電子郵件只能發送文字。檔案會先進行Base64編碼後發送！
檔案 → Base64編碼 → 包含在郵件正文中 → 接收者解碼
使用編碼工具
使用我們網站的工具直接嘗試編碼/解碼！
Base64編碼/解碼
- 將文字轉換為Base64
- 將Base64轉換為文字
- 將圖像轉換為Base64
URL編碼/解碼
- 轉換為URL安全字串
- URL解碼檢視原始內容
HTML實體轉換
- 將特殊字元轉換為HTML實體
- 將HTML實體轉換為特殊字元
練習：自己動手試試
練習 1: Base64編碼
- 開啟 Base64 Encoder
- 輸入 "Hello World"
- 點擊 Encode 按鈕
- 結果:
SGVsbG8gV29ybGQ= - 使用 Decode 再次確認 "Hello World"！
練習 2: URL編碼
- 開啟 URL Encoder
- 輸入 "你好"
- 檢視編碼結果
- 使用解碼確認原始內容！
編碼 vs 加密
編碼 🔄
- 目的: 資料格式轉換
- 安全性: 無（任何人都可以解碼）
- 範例: Base64、URL編碼
"Hello" → Base64 → "SGVsbG8="
任何人都可以解碼！ 🔓
加密 🔐
- 目的: 資料保護
- 安全性: 有（需要金鑰）
- 範例: AES、RSA
"Hello" → 加密 → "x8f2k9a..."
沒有金鑰無法解密！ 🔒
警告
重要: Base64不是加密！ 任何人都可以輕鬆解碼，因此不要僅用Base64保護密碼或重要資訊。
常見使用場景
1. Web開發 🌐
// URL編碼
const query = encodeURIComponent('你好');
// "%E4%BD%A0%E5%A5%BD"
// Base64編碼
const encoded = btoa('Hello World');
// "SGVsbG8gV29ybGQ="
2. API通訊 📡
{
"image": "data:image/png;base64,iVBORw0KGgo...",
"query": "%E4%BD%A0%E5%A5%BD"
}
3. 資料儲存 💾
圖像檔案 → Base64 → 以文字形式儲存在資料庫中
常見錯誤與解決方案
❌ 錯誤 1: 直接使用中文URL
// 錯誤方法
fetch('https://api.com/search?q=你好') // ❌ 可能導致錯誤
✅ 正確方法:
const query = encodeURIComponent('你好');
fetch(`https://api.com/search?q=${query}`) // ✅ 正確
❌ 錯誤 2: 將Base64誤認為加密
// Base64不是加密！
const password = btoa('mypassword123'); // ❌ 安全漏洞
// 任何人都可以用atob(password)解碼！
✅ 正確方法:
// 密碼應使用雜湊
import bcrypt from 'bcrypt';
const hashed = await bcrypt.hash('mypassword123', 10); // ✅
❌ 錯誤 3: 重複編碼
const text = '你好';
const encoded1 = encodeURIComponent(text);
const encoded2 = encodeURIComponent(encoded1); // ❌ 重複！
常見問題 (FAQ)
Q1: 為什麼Base64結尾有"="？
A: 這是填充(padding)！用於將資料長度調整為4的倍數。
"A" → "QQ==" (2個填充)
"AB" → "QUI=" (1個填充)
"ABC" → "QUJD" (無填充)
Q2: URL編碼中空格為什麼是"+"或"%20"？
A: 有兩種方式！
- Form URL Encoded: 空格 →
+ - Percent Encoding: 空格 →
%20兩者都正常，但%20更標準。
Q3: 什麼是UTF-8？
A: 一種可以表示世界上所有字元的編碼方式。是Web標準！
Q4: 編碼會增加資料大小嗎？
A: 是的！
- Base64: 增加約33%
- URL編碼: 中文增加約300%
- 英文: 幾乎沒有變化
什麼時候使用哪種編碼？
| 場景 | 編碼 | 工具 |
|---|---|---|
| 在HTML/JSON中包含圖像 | Base64 | Base64 Encoder |
| URL中包含中文/特殊字元 | URL編碼 | URL Encoder |
在HTML中顯示<、>、& | HTML Entity | HTML Entity Converter |
| 國際字元表示 | UTF-8 | Web標準（自動） |
下一步 🚀
如果你理解了編碼：
- ✅ Base64 Encoder - 練習Base64編碼
- ✅ URL Encoder - 練習URL編碼
- ✅ HTML Entity Converter - HTML實體轉換
- ✅ 了解URL結構 - URL的組成
- ✅ Image to Base64 - 圖像Base64轉換
總結
編碼並不難！只是將資料轉換為另一種格式而已。
要記住的要點:
- Base64: 二進位 → 文字（不是加密！）
- URL編碼: 中文/特殊字元 → URL安全字元
- HTML Entity: HTML特殊字元 → 實體代碼
- UTF-8: 表示世界上所有字元
直接用工具實驗一下，很快就會熟悉！ 🎉