使用 javascript 去取得網址參數(URL Parameters)的方法

在網址上有時可以看到像這樣的樣子：

https://github.com/search?q=vue

其中 ? 後面指的就是網址的參數(URL Parameters)，如果我們想要透過 javascript 去取值的話可以透過以下方法：

首先我們可以透過 Web API 的 URL ：

let githubURL = new URL('https://github.com/search?q=vue');

建構好之後可以透過不同的屬性來取得網址的內容：

// 取得完整網址（URL）
githubURL.href;      // "https://github.com/search?q=vue"

// 取得網址中的 hostname
githubURL.hostname;     // "github.com"

// 取得路徑
githubURL.pathname;   // "/search"

// 取得網址中的通訊協定部分
githubURL.protocol;    // "https:"

// 取得網頁參數部分
githubURL.search;     // "?q=vue"
githubURL.searchParams;  // URLSearchParams {}

那我們要去取得參數的話透過 searchParams 會比較好，用 search 只是抓到字串，需要再做一次額外的處理才能抓到參數的值。

這邊想要抓到 q 的值的話就用 get：

const q = urlParams.get('q')

就可以根據參數取得值了。

另外如果想要判斷是否有某個參數可以用 has

URLSearchParams.has()

要把所有參數跟值都列出來的話就用以下方法：

let params = githubURL.searchParams;
for (let pair of params.entries()) {
  console.log(`key: ${pair[0]}, value: ${pair[1]}`)
}

參考：
[JS] 使用 JavaScript 解析網址與處理網址中的參數（URL Parameters）
Quick Tip: Get URL Parameters with JavaScript