什麼是網址 URL？如何取得網址的參數？

Markus Winkler on Unsplash

之前分享過【網路請求帶參數的方式】，開發者可以透過 URL 代入參數，來向伺服器請求特定的資源，我們當然也可以擷取 URL 的內容，來做為後續開發的判斷條件，這篇就來記錄一下，網址(URL) 和域名(Domain) 是什麼，以及如何取得網址的參數吧！

我們常說的網址連結 URL 完整名稱是 Uniform Resource Locator 直譯為「統一資源定位符」，指的是一個網站的位置，具有唯一性，網址的組成包含以下幾個部分

• 通訊協定
• 子網域
• 域名 (也就是Domain)
• 端口號 (port 號)
• 路徑名稱
• 網址參數

透過圖片來看會更清楚

圖片來源：凱士網頁設計公司

我自己也整理了一份表格，範例網址：

https://www.google.com.tw/search?q=多啦A夢

以上就是網址 URL 的組成啦，不過各個伺服器之間，並不是依靠網址來通訊連線的，而是透過一個 IP 地址，ex: http://192.XXX.XX.27:5003，只不過這樣一長串的數字並不利於人腦記憶，而且 IP 地址是浮動的，因此才會設置相對應的網域名稱！

我們透過瀏覽器輸入網址，並發出網路請求後，會先連線到 DNS (Domain Name Server)，根據 URL 內的 Domain，去找到這個網域所對應的 IP 地址，再將我們的請求導入該 IP 地址，取得請求的資源。

那麼今天我有一組 URL ，我想在開發時取得 URL 上的字串來進行後續開發的判斷條件，執行不同的 function ，則可以使用瀏覽器本身的 Web api 來取得。

詳細作法參考 URLSearchParams MDN 裡面的範例就可以了，可以使用 get() 取得當前 query，用 append() 添加新的 query 等。

另外要注意的是，某些符號在 URL 上屬於保留字元，例如 & 、？，如果一定要使用保留字元，就必須進行轉碼

encodeURI、decodeURI 對整個 URL 進行轉碼

encodeURIComponent、decodeURIComponent 僅對查詢參數進行轉碼

const uri = ​'https://mozilla.org/?x=шеллы';
const encodeUri = encodeURI(uri);

console.log(encodeUri);
// "https://mozilla.org/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B"

今天的筆記就到這邊啦～

我是Amber，前端學習中，歡迎交流討論🧸

參考資料：

URL意思是什麼？一篇了解網址結構怎麼設計及使用！

URL中的保留和不安全字符