JS學習筆記：解析網址與處理網址中的參數(URL Paramaters)
3 min readAug 17, 2020
Ｑ：什麼是網址參數？
解析網址（Parsing URL）
要解析網址的話，可以使用瀏覽器內建的 URL 這個 Web API，使用的方式很簡單，把網址代進去 URL 建構式就可以了：
let url= new URL('https://www.hexschool.com/?recommend=tom');建立好了之後就可以使用幾個不同的屬性來取得網址的內容：
- 取得完整網址(URL)：
url.href ; //https://www.hexschool.com/?recommend=tom(若是使用location物件取得網址方法則是location.href）
- 取得網址中的主機名稱(網域名稱)：
url.href ; //www.hexschool.com(若是使用location物件取得網域名稱則是location.hostname）
- 取得網頁路徑(以網址『https://www.hexschool.com/archives/』為例)：
url.pathname; // /archives/(若是使用location物件取得網域名稱則是location.pathname）
- 取得網址中的通訊協定部分
url.protocol; // "https:"(若是使用location物件取得網域名稱則是location.protocol）
- 取得網頁參數部分
url.search; // "?recommend=tom"(若是使用location物件取得網域名稱則是location.protocol）
整理網址參數的好幫手：URLSearchParams
url.searchParams 這個物件是透過另一個名為 URLSearchParams 的 Web API 所建立的，透過這個 API 可以很方便的幫去設定、刪除和讀取網址字串的部分。
想要檢視這個 URLSearchParams 物件最簡單的方是直接使用 toString() ：
url.searchParams.toString(); // "recommend=tom"*若是只有url.searchParams，則出來會是{}
若要取得解析後的網址參數，只需要使用 .entries() 方法搭配 for … of 就可以了：
let params = url.searchParams;
for (let pair of params.entries()) {
console.log(`key: ${pair[0]}, value: ${pair[1]}`)
}//key:recommend , value:tom
*Object.entries()本身會將object裡的鍵值對取出並以[key , value]的方式呈現，配上for … of的做法就能將網址參數簡單的解析出來
