JS【详解】内置构造函数/对象 URL(可用于创建和解析 URL,操作搜索参数,编码 url)

用途

用于创建和解析 URL

语法

dos 复制代码
new URL(url, [base])
  • 第1个参数 url :可为完整 url 或路径(如果设置了 base)
  • 第2个参数 base:可选的 base URL,若第1个参数是路径,则会根据这个 base 生成 URL
js 复制代码
new URL('https://www.baidu.com/admin') // https://www.baidu.com/admin

new URL('/admin', 'https://www.baidu.com') // https://www.baidu.com/admin

更多用法

根据现有 URL 创建一个新的 URL

js 复制代码
let url = new URL('https://www.baidu.com/admin');
let newUrl = new URL('login', url);
 
console.log(newUrl); // https://www.baidu.com/login

解析 url

js 复制代码
let url = new URL('https://www.baidu.com/admin');
 
console.log(url.protocol); // https:
console.log(url.host);     // www.baidu.com
console.log(url.pathname); // /admin

操作搜索参数

  • append(name, value) ------ 按照 name 添加参数,
  • delete(name) ------ 按照 name 移除参数,
  • get(name) ------ 按照 name 获取参数,
  • getAll(name) ------ 获取相同 name 的所有参数(这是可行的,例如 ?user=John&user=Pete),
  • has(name) ------ 按照 name 检查参数是否存在,
  • set(name, value) ------ set/replace 参数,
  • sort() ------ 按 name 对参数进行排序,很少使用
js 复制代码
let url = new URL('https://www.baidu.com/search');
url.searchParams.set('q', 'test me!'); // 添加带有一个空格和一个 ! 的参数
 
console.log(url); // https://www.baidu.com/search?q=test+me%21
 
url.searchParams.set('tbs', 'qdr:y'); // 添加带有一个冒号 : 的参数
 
// 参数会被自动编码
console.log(url); // https://www.baidu.com/search?q=test+me%21&tbs=qdr%3Ay
 
// 遍历搜索参数(被解码)
for(let [name, value] of url.searchParams) {
  console.log(`${name}=${value}`); // q=test me!,然后是 tbs=qdr:y
}

编码 url

许多字符不允许直接在 URL 中使用,如大写字母和空格等,需编码为UTF-8

js 复制代码
// 在此示例中使用一些西里尔字符
let url = new URL('https://www.baidu.com/wiki/Тест');
url.searchParams.set('key', 'ъ');
 
console.log(url); //https://www.baidu.com/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A
相关推荐
记得早睡~3 小时前
leetcode51-N皇后
javascript·算法·leetcode·typescript
拉不动的猪5 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya5 小时前
react redux的学习,单个reducer
前端·javascript·react.js
加瓦点灯5 小时前
观察者模式:解耦对象间的依赖关系
开发语言·javascript·观察者模式
z_mazin6 小时前
Chrome开发者工具实战:调试三剑客
前端·javascript·chrome·网络爬虫
sen_shan7 小时前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
旧识君7 小时前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss
ElasticPDF-新国产PDF编辑器8 小时前
Angular use pdf.js and Elasticpdf tutorial
javascript·pdf·angular.js
Carlos_sam8 小时前
Openlayers:海量图形渲染之图片渲染
前端·javascript
你的人类朋友8 小时前
MQTT协议是用来做什么的?此协议常用的概念有哪些?
javascript·后端·node.js