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
相关推荐
华仔啊8 小时前
前端必看!12个JS神级简写技巧,代码效率直接飙升80%,告别加班!
前端·javascript
excel8 小时前
dep.ts 逐行解读
前端·javascript·vue.js
爱上妖精的尾巴8 小时前
5-20 WPS JS宏 every与some数组的[与或]迭代(数组的逻辑判断)
开发语言·前端·javascript·wps·js宏·jsa
前端大卫8 小时前
一个关于时区的线上问题
前端·javascript·vue.js
whltaoin9 小时前
中秋赏月互动页面:用前端技术演绎传统节日之美
前端·javascript·html·css3·中秋主题前端
铅笔侠_小龙虾12 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js
哟哟耶耶14 小时前
Starting again-02
开发语言·前端·javascript
Kitasan Burakku14 小时前
Typescript return type
前端·javascript·typescript
力Mer15 小时前
console.log()控制台异步打印与对象展开后不一致问题
前端·javascript
GISer_Jing15 小时前
得物前端二面潜在问题详解
前端·javascript·面试