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 缩短服务时。