改用 WHATWG URL API - JavaScript

简介

在 JavaScript 中，我们通常使用字符串来表示 URL，但是这种方式会存在一些问题。在使用 URL 字符串时，我们可能会遇到一些繁琐的问题，例如：解析、拼接、查询参数等，这些问题通常需要使用各种正则表达式来实现。

为了解决这些问题，Web 开发人员可以使用 WHATWG URL API，它提供了一种更高级别、更易用的 URL 操作方式。

用法

我们可以在 JavaScript 中使用 URL 对象来表示 URL。创建 URL 实例的方法有两种，一种是通过传递 URL 字符串来创建，另一种是通过传递基础 URL 和相对 URL 来创建。

创建 URL 实例

const url1 = new URL('https://example.com/test?id=123');
const url2 = new URL('/test?id=123', 'https://example.com');

在上述代码中，我们通过 new URL() 创建了两个 URL 实例，其中 url1 和 url2 分别使用了不同的方式来创建 URL。

获取 URL 参数

我们可以使用 URLSearchParams 对象来获取 URL 的查询参数。

const url = new URL('https://example.com/test?id=123&name=John');

const searchParams = url.searchParams;
console.log(searchParams.get('id')); // 123
console.log(searchParams.get('name')); // John

修改 URL 参数

我们可以使用 URLSearchParams 对象的实现来修改 URL 的查询参数。

const url = new URL('https://example.com/test?id=123&name=John');

const searchParams = url.searchParams;
searchParams.set('id', '456');
console.log(url.toString()); // https://example.com/test?id=456&name=John

获取 URL 片段

我们可以使用 hash 属性来获取 URL 的片段。

const url = new URL('https://example.com/test#heading');

console.log(url.hash); // #heading

修改 URL 片段

我们可以使用 hash 属性来修改 URL 的片段。

const url = new URL('https://example.com/test#heading');
url.hash = 'title';

console.log(url.toString()); // https://example.com/test#title

结论

使用 WHATWG URL API 可以更简单的操作 URL 和 URL 参数。使用 URL 类可以节省很多时间和代码，并避免了使用繁琐的正则表达式。 我们建议在开发中使用 WHATWG URL API，以提高代码的质量和可维护性。