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
相关推荐
滿21 分钟前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj21 分钟前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝31 分钟前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3111 小时前
react必备JavaScript知识点(二)——类
前端·javascript
珠峰下的沙砾1 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
前端_学习之路1 小时前
javaScript--数据结构和算法
javascript·数据结构·算法
拉不动的猪1 小时前
# 移动端与PC端全屏的处理
前端·javascript·面试
excel2 小时前
招幕技术人员
前端·javascript·后端
烛阴3 小时前
Promise无法中断?教你三招优雅实现异步任务取消
前端·javascript
前端张三3 小时前
vue3中ref在js中为什么需要.value才能获取/修改值?
前端·javascript·vue.js