在 JavaScript 中使用 URL

• 依赖 DOM 环境，无法在 Node.js 等环境中使用。
• 缺乏错误处理机制。

正则表达式也能解析 URL，但编写和维护起来较为复杂且容易出错。

URL API 提供了一种更简洁、高效的解决方案。只需将 URL 字符串传递给 URL 构造函数即可：

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

解析查询字符串

访问 URL 查询字符串的方法有两种：

• search 属性：返回包含完整查询字符串（包括 ? 字符）的字符串。
• searchParams 属性：返回一个 URLSearchParams 对象。

如果需要获取特定参数的值，可以使用 get() 方法：

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

如果存在多个同名参数，可以使用 getAll() 方法获取所有值的数组：

const url = new URL('https://example.com/api/search?tag=tag1&tag=tag2&tag=tag3');
console.log(url.searchParams.getAll('tag')); // ['tag1', 'tag2', 'tag3']

构建查询字符串

手动构建查询字符串容易出错，尤其当参数包含特殊字符时。URLSearchParams 对象提供了一种更安全可靠的方法：

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

迭代查询参数

URLSearchParams 对象的 entries() 方法提供了一种便捷的方式来迭代查询参数：

function listQueryParams(queryString) {
  const params = new URLSearchParams(queryString);
  params.entries().forEach(([key, value]) => console.log(`${key}: ${value}`));
}

构建完整的 URL

以下示例演示如何使用基本 URL 和查询参数构建完整的 URL：

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());

验证 URL 的有效性

使用 URL 构造函数可以轻松验证 URL 的有效性：

function isValidURL(url) {
  try {
    new URL(url);
    return true;
  } catch (error) {
    return false;
  }
}

或者使用更简洁的 URL.canParse() 方法（浏览器兼容性需注意）：

URL.canParse(urlString); // 返回true或false

创建相对 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：