在網頁開發中，透過 JavaScript 取得當前頁面的 URL 是非常基礎且頻繁的需求，無論是為了進行頁面導向、埋設追蹤碼，或是根據網址參數動態渲染內容，location 物件都是最核心的工具。
⚡ 快速跳轉（依實務情境選擇）：
核心屬性對照表
location 物件提供了多個屬性來拆解 URL 的不同區段，以下為開發者最常用的屬性對照：
| 屬性 | 說明 | 取得範例 (基於下方 URL) |
|---|---|---|
href | 完整的 URL 字串 | https://www.seanacnet.com/js/location-href.html?id=111#top |
pathname | 路徑部分 (不含網域與參數) | /js/location-href.html |
search | 查詢參數 (含開頭的 ?) | ?id=111 |
hash | 錨點部分 (含開頭的 #) | #top |
取得完整 URL 與各參數範例
若當前網址為：https://www.seanacnet.com:80/js/location-href.html?id=111&t=9#template
你可以直接透過 location 物件取得對應資訊：
// 取得完整 URL
console.log(location.href);
// 輸出: "https://www.seanacnet.com:80/js/location-href.html?id=111&t=9#template"
// 取得路徑
console.log(location.pathname);
// 輸出: "/js/location-href.html"
// 取得查詢參數
console.log(location.search);
// 輸出: "?id=111&t=9"
// 取得錨點
console.log(location.hash);
// 輸出: "#template"若你需要進一步處理複雜的查詢參數，建議搭配 URLSearchParams API 使用，這能讓你更輕鬆地解析與操作參數值。更多關於網址處理的細節，可參考這篇站內整理：[JS] Javascript 取得目前 URL 與相關參數(總整理)。
常見問題 Q&A
如何取得不含參數與錨點的純網址？
你可以將 location.origin 與 location.pathname 進行字串拼接，即可獲得不帶參數的基礎網址：
const cleanUrl = location.origin + location.pathname;
console.log(cleanUrl);
// 輸出: "https://www.seanacnet.com/js/location-href.html"如何修改網址並跳轉頁面？
直接對 location.href 賦值即可觸發頁面跳轉：
location.href = 'https://www.google.com';location.href 與 location.assign() 有什麼差別？
兩者效果相似，但 location.assign() 是一個函式，語意上更明確表示「指定新頁面」。若你不希望使用者透過瀏覽器的「上一頁」按鈕回到當前頁面，則應使用 location.replace('url')。
如何取得特定參數的值？
使用 URLSearchParams 是最有效率的解法：
const params = new URLSearchParams(location.search);
console.log(params.get('id')); // 輸出: "111"location.href 在各瀏覽器的相容性如何？
location.href 是 Web API 的標準屬性，所有現代瀏覽器（Chrome, Firefox, Safari, Edge）均完全支援。詳細規格可參考 MDN Web Docs。
參考資料與延伸閱讀
- MDN Web Docs：Location 介面屬性與方法詳解
- MDN Web Docs：Location.href 屬性說明
- MDN Web Docs：URLSearchParams API 操作指南
- MDN Web Docs：Location.assign() 與 Location.replace() 差異說明
- WHATWG HTML Living Standard：Location 物件規範
- 延伸閱讀：[JS GET URL]Javascript 取得網址 URL GET 參數字串 location search
- 延伸閱讀：[JS]Javascript 取得網址後面#(錨點)名稱 location hash
1 則自動引用通知