在JS中URL()和URLSearchParams()方法有什么区别？

在JavaScript中，URL 和 URLSearchParams 是两个不同的接口，用于处理URL和URL的查询参数。这两个接口各自提供了一套方法和属性，可以方便地解析、构建、修改和序列化URL或URL的查询参数。

1. URL接口

URL 接口用于表示和解析URLs。你可以用它来创建一个新的URL对象，或者解析一个现有的URL字符串。URL 对象提供了一些属性和方法，可以让你访问和修改URL的各个部分，如协议、主机名、端口号、路径、查询字符串等。

例如：

const myURL = new URL('https://example.com/path?name=value#hash');

console.log(myURL.protocol); // 输出: "https:"
console.log(myURL.hostname); // 输出: "example.com"
console.log(myURL.pathname); // 输出: "/path"
console.log(myURL.search);   // 输出: "?name=value"
console.log(myURL.hash);     // 输出: "#hash"

2. URLSearchParams接口

URLSearchParams 接口用于处理URL的查询字符串部分。它提供了一些方法，可以让你方便地添加、删除、修改和获取查询参数。你可以单独使用 URLSearchParams，也可以与 URL 对象一起使用，以处理URL的查询部分。

例如：

const params = new URLSearchParams('name=value&anotherName=anotherValue');

console.log(params.get('name'));        // 输出: "value"
console.log(params.getAll('name'));     // 输出: ["value"]
console.log(params.has('name'));        // 输出: true
console.log(params.toString());         // 输出: "name=value&anotherName=anotherValue"

params.set('name', 'newValue');
console.log(params.toString());         // 输出: "name=newValue&anotherName=anotherValue"

与 URL 对象一起使用：

const myURL = new URL('https://example.com/path?name=value#hash');
const searchParams = new URLSearchParams(myURL.search);

console.log(searchParams.get('name')); // 输出: "value"

总结：

• URL 接口用于表示和解析完整的URLs，提供对URL各个部分的访问和修改能力。
• URLSearchParams 接口专门用于处理URL的查询字符串部分，提供了一套便捷的方法来操作查询参数。