![[JS] Javascript 取得目前 URL 與相關參數(總整理)：window.location 9 大屬性速查表 特色圖片](https://seanacnet.com/wp-content/uploads/2026/10/cover_location_1792930261922-816x428.png)
現今網站製作隨著前後端分離架構普及，JavaScript 在處理頁面路由與網址操作上已是必備工具。當我們需要在前端透過 window.location 取得目前 URL 與相關參數時，清楚掌握每個屬性的回傳格式能避免許多字串裁切錯誤。本篇完整圖解並整理製作網頁最常使用的 9 個 JavaScript window.location 取得網址與參數語法。
⚡ 快速跳轉（依實務情境選擇）：
window.location 9 大屬性結構拆解圖與速查表
JavaScript 中所有與「當前頁面網址（URL）」相關的資訊，都封裝在 window.location（可簡寫為 location）物件中。
假設目前瀏覽器網址為：https://www.website.com:8080/type/page.html?id=111&t=9#template
以下為 9 大屬性的回傳值速查表（點選屬性名稱可前往該屬性的進階實作專篇）：
| 屬性名稱 | 用途說明 | 實際輸出結果 |
|---|---|---|
location.href | 取得完整 URL 字串 | "https://www.website.com:8080/type/page.html?id=111&t=9#template" |
location.protocol | 取得通訊協定（含結尾冒號 :） | "https:" |
location.host | 取得主機網域名稱＋非預設連接埠號 | "www.website.com:8080" |
location.hostname | 取得純網域名稱（不含連接埠號） | "www.website.com" |
location.origin | 取得完整來源（協定＋網域＋非預設埠） | "https://www.website.com:8080" |
location.port | 取得連接埠號字串（預設埠回傳空字串） | "8080" |
location.pathname | 取得頁面路徑（以 / 開頭） | "/type/page.html" |
location.search | 取得問號 ? 開頭的 GET 查詢參數字串 | "?id=111&t=9" |
location.hash | 取得井字號 # 開頭的頁面錨點名稱 | "#template" |
JavaScript 取得 URL 各項參數實作範例
這邊我們先假定目前的測試網址是：
https://www.website.com:8080/type/page.html?id=111&t=9#template接下來，我們依序使用 JavaScript 取得上方 URL 的 9 個區段資訊。
1. JS 取得完整網址：location.href
想取得目前當前完整的網址字串，或是將頁面導向新網址，可使用 location.href：
let s = location.href;
console.log(s);
// 輸出: "https://www.website.com:8080/type/page.html?id=111&t=9#template"2. JS 取得當前通訊協定：location.protocol
有時候我們會需要用 JS 取得網站當前傳輸協定，用來判斷網頁目前是 http: 還是加密的 https:，這時可以使用 location.protocol（注意回傳字串結尾包含冒號 :）：
let s = location.protocol;
console.log(s);
// 輸出: "https:"3. JS 取得主機網域與連接埠：location.host
取得目前網域名稱時，location 中有兩個屬性可以使用，分別為 location.host 與 location.hostname。當網址帶有非預設連接埠（如 :8080 或本地開發 :3000）時，location.host 會一併回傳 "網域名稱:連接埠號"（若為標準預設埠 HTTP 80 / HTTPS 443 則會自動省略埠號）：
let s = location.host;
console.log(s);
// 輸出: "www.website.com:8080"4. JS 取得純網域名稱：location.hostname
若只需要取得純淨的網域名稱（永遠不包含 :8080 等連接埠號，最適合用來判斷 localhost 或拆解子網域），請使用 location.hostname：
let s = location.hostname;
console.log(s);
// 輸出: "www.website.com"5. JS 取得包含協定(http/https)的來源網域：location.origin
如果你想取得包含前方通訊協定與主機位址的根網址（Origin），除了手動串接 location.protocol + '//' + location.host 外，更簡潔的做法是直接使用唯讀屬性 location.origin：
let s = location.origin;
console.log(s);
// 輸出: "https://www.website.com:8080"6. JS 取得目前連接埠號：location.port
取得當前網址明確指定的連接埠號，可使用 location.port（注意：若網址未標示連接埠，或使用 HTTP 預設 80 埠、HTTPS 預設 443 埠時，會回傳空字串 ""）：
let s = location.port;
console.log(s);
// 輸出: "8080"7. JS 取得目前頁面路徑：location.pathname
JS 要取得目前網域名稱後方、問號 ? 之前的頁面路徑，請使用 location.pathname：
let s = location.pathname;
console.log(s);
// 輸出: "/type/page.html"8. JS 取得 URL GET 參數字串：location.search
這是製作網頁最常用到的屬性之一。透過 location.search 可取得問號 ? 開頭的所有 GET 參數字串，並可搭配原生 URLSearchParams 直接提取特定參數值：
let s = location.search;
console.log(s);
// 輸出: "?id=111&t=9"
// 進階：搭配原生 URLSearchParams 直接取得特定參數值
const params = new URLSearchParams(location.search);
console.log(params.get('id')); // 輸出: "111"
console.log(params.get('t')); // 輸出: "9"9. JS 取得網址錨點名稱：location.hash
網頁常使用 # 錨點來快速移動到指定的 id 區塊。當 JS 需要取得目前的錨點名稱時，可使用 location.hash：
let s = location.hash;
console.log(s);
// 輸出: "#template"
// 若只需不含 # 號的純錨點名稱：
console.log(location.hash.slice(1)); // 輸出: "template"延伸技巧：頁面跳轉 assign()、replace() 與 reload() 差異
除了讀取上述 9 大屬性外，window.location 也提供 3 個控制頁面跳轉與重新整理的標準方法：
| 方法或操作語法 | 是否保留瀏覽器上一頁紀錄 (History) | 典型適用場景 |
|---|---|---|
location.href = url 或 location.assign(url) | ✅ 保留（按上一頁可返回原頁面） | 一般連結跳轉、商品列表進入詳情頁 |
location.replace(url) | ❌ 不保留（直接覆蓋當前歷史紀錄） | 登入成功後導頁、權限不足踢回首頁（防按上一頁死迴圈） |
location.reload() | 維持當前頁面紀錄 | 重新載入當前頁面以取得最新伺服器資料 |
若你想在不重新整理頁面的情況下解析「任意網址字串」或動態更新網址參數，請參考另一篇專文：如何透過 Javascript 取得網址與 URL 相關參數：location 物件與 new URL() 解析教學。
檢視 location 各語法於瀏覽器相容性
寫程式最怕遇到語法在特定瀏覽器中不相容，以下一併整理 location 中各項屬性在各個瀏覽器中的相容性查核表：
發表迴響