作者：乔·阿塔迪✏️
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></a>
<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><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><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><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><code class="javascript">function listQueryParams(queryString) {
const params = new URLSearchParams(queryString);
params.entries().forEach(([key, value]) => console.log(`${key}: ${value}`));
}</code><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><code class="javascript">function isValidURL(url) {
try {
new URL(url);
return true;
} catch (error) {
return false;
}
}</code><code class="javascript">URL.canParse(urlString); // 返回true或false</code>
