在 JavaScript 中使用 URL

作者：乔·阿塔迪✏️

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 出现之前，开发者通常使用

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

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

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

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

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

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

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

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