详解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.hqwc.cn/news/701899.html

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

相关文章

免费思维13招之十一：利润型思维

免费思维13招之十一：利润型思维

免费思维13招之十一：利润型思维 免费思维的另一大战略思维——利润型思维。 什么是利润型思维呢？就是用后期的利润来支付现在的成本。也就是“花未来的钱，办现在的事”。 我们在销售自己的产品时候，最容易犯的一个件事，就是降价，我们先来看一个案例： 前几年，有一个卖…
阅读更多...
如何管理多个版本的Node.js

如何管理多个版本的Node.js

我们如何在本地管理多个版本的Node.js，有没有那种不需要重新安装软件再修改配置文件和环境变量的方法？经过我的查找，还真有这种方式，那就是nvm（Node Version Manager）。 下面我就给大家介绍下NVM的使用 1…
阅读更多...
玩转Matlab-Simscape（初级）-01-从一个简单模型开始学习之旅

玩转Matlab-Simscape（初级）-01-从一个简单模型开始学习之旅

** 玩转Matlab-Simscape（初级）- 01 - 从一个简单模型开始学习之旅 ** 目录 玩转Matlab-Simscape（初级）- 01 - 从一个简单模型开始学习之旅 前言一、从模板开始建模二、建模一个简单的连杆2.1 建模2.2 生成子系统 总结 前言 在产…
阅读更多...
Android性能：SurfaceFlinger与BufferQueue（3）

Android性能：SurfaceFlinger与BufferQueue（3）

Android性能：SurfaceFlinger与BufferQueue（3） Android显示系统的组成可以概括为两大部分：绘制(DrawFrame)合成（SurfaceFlinger HWC） 绘制：Surface中空的 GraphicBuffer->CPU或者GPU通过Canv…
阅读更多...
前端之电力系统SVG图低代码

前端之电力系统SVG图低代码

其实所有的图形都是由点&#xff0c;线&#xff0c;面组成的。点线面可以组成一个设备。下面就简单讲讲点线面是怎么画的吧 对于线&#xff0c;可以用path <g><path:d"M ${beginX},${beginY} L ${endX},${endY}":stroke-width"lineWidth":strok…
阅读更多...
UStaticMesh几何数据相关(UE5.2)

UStaticMesh几何数据相关(UE5.2)

UStaticMesh相关类图 UStaticMesh的数据构成 UStaticMesh的FStaticMeshSourceModel UStaticMesh的Mesh几何元数据来自于FStaticMeshSourceModel&#xff0c; 一级Lod就存在一个FStaticMeshSourceModel. FStaticMeshSourceModel几何数据大致包含以下几类: Vertex(点), VertexI…
阅读更多...
【C++】认识C++（上）

【C++】认识C++（上）

目录 从C到C命名空间同名冲突命名空间的定义命名空间的使用 C的输入和输出缺省参数&#xff08;默认参数&#xff09; 从C到C C语言的出现是计算机科学和工程史上的一个重要里程碑&#xff0c;许多现代计算机语言都受C语言的影响。C语言是面向过程的&#xff0c;结构化和模块化…
阅读更多...
Windows Docker 部署 Etcd 键值存储系统

Windows Docker 部署 Etcd 键值存储系统

一、简介 etcd 是一个由 CoreOS 团队发起的开源项目&#xff0c;它用 Go 语言实现&#xff0c;是一个分布式、高可用的键值存储系统。etcd 采用 Raft 算法&#xff0c;确保了数据的强一致性和高可用性&#xff0c;即使集群中有部分节点发生故障&#xff0c;也能保持服务的正常…
阅读更多...
2024深圳杯数学建模C题参考论文24页+完整代码数据解题

2024深圳杯数学建模C题参考论文24页+完整代码数据解题

一、问题研究 24页参考论文&#xff1a; 【编译器识别】2024深圳杯C题24页参考论文1-3小问完整解题代码https://www.jdmm.cc/file/2710545/ 为了回答这些问题&#xff0c;我们需要进行一系列的编译实验、分析编译结果&#xff0c;并构建判别函数。以下是对这些问题的初步分析…
阅读更多...
杨校老师项目之基于单片机STC89C52的智能环境监测系统【嵌入式】

杨校老师项目之基于单片机STC89C52的智能环境监测系统【嵌入式】

获取全套资料&#xff1a; 有偿获取&#xff1a;mryang511688 技术&#xff1a;C语言、单片机等 摘要&#xff1a; 此设计可分为三个主要部分。此中的温度和湿度的检测功能&#xff0c;通过操纵单总线型温湿度传感器DHT11以数字形式显示&#xff0c;实现了切确测得温湿度的功能…
阅读更多...
乡村振兴的农业科技创新：加大农业科技投入，推广农业科技成果，提升农业科技创新水平，推动美丽乡村农业现代化

乡村振兴的农业科技创新：加大农业科技投入，推广农业科技成果，提升农业科技创新水平，推动美丽乡村农业现代化

一、引言 随着全球化和信息化时代的到来&#xff0c;农业作为国民经济的基础&#xff0c;其现代化进程日益受到关注。在乡村振兴战略的大背景下&#xff0c;农业科技创新成为推动乡村经济转型升级、实现农业现代化的关键力量。本文旨在探讨如何通过加大农业科技投入、推广农业…
阅读更多...
[图解]EA从数据库逆向得到分析类模型-01

[图解]EA从数据库逆向得到分析类模型-01

1 00:00:00,840 --> 00:00:02,400 今天&#xff0c;我们来说一下 2 00:00:02,670 --> 00:00:06,320 一个最近几天不止一个同学问的问题 3 00:00:06,490 --> 00:00:11,410 就是说&#xff0c;怎样把一个数据库 4 00:00:13,740 --> 00:00:16,720 转到分析类图 5 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023