JavaScript 里 location.host 与 location.hostname 的差异

在 JavaScript 的 Web 开发中，理解 location.host 与 location.hostname 的差异十分关键，这两个属性虽然都与当前页面的主机信息相关，但有着不同的用途和表现。

location.host 这个属性返回的是当前 URL 的主机名和端口号。它的格式是“主机名:端口号”，如果 URL 使用的是默认端口（例如 HTTP 的 80 端口或 HTTPS 的 443 端口），那么端口号部分在返回值中会被省略。例如，当访问 http://www.example.com 时，location.host 返回 “www.example.com”；而当访问 http://www.example.com:8080 时，location.host 则返回 “www.example.com:8080”。这一属性在需要完整获取当前页面所使用的主机和端口信息时非常有用，比如在进行跨域请求配置或者动态加载资源时，明确端口号可能是必要的。

location.hostname 则只返回当前 URL 的主机名部分，不包含端口号。不管 URL 中是否指定了端口号，location.hostname 都只会返回域名。例如，对于 http://www.example.com 和 http://www.example.com:8080 这两个 URL，location.hostname 都返回 “www.example.com”。该属性在许多场景下用于简单地识别当前页面所属的域名，比如在进行域名相关的逻辑判断，或者需要在不同子域名之间共享某些数据时，只关注主机名即可。

在实际应用中，如果要构建一个根据不同端口号进行不同操作的功能，就需要使用 location.host，通过解析返回值中的端口号来执行相应逻辑。而如果只是想判断当前页面是否来自某个特定的域名，使用 location.hostname 就能满足需求，无需考虑端口号的干扰。

location.host 和 location.hostname 虽然看似相似，但在功能和使用场景上存在明显差异。Web 开发者需要根据具体的业务需求，准确选择合适的属性来获取所需的主机信息，从而更高效地完成项目开发任务。