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
相关推荐
liangshanbo12156 小时前
React 19 vs React 18全面对比
前端·javascript·react.js
Never_Satisfied6 小时前
在 JavaScript 中,删除数组中内容为xxx的元素
java·前端·javascript
_菜鸟果果6 小时前
Vue3+echarts 3d饼图
前端·javascript·echarts
rechol7 小时前
类与对象(中)笔记整理
java·javascript·笔记
Luffe船长7 小时前
前端vue2+js+springboot实现excle导入优化
前端·javascript·spring boot
仲夏幻境8 小时前
js利用ajax同步调用如何
开发语言·javascript·ajax
鹿鹿鹿鹿isNotDefined8 小时前
Pixelium Design:Vue3 的像素风 UI 组件库
前端·javascript·vue.js
运维行者8 小时前
知乎崩了?立即把网站监控起来!
前端·javascript·后端
一米八二的矮个子9 小时前
JavaScript语法进阶(一)
javascript
liyi_hz20089 小时前
O2OA (翱途)开发平台新版本发布预告:架构升级、性能跃迁、功能全面进化
android·java·javascript·开源软件