在 JavaScript 中使用 URL-js教程-PHP中文网

Working with URLs in JavaScript

作者：乔·阿塔迪✏️

URL 是任何网络应用程序的关键部分。如果您的应用程序向 API 发出请求，则为这些请求创建正确的 URL 非常重要。所有现代浏览器都支持 URL API，它提供了一种解析和操作 URL 的方法。它提供了对 URL 各个部分的轻松访问。

了解 URL 的各个部分

考虑以下 URL：

https://example.com/api/search?query=foo&sort=asc#results

此 URL 由以下部分组成：

协议：https
主办方：example.com
路径名称：/api/search
查询字符串：?query=foo&sort=asc
哈希值：#results

使用现代 JavaScript，我们可以解析 URL 并根据需要提取这些不同的部分。

解析 URL

在旧版浏览器中，在 URL API 可用之前，开发人员解析 URL 的一种方法是使用元素。该元素提供一些基本的 URL 解析。例如，以下是从 URL 中提取查询字符串的方法：

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

登录后复制

但是，这种方法有一些缺点：

需要 DOM 环境，这意味着它无法在 Node.js 等环境中运行
它也没有错误处理 - 如果将无效的 URL 传递给 href 属性，则不会抛出错误

您还可以使用正则表达式来解析 URL 的各个部分，但这很乏味且容易出错。

使用 URL API 解析 URL 非常简单。只需将要解析的 URL 传递给 URL 构造函数即可。如果 URL 字符串有效，您将获得一个 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 的查询字符串：

搜索属性，它是一个包含完整查询字符串（包括 ? 字符）的字符串
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']

登录后复制

构建查询字符串

手动构建查询字符串可能很棘手，特别是如果任何查询参数包含需要转义的特殊字符。例如，如果查询参数需要包含 & 字符，则需要将其编码为 &。为了涵盖这些情况，您需要使用encodeURIComponent函数：

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

登录后复制

您可以使用 URLSearchParams 对象更安全地构建查询字符串：

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

登录后复制

使用 URLSearchParams 的优点包括：

您不必担心分隔参数的 & 字符
您不需要对参数值进行 URI 编码
不需要使用字符串连接

迭代查询参数

如果没有 URLSearchParams 对象，迭代查询字符串中的参数会有点棘手。您需要多次拆分字符串 - 首先分成键/值对组，然后再次拆分键和值：

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']

登录后复制

相反，您可以使用 URLSearchParams 的条目方法来迭代键/值对：

let queryString = 'foo=bar';
queryString += '&baz=qux';
queryString += '&tag=' + encodeURIComponent('one&two');
console.log(queryString); // foo=bar&baz=qux&tag=one%26two

登录后复制

构建完整的 URL

这是使用基本 URL 和一些查询参数构建 URL 的完整示例：

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

登录后复制

检查有效 URL

您可能会尝试使用正则表达式来验证 URL，但众所周知，构建完全捕获有效 URL 字符串的正则表达式非常困难。

相反，您可以访问 URL API。如果您给 URL 构造函数提供了无效的 URL，则它会抛出错误。您可以使用它来检查 URL 是否有效：

function listQueryParams(queryString) {
  queryString.split('&').forEach(param => {
    const [key, value] = param.split('=');
    console.log(`${key}: ${value}`);
  });
}

登录后复制

使用较新的浏览器，这甚至更容易。有一个较新的 URL.canParse 静态方法，可以使用一行代码执行类似的验证。与上面的 isValidURL 函数类似，它接受一个潜在的 URL 字符串，并根据 URL 字符串的有效性返回 true 或 false。

创建相对 URL

URL API 具有强大的解析相对 URL 的机制。通常，如果 URL 构造函数的参数不是完整、有效的 URL，则会抛出错误。但是，您可以指定第二个参数作为构建相对 URL 的基础。如果您使用双参数方法，第一个参数不必是有效的 URL，但第二个参数必须是有效的 URL。

我们先来看一个简单的案例：

function listQueryParams(queryString) {
  queryString.split('&').forEach(param => {
    const [key, value] = param.split('=');
    console.log(`${key}: ${decodeURIComponent(value)}`);
  });
}

