在前端开发中，我们经常需要从URL中获取协议、域名和端口等信息。这些信息对于构建网络应用非常重要，因此需要深入了解如何从URL中获取它们。
URL的组成部分
一个URL（Uniform Resource Locator）通常包含以下几部分：
<protocol>://<host>:<port>/<path>?<query>#<fragment>
其中：
protocol：代表访问资源所使用的协议，例如HTTP、HTTPS、FTP等。host：代表主机名或IP地址。port：代表主机上开放的端口号，每个协议都有默认的端口号，例如HTTP的默认端口号是80。path：代表资源在服务器上的路径。query：代表查询参数，通常用于向服务器发送额外的数据。fragment：代表文档内的特定位置。
从URL中获取协议、域名和端口
获取协议
要从URL中获取协议，可以使用JavaScript中的location.protocol属性。例如：
const protocol = window.location.protocol; console.log(protocol); // "https:"
获取域名
要从URL中获取域名，可以使用JavaScript中的location.hostname属性。例如：
const hostname = window.location.hostname; console.log(hostname); // "example.com"
获取端口
要从URL中获取端口，可以使用JavaScript中的location.port属性。例如：
const port = window.location.port; console.log(port); // "8080"
需要注意的是，如果URL中没有指定端口号，则location.port返回空字符串。
总结
从URL中获取协议、域名和端口在前端开发中非常常见。本文介绍了如何使用JavaScript获取这些信息，希望能对你有所帮助。
代码示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
-------
------
--------
----- -------- - -------------------------
----- -------- - -------------------------
----- ---- - ---------------------
------------------------------
------------------------------
---------------------------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9041