详解JS的URL()和URLSearchParams() API接口

两个 API 接口定义

URL() 构造函数返回一个新创建的 URL 对象,表示由一组参数定义的 URL。

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。

快速了解两个 API 在哪里用

以前我们要对地址栏中的 URL 地址进行分析处理,需要自己进行字符串分析,例如:

https://mybj123.com/?s=css

我们想要知道 s 参数后面的值是什么,往往需要进行字符切割匹配,要么正则匹配。

实际上,现在,浏览器已经有了内置的 API 接口可以对 URL 进行处理,这个 API 就是 URLSearchParams()以及 URL()。

例如获取 s 的查询参数值,可以直接下面这样:

new URL('https://mybj123.com/?s=css').searchParams.get('s');

或者

new URLSearchParams('?s=css').get('s');

URLSearchParams()语法

语法

// URL 查询字符串
var myUrlSearchParams = new URLSearchParams(strSearchParams);
// 查询字符序列
var myUrlSearchParams = new URLSearchParams(arrSearchSequence);
// 查询键值对象
var myUrlSearchParams = new URLSearchParams(objSearchKeyValue);

参数

strSearchParams

URL 查询字符串。使用示意:

var params1 = new URLSearchParams('?s=url');

或者对当前地址栏地址的查询字符串进行实例化:

var params2 = new URLSearchParams(location.search);

arrSearchSequence

数组形式的查询字符序列。例如:

var params3 = new URLSearchParams([['s', 'url'], ['someId', 1]]);

objSearchKeyValue

键值对形式的查询对象。例如:

var params4 = new URLSearchParams({"s": "url", "someId": 2})

URLSearchParams 实例方法

上面执行 new URLSearchParams()的返回值 myUrlSearchParams 就是一个 URLSearchParams 实例。

这个 URLSearchParams 实例包含众多方法,具体如下:

URLSearchParams.append(name,key)

添加新的键值对作为查询参数。例如:

var params = new URLSearchParams('?s=url');   // 也可以没有问号直接's=url'
params.append('from', 'mybj');
// 此时的查询字符串是:'s=url&from=mybj'

URLSearchParams.delete(name)

删除已存在的查询参数。例如:

var params = new URLSearchParams('?s=url');
params.delete('s');
// 此时的查询字符串是:''

URLSearchParams.entries()

返回查询参数们的迭代器对象,我们可以迭代该迭代器对象获得所有的键值对。例如使用 for..of:

var searchParams = new URLSearchParams("s=url&from=mybj");
// 显示所有的键值对
for (var pair of searchParams.entries()) {console.log(pair[0]+ ', '+ pair[1]); 
}

URLSearchParams.forEach(callback)

此方法可以遍历查询对象。

其中 callback 是遍历方法,支持两个参数,分别是每个键值对的值和键。示意:

var searchParams = new URLSearchParams("s=url&from=mybj");
// 输出值和键的内容
searchParams.forEach(function(value, key) {console.log(value, key);
});

URLSearchParams.get(name)

返回指定关键字对象的值。例如:

var params = new URLSearchParams('s=url&from=mybj');
params.get('s');
// 返回值是:'url'

如果没有对应的值,则返回 null。

URLSearchParams.getAll(name)

以数组形式返回所有当前查询关键字对应的值,例如:

var params = new URLSearchParams('s=url&s=urlsearchparams&from=mybj');
params.getAll('s');
// 返回值是:['url', 'urlsearchparams']

URLSearchParams.has(name)

返回布尔值,true 或者 false,是否包含某个查询关键字。

var params = new URLSearchParams('?s=url');
params.has('s') == true;    // true

URLSearchParams.keys()

返回一个迭代器对象,允许迭代该对象中所有的关键字。使用示意:

var searchParams = new URLSearchParams("s=url&from=mybj");
// 显示所有的键
for (var key of searchParams.keys()) {console.log(key); 
}

URLSearchParams.values()

