URI/URL/URN 完全指南：網位址的結構與奧秘
在開發網頁或串接 API 時，「網址」是我們最常接觸的東西。但你是否曾疑惑過：為什麼有時候叫 URI，有時候又叫 URL？? 後面的參數怎麼處理才安全？為什麼有些特殊字元會變成 %20？我們將通過這篇文章，徹底解開網址的結構與奧秘。
一、 URI、URL 與 URN：它們的關係
這三個術語經常被混用，但它們在概念上有明顯的層級關係。
1. 核心定義
- URI (Uniform Resource Identifier)：統一資源識別碼，是一個整體的總稱。只要能「唯一標識」一個資源的東西都叫 URI。
- URL (Uniform Resource Locator)：統一資源定位符。它不僅標識了資源，還告訴你「在哪裡」以及「如何獲取」（如
https://或ftp://）。 - URN (Uniform Resource Name)：統一資源名稱。它只給資源起個名字，不關心位置。就像一個人的身分證字號，換到哪裡都不會變。
2. 關係對照
「URL 是一種 URI，正如台北 101 的地址既是它的名稱，也指出了它在哪。但並非所有的 URI 都是 URL。」
| 類型 | 性質 | 範例 |
|---|---|---|
| URL | 地點 + 獲取方式 | https://hirimu.blog/posts/http |
| URN | 純粹名稱 (不具地點) | urn:isbn:9789863310001 |
| URI | 以上皆是 | 包含 URL 與 URN |
二、 網址結構深度解剖
一個標準的 URL（以 HTTPS 為例）可以拆解為以下精密組件：
text
https://user:pass@www.example.com:443/path/to/page?id=123&type=post#section
──┬── ────┬─── ───────┬────── ─┬─ ─────┬───── ─────┬───── ──┬──
Scheme UserInfo Host Port Path Query Fragment1. 各部位功能說明
| 組件 | 說明 | 注意事項 |
|---|---|---|
| Scheme | 協定類型 | 如 http, https, mailto, tel |
| Authority | 權威機構 | 包含 UserInfo, Host, Port |
| Path | 資源路徑 | 區分層級，通常與伺服器的路由對應 |
| Query | 查詢參數 | 以 ? 開頭，用 & 分隔多組鍵值對 |
| Fragment | 片段識別 | 以 # 開頭，僅由客戶端處理，不會發送給伺服器 |
三、 百分比編碼 (Percent-Encoding) 的陷阱
URL 的規範只允許使用特定的 ASCII 字元。當你想在網址中使用中文字、空格或特殊符號時，就必須進行編碼。
1. 為什麼會出現 %20？
空格在 URL 中是不合法的，根據規範會被轉換為十六進位碼。空格的 ASCII 是 32，轉換為十六進位即為 20，因此顯示為 %20。
2. 保留字元 vs 非保留字元
- 保留字元：如
/,?,:,@,&,=等。它們在網址結構中有特殊意義。如果你想在參數內容中「本身」包含這些字元，就必須編碼（例如&變為%26）。 - 非保留字元：字母、數字與
-,_,.,~。這些可以直接使用。
3. JavaScript 中的處理工具
我們應避免手動拼接網址，而是使用內建 API：
typescript
// ❌ 錯誤路徑：容易漏掉編碼或處理錯字元
const url = "https://api.com/search?q=" + userInput;
// ✅ 正確做法：使用 URLSearchParams
const params = new URLSearchParams({ q: "抹茶 ice cream & 鬆餅" });
console.log(params.toString()); // q=%E6%B3%B9+ice+cream+%26+%E9%AC%86%E9%A4%85四、 常見問題與限制
1. URL 長度限制
雖然 HTTP 協定本身沒有規定最大長度，但實務上：
- 瀏覽器限制：IE 時代限制為 2083 字元，現代 Chrome/Firefox 支援到數萬字元。
- 伺服器限制：許多 Web Server (如 Nginx) 預設限制在 4KB ~ 8KB 左右。
WARNING
超過長度限制時，伺服器會回傳 414 URI Too Long 狀態碼。
2. 相對路徑與絕對路徑
- 絕對路徑：
/styles/main.css（從網站根目錄開始）。 - 相對路徑：
./main.css（從當前目錄開始）。 在開發中建議統一使用絕對路徑或絕對網址，以避免在深層目錄下引用失靈。
總結
| 概念 | 重點整理 |
|---|---|
| 名稱辨析 | URL 定位地點，URN 標識名稱，URI 是它們的總稱。 |
| 參數處理 | 務必使用百分比編碼處理特殊字元與非 ASCII 文字。 |
| 伺服器通訊 | Fragment (#) 內容永遠不會離開你的瀏覽器送到後端。 |
進階挑戰
- 觀察一個含有中文字的網址，複製它到記事本中，看看它會變成什麼樣子。
- 在 JavaScript 中嘗試使用
encodeURI()與encodeURIComponent()，看看它們對/與&的編碼結果有何不同？