ES6 URL对象

2024-09-04 06:52

文章标签 对象 url frontend es6

本文主要是介绍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