JavaScript 中 location.host 和 location.hostname 之間的差異

JavaScript 的 Location 物件提供對目前 URL 元件的存取。人們可以將此物件視為當前位置的唯讀視窗。

Location 物件有兩個經常混淆的屬性：主機和主機名稱。

位置.主機

host 屬性傳回目前 URL 的主機名稱、連接埠號碼和協定。例如，如果目前 URL 為“http://example.com:8080/path/to/page.html”，則 host 的值為“example.com:8080”。

使用location.host的優點

使用 location.host 相對於 location.hostname 也有一些優點。

首先，它更具體。如果您需要連接埠號碼或協議，您可以確定主機屬性將傳回它。

第二，更簡潔。如果您只需要主機名，則可以使用較短的主機名稱屬性。但如果您還需要連接埠號碼或協議，則可以使用主機屬性並一次獲取所有資訊。

第三，它更面向未來。如果新增新的 URL 元件，它可能會包含在主機屬性中。主機名稱屬性不一定是這種情況。

位置.主機名稱

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

使用location.hostname的優點

使用 location.hostname 相對於 location.host 有一些優點。

首先，它更具可讀性。當您查看 URL 時，您通常對主機名稱比連接埠號碼或協定更感興趣。

第二，更一致。主機名稱是 URL 的必需部分，而連接埠號碼和協定是可選的。這意味著並非所有 URL 都具有主機屬性，但它們都具有主機名稱。

第三，它更有彈性。如果變更 URL 的連接埠號碼或協議，主機名稱仍將相同。主機屬性的情況並非如此。

什麼時候使用每個？

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

原因是主機名稱是 URL 中「人類可讀」的部分，而主機屬性還包括連接埠號碼和協定。大多數時候，不需要這些額外的資訊。

但是，也有一些例外。一個範例是，如果您需要使用目前 URL 作為基礎來建構新 URL。在這種情況下，您需要使用 location.host 來保留連接埠號碼和協定。

另一個例外是您使用 URL 縮短器。在這種情況下，您需要使用 location.host 來保留原始 URL 的主機名稱。

JavaScript 中 location.host 與 location.hostname 之間的差異

下表突顯了 JavaScript 中 location.host 和 location.hostname 之間的主要差異 -

比較基礎	位置.主機	#位置.主機名稱
#定義	host 屬性傳回目前 URL 的主機名稱、連接埠號碼和協定	另一方面，hostname 屬性只會傳回目前 URL 的主機名稱部分
範例	如果目前 URL 為“http://example.com:8080/path/to /page.html”，則主機的值為“example.com:8080	如果目前 URL 為“http://example.com:8080/path /to/page.html”，則主機名稱的值為“example.com”。
何時使用？	#如果您特別需要連接埠號碼或協議，則應使用 location.host。	除非您特別需要連接埠號碼或協議，否則您應該使用 location.hostname。
可讀性	主機屬性還包括連接埠號碼和協議，使其可讀性較差。	主機名稱是 URL 中「人類可讀」的部分。

結論

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

以上是JavaScript 中 location.host 和 location.hostname 之間的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！