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