JavaScript 中 location.host 和 location.hostname 之间的区别

javascriptfront end technologyprogramming scriptsweb development

JavaScript 的 Location 对象提供对当前 URL 组件的访问。可以将此对象视为当前位置的只读窗口。

Location 对象有两个经常混淆的属性:host 和 hostname。

Location.host

host 属性返回当前 URL 的主机名、端口号和协议。例如，如果当前 URL 为"http://example.com:8080/path/to/page.html"，则 host 的值将为"example.com:8080"。

与 location.hostname 相比，使用 location.host 也有几个优势。

首先，它更具体。如果您需要端口号或协议，您可以确信它将由 host 属性返回。

其次，它更简洁。如果您只需要主机名，则可以使用较短的 hostname 属性。但是，如果您还需要端口号或协议，则可以使用 host 属性并一次性获取所有信息。

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

另一方面，hostname 属性仅返回当前 URL 的主机名部分。例如，如果当前 URL 为"http://example.com:8080/path/to/page.html"，则主机名的值将为"example.com"。

与 location.host 相比，使用 location.hostname 有几个优势。

首先，它更具可读性。查看 URL 时，您通常对主机名比端口号或协议更感兴趣。

其次，它更一致。主机名是 URL 的必需部分，而端口号和协议是可选的。这意味着并非所有 URL 都具有主机属性，但它们都具有主机名。

第三，它更具弹性。如果您更改 URL 的端口号或协议，主机名仍将保持不变。但 host 属性则不然。

一般来说，除非您特别需要端口号或协议，否则应使用 location.hostname。

原因是主机名是 URL 的"人性化"部分，而 host 属性还包括端口号和协议。大多数情况下，这些额外的信息是不需要的。

不过也有一些例外。例如，如果您需要使用当前 URL 作为基础来构建新 URL。在这种情况下，您需要使用 location.host 来保留端口号和协议。

另一个例外是，如果您正在使用 URL 缩短器。在这种情况下，您需要使用 location.host 来保留原始 URL 的主机名。

下表突出显示了 JavaScript 中 location.host 和 location.hostname 之间的主要区别 -

基础比较	location.host	location.hostname
定义	host 属性返回当前 URL 的主机名、端口号和协议	另一方面，hostname 属性仅返回当前 URL 的主机名部分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 中"人性化"的部分。