在JavaScript开发中，获取当前页面的域名是一项基础且高频的操作。最核心且最常用的方法是直接使用 window.location.hostname 属性，这一方法不仅代码简洁，而且兼容性极佳，能够满足绝大多数业务场景的需求，无论是用于环境判断、接口请求配置，还是数据埋点，掌握获取域名的多种技巧及其适用场景，对于前端工程师而言至关重要，本文将深入剖析从基础属性到现代API的各种实现方案,并提供处理复杂边缘情况的专业建议。
利用 window.location 对象获取基础信息
浏览器提供的 window.location 对象包含了当前URL的所有信息，是获取域名最直接的途径，理解该对象下不同属性的区别,是精准获取域名的第一步。
window.location.hostname 是获取纯域名的首选属性，它返回的是URL中的网络位置部分，不包含协议、端口号或路径信息，对于地址 https://www.example.com:8080/path，hostname 将返回 www.example.com，这是最符合“域名”定义的属性。
与之容易混淆的是 window.location.host，该属性返回的是主机名加上端口号，如果当前URL使用了非标准端口（如8080），host 会返回 www.example.com:8080，在配置API请求地址时，如果后端服务对端口敏感，必须使用 host 而非 hostname,否则可能导致请求失败。
window.location.origin 也是一个常用属性，它返回协议、主机名和端口的完整组合（即 https://www.example.com:8080），在进行跨域资源共享（CORS）判断或构建绝对路径时，origin 是最安全的选择,因为它自动包含了必要的上下文信息。
使用 URL API 解析任意字符串域名
在现代前端开发中，我们往往需要处理的不仅仅是当前页面的URL，还需要解析外部的链接字符串，ES6标准引入的 URL 接口 提供了比正则表达式更强大、更易读的解析能力。
通过实例化 new URL(urlString)，我们可以轻松解析任意合法的URL字符串，该实例同样拥有 hostname、host 和 origin 等属性，这种方法的优势在于它内置了浏览器的解析逻辑，能够自动处理各种复杂的URL格式,减少了手动编写正则表达式可能带来的错误。
在使用 URL API 时，必须进行错误捕获，如果传入的字符串不是有效的URL，构造函数会抛出异常，专业的代码实现应当包含 try...catch 块，以确保在传入无效参数时程序能够优雅降级，而不是直接崩溃,这种防御性编程思维体现了代码的健壮性和专业度。
正则表达式提取与边缘情况处理
尽管 URL API 功能强大，但在不支持ES6的极老旧环境中，或者需要从非标准格式的字符串中提取域名时，正则表达式 依然是不可或缺的利器。
编写一个完美的域名提取正则并不容易，一个专业的正则表达式需要考虑是否包含协议头、是否包含端口号、是否包含路径参数等。/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n?]+)/img 是一个较为通用的模式,它能够尝试匹配并捕获域名主体。
正则方案存在维护成本高、可读性差的缺点，在实际工程中，除非有特殊的性能瓶颈或兼容性要求，否则优先推荐使用 URL API，如果必须使用正则，建议添加详细的注释并编写充分的单元测试，以覆盖包含IP地址、特殊字符在内的各种边缘情况。
实际应用场景与安全考量
获取域名的技术细节固然重要，但将其应用到实际业务场景中时,还需要考虑业务逻辑和安全性。
在多环境部署（开发、测试、生产）中，前端通常需要根据域名动态配置API接口地址或资源路径，通过判断 hostname 是否包含 dev 或 test 字符串，来切换不同的环境配置，这比硬编码配置更加灵活,减少了发布时人为修改配置的风险。
在数据埋点与统计中，准确的域名信息有助于区分不同站点或子站的数据流量，可能需要处理子域名，使用 hostname.split('.').slice(-2).join('.') 可以获取主域名（如将 api.example.com 转换为 example.com）,这对于聚合统计非常有用。
从安全角度来看，虽然获取域名本身不会导致XSS（跨站脚本攻击），但在将获取到的域名拼接到HTML中或用于跳转时，必须进行严格的校验，切勿直接将 window.location 的参数未经转义就输出到页面，防止恶意URL利用跳转漏洞进行钓鱼攻击，始终遵循“输入验证、输出编码”的安全原则。
JavaScript获取域名虽然看似简单，但 hostname、host 和 origin 的细微差别决定了代码的准确性，在处理当前页面URL时，window.location.hostname 是最高效的选择；在解析外部链接时，URL API 是现代且标准的解决方案，结合实际业务场景，灵活运用这些方法，并辅以必要的安全校验,是构建高质量前端应用的基础。
相关问答
Q1：在JavaScript中，window.location.host 和 window.location.hostname 有什么本质区别？
A： window.location.hostname 仅返回域名（如 www.example.com），不包含端口号；而 window.location.host 返回域名加上端口号（如 www.example.com:8080），如果URL使用的是默认端口（HTTP为80，HTTPS为443），浏览器通常会隐藏端口号，此时两者的返回值可能相同，但在非默认端口环境下,混用这两个属性会导致接口请求失败或跨域错误。
Q2：如何获取不带“www”前缀的纯净域名？
A： 可以先获取 hostname，然后通过字符串操作或正则替换移除前缀。let domain = window.location.hostname; if (domain.startsWith('www.')) { domain = domain.slice(4); }，这种方法简单直接且兼容性好,适用于大多数需要标准化域名的场景。
希望这篇文章能帮助你更好地理解JavaScript中获取域名的方法，如果你在项目中遇到了特殊的URL解析难题，欢迎在评论区分享你的具体场景,我们可以一起探讨最佳的解决方案。