登录后复制

URL 构造函数采用 https://example.com 的基本 URL 并添加相对路径 /about，从而得到 https://example.com/about。

这个怎么样：

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

登录后复制

您可能认为这是 https://example.com/users/profile，但实际上它是 https://example.com/profile。这就像相对链接一样；它采用父路径段，即 example.com 的根，然后添加配置文件。

让我们再看一个使用相对 URL 的示例。您还可以使用 .. 返回路径层次结构：

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

登录后复制

此内容发布于 https://example.com/profile。请记住，相对 URL 从父路径段开始。然后，这个里面有 ..，它又上升了一个路径段。

如果您使用相对 URL 调用 URL 构造函数并为基本 URL 指定无效或不完整的 URL，您将收到错误。如果您使用没有完整基本 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

登录后复制

使用 window.location 对象

您可能熟悉 window.location 对象，它代表当前页面的 URL。该对象还具有 href 和 pathname 等属性，因此您可能会认为它是 URL 对象。这是一个不同的对象，一个 Location，它具有一些与 URL 相同的属性，但也缺少一些属性（例如 searchParams 属性）。

即使它不是 URL 对象，您仍然可以使用 window.location 构造新的 URL 对象。您可以将 window.location 传递给 URL 构造函数，以根据当前 URL 创建一个包含 searchParams 等的新的完整 URL，或者您甚至可以在构建相对 URL 时将其用作基本 URL：

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

登录后复制

使用 URLPattern 匹配 URL 中的模式

使用 URL 可以轻松地从 URL 获取路径。例如，在 URL https://example.com/api/users/123/profile 中，路径名称为 /api/users/123/profile。如果我们只想从此 URL 获取用户 ID 123 该怎么办？

正如我们之前讨论的，创建正确的正则表达式来验证和提取 URL 的各个部分可能很困难。

目前尚未在所有浏览器中使用，但您可以使用 URLPattern API 来匹配和提取 URL 的部分内容，匹配您指定的模式。这对于单页应用程序 (SPA) 中的客户端路由之类的事情特别有用。

以用户个人资料 URL 为例，让我们创建一个 URLPattern 来获取用户 ID。我们可以使用前导 : 字符来表示命名占位符，稍后可以使用它来匹配 URL 的该部分：

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

登录后复制

当您对 URLPattern 调用 exec 时，它需要一个有效的 URL。它返回一个匹配器对象，其中包含 URL 每个部分（协议、主机、路径名等）的属性。其中每个属性还有一个 groups 属性，它将占位符名称（如 :userId）映射到 URL 中的值。

如果您只关心匹配 URL 的一部分，例如我们在这里所做的路径名，您也可以在 URL 模式中指定通配符。或者，您可以传递一个包含您感兴趣匹配的 URL 部分的对象，而不是 URL 字符串：

let queryString = 'foo=bar';
queryString += '&baz=qux';
queryString += '&tag=' + encodeURIComponent('one&two');
console.log(queryString); // foo=bar&baz=qux&tag=one%26two

登录后复制

URLPattern API 仍然无法在所有浏览器中使用。在撰写本文时，Firefox 或 Safari 尚不支持它。您可以在 CanIUse.com 查看最新的浏览器支持信息。

概括

URL API 是一个通用接口，用于在 JavaScript 中构建、验证和操作 URL。与手动解析或正则表达式相比，它使用起来更安全且不易出错。通过使用 URLSearchParams 对象，您可以构建查询字符串，而无需担心字符串连接或特殊字符编码。

URLPattern API 更进一步，支持通配符和命名占位符，因此您可以对 URL 进行切片和切块以满足应用程序的需求！ 延伸阅读：

URL 接口 (MDN)
URLPattern API (MDN)

只需几分钟即可设置 LogRocket 的现代错误跟踪：

访问 https://logrocket.com/signup/ 获取应用 ID。
通过 NPM 或 script 标签安装 LogRocket。 LogRocket.init() 必须在客户端调用，而不是服务器端。

NPM：

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

登录后复制

脚本标签：

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

登录后复制

3.（可选）安装插件以与您的堆栈进行更深入的集成：