JavaScript 取得 URL Query String 與 Hash 實用技巧

2025-07-31 251 words 2 minutes

Contents

在前端開發中，經常需要從網址取得 Query String 參數，例如做頁面參數傳遞、SPA 路由、或是根據網址參數顯示不同內容。這篇文章會介紹幾種常見的 JavaScript 取得 Query String 方法，並延伸說明 location.hash、History API 及 URL API 的應用。

操作流程

使用 URL API 取得 Query String

現代瀏覽器已經支援 URL API，讓我們可以很方便地解析網址：

1
2
3
4
5


const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);

const value = params.get('key'); // 將 "key" 換成你要找的參數名稱
console.log(value);

小提示

URL API 只在現代瀏覽器支援，IE 不支援，建議專案要考慮瀏覽器相容性。

監聽 location.hash 變化

如果你的頁面有用到 hash 路由（例如 SPA），可以監聽 hash 變化：

1
2
3


window.addEventListener("hashchange", function() {
  console.log("Hash changed:", window.location.hash);
});

History API 操作瀏覽器歷史紀錄

可以用 History API 來控制瀏覽器的前進/後退、pushState 等：

1
2
3
4
5
6


// 新增一筆歷史紀錄
history.pushState({page:1}, "title 1", "?key=value#hash1");
// 監聽 popstate 事件
window.addEventListener('popstate', function(event) {
  console.log('location: ' + document.location + ', state: ' + JSON.stringify(event.state));
});

程式碼範例

以下是完整範例，展示如何取得 Query String 並監聽 hash 變化：

1
2
3
4
5
6
7
8
9


// 取得 Query String 參數
const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
console.log('參數 key:', params.get('key'));

// 監聽 hash 變化
window.addEventListener("hashchange", function() {
  console.log("Hash changed:", window.location.hash);
});

踩雷心得

早期常用 location.search 字串手動切割，容易出錯，建議直接用 URL API。
IE 不支援 URL API，舊專案要注意相容性。
location.hash 只會取得 # 後面的內容，不包含 Query String。
History API 操作不當可能導致瀏覽器返回行為異常。

感言/總結

這些 API 讓前端處理網址參數變得非常簡單，建議新專案都直接用 URL API。遇到瀏覽器相容性問題時，可以考慮 polyfill 或 fallback 寫法。實際開發時，建議多利用 MDN 文件查詢細節。

心智圖

mindmap root((js Query String)) 取得 Query String URL API 傳統字串切割監聽 hash 變化 hashchange 事件操作歷史紀錄 History API 踩雷心得相容性問題 hash 與 query 差異參考連結 MDN Stack Overflow 技術部落格