JavaScript 中 location.host 和 location.hostname 的區別

---

JavaScript 的 Location 物件提供了訪問當前 URL 元件的功能。可以將此物件視為當前位置的只讀視窗。

Location 物件有兩個經常被混淆的屬性：host 和 hostname。

Location.host

host 屬性返回當前 URL 的主機名、埠號和協議。例如，如果當前 URL 為“http://example.com:8080/path/to/page.html”，則 host 的值為“example.com:8080”。

使用 location.host 的優勢

與 location.hostname 相比，使用 location.host 還有一些優勢。

首先，它更具體。如果您需要埠號或協議，可以確保 host 屬性會返回它們。

其次，它更簡潔。如果您只需要主機名，可以使用較短的 hostname 屬性。但是，如果您也需要埠號或協議，則可以使用 host 屬性，一次性獲取所有資訊。

第三，它更具前瞻性。如果添加了新的 URL 元件，它很可能會包含在 host 屬性中。hostname 屬性不一定如此。

location.hostname

另一方面，hostname 屬性僅返回當前 URL 的主機名部分。例如，如果當前 URL 為“http://example.com:8080/path/to/page.html”，則 hostname 的值為“example.com”。

使用 location.hostname 的優勢

與 location.host 相比，使用 location.hostname 還有一些優勢。

首先，它更易讀。當您檢視 URL 時，通常比埠號或協議更關注主機名。

其次，它更一致。主機名是 URL 的必需部分，而埠號和協議是可選的。這意味著並非所有 URL 都有 host 屬性，但它們都具有 hostname 屬性。

第三，它更具彈性。如果更改 URL 的埠號或協議，主機名仍然相同。host 屬性並非如此。

何時使用哪個？

一般來說，除非您特別需要埠號或協議，否則應使用 location.hostname。

原因是 hostname 是 URL 的“人類可讀”部分，而 host 屬性還包括埠號和協議。大多數情況下，不需要這些額外的資訊。

但是，有一些例外情況。一個例子是，如果您需要使用當前 URL 作為基礎構建新的 URL。在這種情況下，您需要使用 location.host 以保留埠號和協議。

另一個例外情況是，如果您正在使用 URL 縮短服務。在這種情況下，您需要使用 location.host 以保留原始 URL 的主機名。

JavaScript 中 location.host 和 location.hostname 的區別

下表重點介紹了 JavaScript 中 location.host 和 location.hostname 之間的主要區別：

比較依據	location.host	location.hostname
定義	host 屬性返回當前 URL 的主機名、埠號和協議	另一方面，hostname 屬性僅返回當前 URL 的主機名部分
示例	如果當前 URL 為“http://example.com:8080/path/to /page.html”，則 host 的值為“example.com:8080”	如果當前 URL 為“http://example.com:8080/path /to/page.html”，則 hostname 的值為“example.com”。
何時使用？	如果您特別需要埠號或協議，則應使用 location.host。	除非您特別需要埠號或協議，否則應使用 location.hostname。
可讀性	host 屬性還包括埠號和協議，這使其可讀性降低。	hostname 是 URL 的“人類可讀”部分。

結論

在大多數情況下，您應該使用 location.hostname 而不是 location.host。它更易讀、更一致且更具彈性。但是，有一些例外情況，例如當您需要構建新的 URL 或使用 URL 縮短服務時。