返回一个迭代器对象,允许迭代该对象中所有的关键字值。使用示意:

var searchParams = new URLSearchParams("s=url&from=zxx");
// 显示所有的值
for (var value of searchParams.values()) {console.log(value); 
}

URLSearchParams.set(name,value)

有则替换,无则加冕。例如:

var params = new URLSearchParams('s=url&s=urlsearchparams&from=mybj');
params.set('s', 'css 世界');
params.getAll('s');    // 返回值是:['css 世界']

可以看到会替换之前所有的’s’查询参数值。下面这个例子展示“无则加冕”:

var params = new URLSearchParams('s=url'); 
params.set('from', 'mybj');
params.toString();    // 结果是:'s=url&from=mybj'

也就是原本没有对应参数的时候会添加这个参数。

URLSearchParams.sort()

方法将此对象中包含的所有键/值对就地排序,并返回 undefined。排序顺序根据键的 Unicode 码位。该方法使用一种稳定的排序算法(即保留具有相同键的键/值对之间的相对顺序)。例如:

var searchParams = new URLSearchParams('c=4&a=2&b=3&a=1'); 
// 键值对排序
searchParams.sort();
// 显示排序后的查询字符串
console.log(searchParams.toString());    // 结果是:a=2&a=1&b=3&c=4

URLSearchParams.toString()

把 URLSearchParams 对象转换成查询字符串。这个代码示意上面多次出现,这里不重复展示。

URLSearchParams()兼容性

Edge17+支持。

URL()语法

URL 接口用于解析、构造、规范化和编码 URL。其构造的实例支持若干属性和方法,可以用来读写 URL 相关的属性值。我们甚至可以把文件内容作为 URL 的一部分进行呈现。

在使用 URL()之前,建议先做个浏览器支持与否的判断,例如:

if (window.URL) {// ...
}

另外,URL 接口支持在 web workers 中使用。

语法

var myUrl = new URL(url, [base])

参数

url

相对地址或者绝对地址。如果是相对地址,需要设置 base 参数,如果是绝对地址,则会忽略 base 设置。我们也可以使用 URL 对象作为 url 参数。此时作用的值是 URL 对象中的 href 属性值。

base

如果 URL 地址是相对地址,则需要这个参数,作用是作为相对计算的基础地址。我们也可以使用 URL 对象作为 base 参数,此时作用的值是 URL 对象中的 href 属性值。如果不设置该参数,则会按照空字符串”进行处理。

如果参数值无法组合成完整 URL 地址,则会报 TypeError 错误。

测试与用法示意

基本使用示意:

var base = 'https://mybj123.com';
// 结果是:https://mybj123.com/aboutus
console.log(new URL('aboutus', base).href);
// 结果是:https://mybj123.com/aboutus
console.log(new URL('/aboutus', base).href);

可以直接使用 URL 对象作为参数:

var base = 'https://mybj123.com';
var urlFromBase = new URL('aboutus', base);
// 结果是:https://mybj123.com/aboutus
console.log(new URL(urlFromBase).href);
// 结果是:https://mybj123.com/sitemaps
console.log(new URL('sitemaps', urlFromBase).href);


下面是带有较深层级 base 地址和不同相对地址形式的测试:

var base = 'https://mybj123.com/study/a/b/c';
// 结果是:https://mybj123.com/study/a/sp/icon
console.log(new URL('sp/icon', base).href);
// 结果是:https://mybj123.com/study/a/sp/icon
// 上下结果对比表明./和裸露相对地址没有区别
console.log(new URL('./sp/icon', base).href);
// 结果是:https://mybj123.com/study/sp/icon
// 向上一层 URL 层级深度
console.log(new URL('../sp/icon', base).href);
// 结果是:https://mybj123.com/study/a/sp/icon
// 层级按照斜杠来算的
console.log(new URL('../sp/icon', base + '/').href);
// 结果是:https://mybj123.com/sp/icon
// 斜杠开头表示跟地址开始匹配
console.log(new URL('/sp/icon', base).href);
下面是不同域名之间的测试:
var base = 'https://mybj123.com';
// 结果是:http://image.mybj123.com 和 https://image.mybj123.com
// 没有协议的 url 认为是相对地址,协议取自 base 地址
console.log(new URL('//image.mybj123.com', 'https://mybj123.com').href);
console.log(new URL('//image.mybj123.com', 'https://mybj123.com').href);
// 结果是:https://image.mybj123.com
// 这里 url 是完整的绝对地址,因此,忽略后面的 base 参数
console.log(new URL('https://image.mybj123.com', base).href);

