ES6 URL对象

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

创建 URL 对象

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

javascript 复制代码
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对象的示例:

javascript 复制代码
// 创建一个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是非常有用的。

相关推荐
李昊哲小课14 小时前
HTML 完整教程与实践
前端·html
GISer_Jing14 小时前
React 18的createRoot与render全面对比
前端·react.js·前端框架
我叫汪枫14 小时前
React Hooks原理深度解析与高级应用模式
前端·react.js·前端框架
我叫汪枫14 小时前
深入探索React渲染原理与性能优化策略
前端·react.js·性能优化
Ares-Wang14 小时前
Vue3》》eslint Prettier husky
开发语言·javascript·ecmascript
阿智@1114 小时前
推荐使用 pnpm 而不是 npm
前端·arcgis·npm
EveryPossible14 小时前
静态箭头连线
开发语言·javascript·ecmascript
伍哥的传说14 小时前
QRCode React 完全指南:现代化二维码生成解决方案
前端·javascript·react.js·qrcode.react·react二维码生成·qrcodesvg·qrcodecanvas
IT_陈寒14 小时前
Vite 5.0 终极优化指南:7个配置技巧让你的构建速度提升200%
前端·人工智能·后端
listhi52015 小时前
Map对象在JavaScript循环中的使用
开发语言·前端·javascript