在前端开发中，我们常常需要获取当前页面的 URL 相关信息。其中，window.location.host 和 window.location.hostname 是两个常用的属性，它们都可以用来获取当前页面的主机名（即域名），但二者还是有所不同。
window.location.host
window.location.host 包含了当前页面 URL 中的主机名和端口号（如果有）。例如：假设当前页面 URL 为 https://www.example.com:8080/path/to/page.html，那么 window.location.host 的值就是 www.example.com:8080。
下面是获取 window.location.host 的示例代码：
const host = window.location.host; console.log(host); // 输出 "www.example.com:8080"
window.location.hostname
window.location.hostname 只包含了当前页面 URL 中的主机名。在上例中，window.location.hostname 的值就是 www.example.com。
下面是获取 window.location.hostname 的示例代码：
const hostname = window.location.hostname; console.log(hostname); // 输出 "www.example.com"
区别与使用场景
二者的区别很明显了：window.location.host 包含了端口号，而 window.location.hostname 则不包含。因此，当我们需要访问当前页面主机名时，应该优先选择 window.location.hostname。
一般情况下，我们只需要获取主机名，而不需要端口号。但有时候，我们也需要在 URL 中包含端口号，比如在使用 WebSocket 进行通信时。这时候就可以使用 window.location.host。
下面是一个示例代码，演示了如何使用 window.location.host 和 window.location.hostname：
-- -------------------- ---- ------- ----- ---- - --------------------- ----- -------- - ------------------------- ------------------ ---------- -- -- ---------------------- ---------------------- -------------- -- -- ----------------- -- ----- --- ----------------------- - -------------------------- -- -- --------- ----- - ---- - --------------------------- -- ------------------- -
总结
window.location.host 和 window.location.hostname 都是获取当前页面主机名的属性，但它们的具体含义和用途有所不同。在实际开发中，我们应该根据具体情况灵活选择使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27731