下面是出错的测试:

// 没有绝对地址,会报错
console.log(new URL('').href);
console.log(new URL('//image.mybj123.com').href);

URL 实例对象的属性和方法

new URL()返回值就是一个实例对象,包括下面这些属性和方法。

属性

已知有 URL 地址如下:

var url = new URL('https://www.xxx.com:80/wordpress/?s=url#comments');
var ftp = new URL('ftp://username:password@192.168.1.1/path/file');

hash

URL 地址中的锚链值,包含字符串’#’,例如这里 url.hash 的返回值是’#comments’。

host

URL 地址中 host 主机地址,包括协议端口号,这里 url.host 的返回值是’www.xxx.com:80’。

hostname

URL 地址中主机名称,不包括端口号,这里 url.hostname 的返回值是’www.xxx.com’。

href

完成的 URL 地址。

origin[只读]

返回 URL 地址的来源,会包含 URL 协议,域名和端口。这里 url.origin 的返回值是’https://www.xxx.com:80’。

password

返回 URL 地址域名前的密码。ftp 协议中比较常见。这里 ftp.password 的返回值是’password’。

username

返回 URL 地址域名前的用户名。ftp 协议中比较常见。这里 ftp.username 的返回值是’username’。

pathname

返回 URL 中的目录+文件名。例如这里 ftp.pathname 的返回值是’/path/file’。

port

返回 URL 地址中的端口号。例如这里 url.port 的返回值是’80’,ftp.port 的返回值是”。

protocol

返回 URL 地址的协议,包括后面的冒号’:’。例如这里 url.protocol 的返回值是’https:’,ftp.protocol 的返回值是’ftp:’。

search

返回 URL 地址的查询字符串,如果有参数,则返回值以问号’?’开头。例如这里 url.search 的返回值是’?s=url’。

searchParams

返回一个 URLSearchParams 对象,可以调用 URLSearchParams 对象各种方法,对查询字符串进行非常方便的处理。例如我们想要知道查询关键字 s 对应的值,可以:

url.searchParams.get('s');

方法

toString()

返回的完整的 URL 地址,你可以理解为 URL.href 的另外一种形式,不过这个只能输出,不能修改值。

toJSON()

同样返回完整的 URL 地址,返回的字符串和 href 属性一样。

静态方法

URL.createObjectURL(object)

可以把 File,Blob 或者 MediaSource 对象变成一个一个唯一的 blob URL。其中参数 object 可以是 File,Blob 或者 MediaSource 对象。

URL.revokeObjectURL(objectURL)

撤消之前使用 URL.createObjectURL()创建的 URL 对象。其中参数 objectURL 表示之前使用 URL.createObjectURL()创建的 URL 返回值。

静态方法实际使用案例一则

我们使用 Ajax 请求一个跨域图片避免 canvas 跨域生成问题的时候可以使用这两个静态方法:

