ES6 URL对象

URL对象是现代浏览器提供的一个内置对象，用于表示和操作URL地址。这个对象提供了很多有用的方法和属性，可以帮助开发者解析、构建和操作URL。URL对象在ECMAScript 6（ES6）中被引入，并且在大多数现代浏览器中都有良好的支持。

创建 URL 对象

URL对象可以通过以下方式创建：

const url = new URL(urlString, baseURI);

• urlString 是一个字符串，表示要解析的URL。
• baseURI 是一个可选参数，表示基础URI，用于解析相对URL。

URL 对象的属性

URL对象有很多有用的属性，以下是其中的一些主要属性：

• href: 返回完整的URL字符串。
• origin: 返回协议、主机名和端口号，例如http://example.com:8080。
• protocol: 返回URL的协议部分，包括后面的冒号，例如http:。
• username: 返回用户名。
• password: 返回密码。
• host: 返回主机名和端口号，例如example.com:8080。
• hostname: 返回主机名，例如example.com。
• port: 返回端口号，如果没有指定则返回空字符串。
• pathname: 返回路径名称，包括前导的斜杠，例如/path/to/resource。
• search: 返回查询字符串，包括前导的问号?，例如?key=value。
• hash: 返回哈希部分，包括前导的井号#，例如#section1。

URL 对象的方法

URL对象也提供了一些方法来操作URL：

• toString(): 返回URL对象的完整字符串形式，等同于href属性。
• searchParams: 返回一个URLSearchParams对象，用于操作查询字符串。

URLSearchParams 对象

URLSearchParams对象可以用来处理URL的查询字符串部分，提供了以下方法：

• append(name, value): 向查询字符串中追加一个名称和值。
• delete(name): 删除查询字符串中指定名称的所有值。
• entries(): 返回一个迭代器，遍历查询字符串中的所有名称和值对。
• forEach(callback, thisArg): 对查询字符串中的每个名称和值对调用一个函数。
• get(name): 获取查询字符串中指定名称的第一个值。
• getAll(name): 获取查询字符串中指定名称的所有值。
• has(name): 检查查询字符串中是否存在指定名称。
• set(name, value): 设置查询字符串中指定名称的值。

示例

下面是一个使用URL对象和URLSearchParams对象的示例：

// 创建一个URL对象
const url = new URL('https://example.com/path/to/resource?query=123#section1');

// 访问URL的各种部分
console.log(url.href);           // 输出: https://example.com/path/to/resource?query=123#section1
console.log(url.origin);         // 输出: https://example.com
console.log(url.protocol);       // 输出: https:
console.log(url.host);           // 输出: example.com
console.log(url.hostname);       // 输出: example.com
console.log(url.port);           // 输出: '' (没有指定端口)
console.log(url.pathname);       // 输出: /path/to/resource
console.log(url.search);         // 输出: ?query=123
console.log(url.hash);           // 输出: #section1

// 访问和修改查询字符串
const searchParams = url.searchParams;
console.log(searchParams.get('query'));  // 输出: 123

// 修改查询字符串
searchParams.set('query', '456');
url.search = searchParams.toString();  // 更新URL对象的search属性

console.log(url.href);  // 输出: https://example.com/path/to/resource?query=456#section1

总结

URL对象提供了一种强大的方式来解析和操作URL，而URLSearchParams对象则专注于处理查询字符串。这些对象使得处理URL变得更加简单和直观，非常适合用于需要动态生成或解析URL的应用场景。如果您正在开发一个需要频繁处理URL的Web应用，掌握这些API是非常有用的。