作者：乔·阿塔迪✏️
URL 是网络应用的核心组件。尤其在应用需要向 API 发送请求时，构建正确的 URL 至关重要。所有现代浏览器都支持 URL API，它提供了一种解析和操作 URL 的便捷方法，允许轻松访问 URL 的各个组成部分。
理解 URL 的结构
让我们以以下 URL 为例：
https://example.com/api/search?query=foo&sort=asc#results
立即学习“Java免费学习笔记（深入）”；
这个 URL 包含以下部分：
-
协议:
https -
主机:
example.com -
路径:
/api/search -
查询字符串:
?query=foo&sort=asc -
片段标识符:
#results
借助现代 JavaScript，我们可以解析 URL 并提取这些不同的部分。
解析 URL
在 URL API 出现之前，开发者通常使用 <a> 元素来解析 URL，但这方法存在一些局限性：
- 依赖 DOM 环境，无法在 Node.js 等环境中使用。
- 缺乏错误处理机制。
正则表达式也能解析 URL，但编写和维护起来较为复杂且容易出错。
URL API 提供了一种更简洁、高效的解决方案。只需将 URL 字符串传递给 URL 构造函数即可：
<code class="javascript">const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar</code>
解析查询字符串
访问 URL 查询字符串的方法有两种：
-
search属性：返回包含完整查询字符串（包括?字符）的字符串。 -
searchParams属性：返回一个URLSearchParams对象。
如果需要获取特定参数的值，可以使用 get() 方法：
<code class="javascript">const url = new URL('https://example.com/api/search?query=foobar&maxresults=10');
console.log(url.searchParams.get('query')); // foobar
console.log(url.searchParams.get('maxresults')); // 10</code>
如果存在多个同名参数，可以使用 getAll() 方法获取所有值的数组：
<code class="javascript">const url = new URL('https://example.com/api/search?tag=tag1&tag=tag2&tag=tag3');
console.log(url.searchParams.getAll('tag')); // ['tag1', 'tag2', 'tag3']</code>
构建查询字符串
手动构建查询字符串容易出错，尤其当参数包含特殊字符时。URLSearchParams 对象提供了一种更安全可靠的方法：
<code class="javascript">const params = new URLSearchParams();
params.append('foo', 'bar');
params.append('baz', 'qux');
params.append('tag', 'one&two');
console.log(params.toString()); // foo=bar&baz=qux&tag=one%26two</code>
迭代查询参数
URLSearchParams 对象的 entries() 方法提供了一种便捷的方式来迭代查询参数：
<code class="javascript">function listQueryParams(queryString) {
const params = new URLSearchParams(queryString);
params.entries().forEach(([key, value]) => console.log(`${key}: ${value}`));
}</code>
构建完整的 URL
以下示例演示如何使用基本 URL 和查询参数构建完整的 URL：
<code class="javascript">const url = new URL('https://example.com/api/search');
url.searchParams.append('query', 'test');
url.searchParams.append('tag', 'tag1');
url.searchParams.append('tag', 'tag2');
// https://example.com/api/search?query=test&tag=tag1&tag=tag2
console.log(url.toString());</code>
验证 URL 的有效性
使用 URL 构造函数可以轻松验证 URL 的有效性：
<code class="javascript">function isValidURL(url) {
try {
new URL(url);
return true;
} catch (error) {
return false;
}
}</code>
或者使用更简洁的 URL.canParse() 方法（浏览器兼容性需注意）：
<code class="javascript">URL.canParse(urlString); // 返回true或false</code>
创建相对 URL
URL 构造函数支持第二个参数作为基准 URL，用于创建相对 URL。
使用 window.location 对象
window.location 对象表示当前页面的 URL，可以作为 URL 构造函数的基准 URL。
使用 URLPattern 匹配 URL 模式
URLPattern API (浏览器兼容性需注意) 提供了一种更强大的方式来匹配和提取 URL 中的模式，尤其适用于单页应用中的客户端路由。
总结
URL API 提供了一种安全、高效的方式来操作 URL，避免了手动解析或使用正则表达式带来的复杂性和错误风险。URLSearchParams 对象简化了查询字符串的构建和操作，而 URLPattern API (浏览器兼容性需注意) 则提供了更高级的 URL 模式匹配功能。
延伸阅读：
- MDN Web Docs: URL 接口
- MDN Web Docs: URLPattern API
快速上手 LogRocket：
- 访问 https://www.php.cn/link/ed1f65a161ee1de13bf41dac2781af4f 获取应用 ID。
- 使用 npm 或 script 标签安装 LogRocket 并初始化：
LogRocket.init('your-app-id') - (可选) 安装插件以集成您的技术栈。