var xhr = new XMLHttpRequest();
xhr.onload = function () {var url = URL.createObjectURL(this.response);var img = new Image();img.onload = function () {// 此时你就可以使用 canvas 对 img 为所欲为了// ... code ...// 图片用完后记得释放内存URL.revokeObjectURL(url);};img.src = url;
};
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.send();

兼容性

Edge 12+支持。

这两个 JS API 的 polyfill

从兼容性表可以看出,URLSearchParams Edge 17 才开始支持,而 URL 从 Edge 12 才开始支持,似乎兼容性不佳,但是,这并不妨碍我们在实际项目中使用,为什么呢?因为有 polyfill。

这里有一个一直支持到 ES7 最新规范的 URL 和 URLSearchParams polyfill 项目

按照官方说法,兼容到 IE 10+。

IE9 究竟支不支持,还是仅仅是部分支持,我大致简单测试了一下,结论如下:

除了 URL()几个静态方法以外的基本使用 IE9 都是支持的!

对于我来说,够用了够用了。

如果以后实际应用发现其他细节再更新。

结束语

web 这块,无论是 CSS,HTML 还是 JS API 都在不断进步,标准且跨平台,以前很多需要自定义的方法和特性,现在浏览器都已经原生支持,以前的那些语言框架价值越来越低。

是时候开始尝试拥抱原生,辛苦地学习与积累,简单且轻松的实现,面向产品,面向用户,立足未来,方能穿越长河。

更多精彩内容https://mybj123.com/4510.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/12514.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Mac】如何解决打开PD虚拟机后Mac无法上网的问题?

问题描述 部分用户在运行Parallels Desktop并打开Windows 11后,发现Windows上网没有问题,但是Mac主机不能访问带域名的网站,而访问带IP的网站没问题,退出Parallels虚拟机以后,Mac网络又恢复正常。 解决办法 退出 Pa…

vue的history模式返回404

vue的history模式返回404,可以把vue工程部署到静态资源服务器nginx上,代替用tomcat,然后在nginx配置: //vue中设置路径是: module.exports { publicPath:/ } 那么nginx中配置vue为: location / { root /us…

东B编译原理第二次实验课

由于本人比较懒还没咋学编译原理,并不知道LR,算符优先是啥方法,就按照自己想法写了个非常丧心病狂的代码 非常SB的是一个代码过五个题,我知道肯定漏洞百出,但是懒惰如我已经懒得改了,能过就好 下边放下原…

swift-resizableImageWithCapInsets(可拉伸图片)

resizableImageWithCapInsets 他的作用是用之前的的image创建出一个可拉伸的image,这个image的作用就是当要填充的imageView大于当前image时就会进行拉伸,但是这个可拉伸image是可以设置屏蔽区域的 也就是告诉你哪部分不要用来拉伸 let capInsets UIEdg…

在哪些地方能用到PMP认证?参加PMP培训怎么选择靠谱?

PMP认证在实际运用中比我们想象的作用要大得多,甚至涉及到了工作、生活各个方面,这其中主要是在工作方面发挥作用,帮助我们在项目管理相关岗位发挥更大的作用。 因为PMP认证是项目管理协会发起,考试也是针对专业项目管理人员的测…

golang中三种线程安全的MAP

一、map 是什么 map 是 Go 中用于存储 key-value 关系数据的数据结构,类似 C 中的 map,Python 中的 dict。Go 中 map 的使用很简单,但是对于初学者,经常会犯两个错误:没有初始化,并发读写。 1、未初始化的…

Linux服务器中了病毒后的清理方法

病毒的基础排查 1. 检查计划任务 黑客入侵服务器后,为了让病毒脚本持续执行,通常会在计划任务配置文件里面写入定时执行的脚本任务。 检查命令说明ls -l /var/spool/cron/*查看用户级计划任务配置。有的人喜欢用 crontab -l 命令来排查,这…

探索设计模式的魅力:机器学习赋能,引领“去中心化”模式新纪元

​🌈 个人主页:danci_ 🔥 系列专栏:《设计模式》 💪🏻 制定明确可量化的目标,坚持默默的做事。 探索设计模式的魅力:机器学习赋能,引领“去中心化”模式新纪元 ✨欢迎加入…

react-visible-observer:一个超级简单的滚动加载 npm 库

随着现代网页应用的复杂性增加,懒加载和无限滚动已经成为提升用户体验和性能优化的重要技术。然而,许多现有解决方案要么过于复杂,要么性能欠佳。 react-visible-observer 是一个简单而高效的解决方案,旨在简化这些功能的实现。本…

商业银行总分支数据分发的核心问题是什么?如何解决?

银行业对一个国家至关重要,关乎国计民生。银行为我国经济建设分配资金,是社会再生产顺 利进行的纽带,它能掌握和反应社会经济活动的信息,为企业和政府作出正确的经济决策提供 必要的依据。通过银行,可以对国民经济各部…

比较两个JSON之间的差异

网上找到的比较JSON工具类,比较两个JSON对象之间的差异,并将差异字段按照原JSON对象的树状结构展现出来,方便对数据进行对比。对原有方法进行了部分优化。 package com.summer.toolkit.util;import com.alibaba.fastjson.JSON; import com.a…

三、安装node_exporter

目录 一、简介 二、下载安装 一、简介 Exporter是Prometheus的指标数据收集组件。它负责从目标Jobs收集数据,并把收集到的数据转换为Prometheus支持的时序数据格式。 和传统的指标数据收集组件不同的是,他只负责收集,并不向Server端发送数据…

探索微软Edge:一款重塑网页浏览体验的新锐浏览器

探索微软Edge:一款重塑网页浏览体验的新锐浏览器 随着科技的飞速发展,我们的互联网浏览需求也在不断升级。在这样的背景下,微软Edge浏览器应运而生,以其卓越的性能、独特的功能和简洁的设计,迅速赢得了广大用户的青睐…

Redis:常用数据结构

文章目录 常用数据结构Redis的编码方式查看方式 常用数据结构 Redis当中常用的数据结构如下所示: Redis在底层实现上述数据结构的过程中,会在源码的角度上对于上述的内容进行特定的优化,这样的优化的主要目的是为了实现出节省时间和节省空间…

【挑战30天首通《谷粒商城》】-【第一天】10、环境-docker安装mysql

文章目录 课程介绍一、docker 安装 mysql Stage 1:下载镜像文件 Stage 1-1:打开官网查看镜像 Stage 1-2:拉取镜像 Stage 1-3:查看拉取的镜像 Stage 2:创建实例并启动 A:mysql(5.7版)…

yolov8添加FPPI评价指标

这里写自定义目录标题 yolov8 中FPPI实现测试中调用 效果结语 续yolov7添加FPPI评价指标 。之前在yolov7中增加了fppi指标,有不少网友问有没有yolov8中增加,最近没有做算法训练,也一直没时间弄。这几天晚上抽了点时间,弄了一下。不…

焦灼上市背后,极氪汽车开启新长征?

李书福的资本帝国,又要扩容了。继蔚小理之后,极氪汽车成为第四家赴美上市的中国造车新势力,同时也成为了李书福收获的第九个IPO。作为一家成立仅仅4年的新势力,极氪再次刷新了造车新势力上市的最快记录。 按照极氪汽车官方的说法…

学习中...【京东价格/评论数据】数据获取方式——采用Selenium★

近期闲来无事学学selenium爬虫技术,参考崔庆才《Python3网络爬虫开发实战》的淘宝商品信息爬取,我也照猫画虎的学了京东的价格和商品评论数据。废话不多说,直接开始吧! 1. 浏览器初始化 from selenium import webdriver from se…

红黑树的平衡

1.红黑树的概念 红黑树,是一种二叉搜索树,但在每个结点上增加一个存储位表示结点的颜色,可以是Red或 Black。 通过对任何一条从根到叶子的路径上各个结点着色方式的限制,红黑树确保没有一条路 径会比其他路径长出俩倍&#xff0c…

什么是apt

2024年5月15日,周三上午 apt 是 “Advanced Packaging Tool” 的缩写,它是 Debian 及其衍生版(如 Ubuntu)中用于管理软件包的命令行工具。apt 提供了一个统一的接口来安装、更新、升级、删除和搜索软件包。 以下是 apt 的一些主要…