JS 取得網址連接埠號：location.port 使用教學與常見問題排查

在 JavaScript 開發中，若需要動態獲取當前網頁的連接埠號（Port），最直接的方式就是使用 window.location.port。這在處理跨網域請求、環境判斷或動態生成 API 連結時非常實用。

⚡ 快速跳轉（依實務情境選擇）：

• 核心語法與範例
• 常見問題與邊界情境
• Location 屬性對照表

核心語法與範例

要取得當前網址的連接埠號，直接存取 location.port 即可。若網址中未明確指定連接埠，瀏覽器通常會回傳空字串。

程式碼範例：

// 假設當前網址為：https://www.seanacnet.com:8080/index.html
const port = location.port;

console.log(port); 
// 輸出： "8080"

常見問題與邊界情境

在實際開發中，location.port 的行為可能會因為網址結構而產生預期外的結果，以下是開發者最常遇到的邊界情境：

1. 為什麼取得的連接埠是空字串？

當網址使用標準 HTTP (80) 或 HTTPS (443) 協定，且網址列未明確寫出連接埠時，location.port 會回傳空字串 ""，而非 80 或 443。這是瀏覽器的標準行為，因為這些連接埠是該協定的預設值。

解決思路：
若你需要確保取得數值，可以使用邏輯判斷：

function getPort() {
  if (location.port !== "") {
    return location.port;
  }
  return location.protocol === "https:" ? "443" : "80";
}

console.log(getPort());

2. 瀏覽器相容性

location.port 屬於標準 Web API，在所有主流瀏覽器（Chrome, Firefox, Safari, Edge）中均有完整支援。若需查詢詳細的技術規格與各版本差異，可參考 MDN Location: port 官方檔案。

Location 屬性對照表

除了 port 之外，location 物件還提供了許多屬性來拆解 URL。若想深入瞭解如何靈活運用這些屬性，建議參考這篇站內整理：[JS] Javascript 取得目前 URL 與相關引數(總整理)。

屬性名稱	說明	範例 (基於 https://seanacnet.com:8080)
location.protocol	取得協定	https:
location.hostname	取得網域	www.seanacnet.com
location.port	取得連接埠號	8080
location.href	取得完整網址	https://www.seanacnet.com:8080/...

---

延伸閱讀：

• [JS] Javascript 取得網址 URL 與相關引數 – location
• 如何使用Chrome套件解決Localhost開發中的CORS問題