解析 JavaScript 中的 URL

在 Web 开发中，URL（Uniform Resource Locator）是一个非常重要的概念。它描述了网络上一个资源的位置，并允许我们访问这个资源。JavaScript 提供了一些内置的 API 来处理 URL，例如 URL 对象和 URLSearchParams 对象。本文将深入介绍这些对象及其使用方法。

URL 对象

URL 对象允许我们解析、修改和构建 URL。要创建一个 URL 对象，可以将 URL 字符串传递给构造函数：

const url = new URL('https://www.example.com/path/to/resource?foo=bar&baz=qux#fragment');

通过 url 对象，我们可以轻松地获取 URL 的各个部分，例如协议、主机名、路径、查询字符串和锚点：

console.log(url.protocol); // "https:"
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/path/to/resource"
console.log(url.search); // "?foo=bar&baz=qux"
console.log(url.hash); // "#fragment"

我们还可以对这些部分进行修改：

url.protocol = 'http:';
url.hostname = 'example.org';
url.pathname = '/new/path';
url.searchParams.set('foo', '123');
url.hash = 'new-fragment';

最后，我们可以使用 toString() 方法将 URL 对象转换回字符串形式：

console.log(url.toString()); // "http://example.org/new/path?foo=123#new-fragment"

URLSearchParams 对象

URLSearchParams 对象允许我们解析和构建查询字符串。要创建一个 URLSearchParams 对象，可以将查询字符串传递给构造函数：

const searchParams = new URLSearchParams('foo=bar&baz=qux');

通过 searchParams 对象，我们可以轻松地获取和修改查询参数：

console.log(searchParams.get('foo')); // "bar"
searchParams.set('baz', '123');
console.log(searchParams.toString()); // "foo=bar&baz=123"

我们还可以将 URLSearchParams 对象附加到一个 URL 对象的查询部分中：

url.search = searchParams.toString();
console.log(url.toString()); // "http://example.org/new/path?foo=bar&baz=123#new-fragment"

总结

在本文中，我们介绍了 JavaScript 中用于处理 URL 的两个对象：URL 和 URLSearchParams。URL 对象允许我们解析、修改和构建 URL，而 URLSearchParams 对象允许我们解析和构建查询字符串。理解这些对象的使用方法是 Web 开发中的关键之一。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12335