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

本文涉及的产品
.cn 域名,1个 12个月
简介: 详解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 对象作为参数:

1. vavar 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
————————————————

                            版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
                        
原文链接:https://blog.csdn.net/u014316335/article/details/138801217

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 都在不断进步,标准且跨平台,以前很多需要自定义的方法和特性,现在浏览器都已经原生支持,以前的那些语言框架价值越来越低。

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

相关文章
|
9天前
|
NoSQL 安全 API
如何有效提升 API 接口的安全性?
**API安全关键在于验证和防刷。通过排序参数、生成签名和MD5加密确保请求合法性。使用Redis限制请求频率,防止接口被恶意刷取。验证和防刷策略结合,保护API免受攻击和滥用。**
28 0
|
5天前
|
开发框架 监控 JavaScript
使用Node.js 框架( Express.js)来创建一个简单的 API 端点
【7月更文挑战第5天】使用Node.js 框架( Express.js)来创建一个简单的 API 端点
11 3
|
7天前
|
JavaScript API
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
21 1
|
4天前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch('url').then(r => r.json()).then(data => console.log(data)).catch(err => console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
|
5天前
|
存储 监控 API
解锁京东 APP 商品详情的 API 接口获取方法
在数字化商业环境中,获取京东APP商品详情的API接口至关重要。这有助于电商数据分析、价格监控、商品推荐等。API接口提供高效、稳定且合规的数据源,允许快速获取大量商品信息。要使用接口,需注册开发者账号、了解接口文档并进行开发调试。示例代码展示了Python如何调用接口。同时,注意遵守规则、处理数据安全及接口更新。利用API能提升业务效率,但需在合法合规下进行。
|
7天前
|
JavaScript API 索引
JS【详解】Set 集合 (含 Set 集合和 Array 数组的区别,Set 的 API,Set 与 Array 的性能对比,Set 的应用场景)
JS【详解】Set 集合 (含 Set 集合和 Array 数组的区别,Set 的 API,Set 与 Array 的性能对比,Set 的应用场景)
27 0
|
7天前
|
JSON JavaScript API
JS【详解】Map (含Map 和 Object 的区别,Map 的常用 API,Map与Object 的性能对比,Map 的应用场景和不适合的使用场景)
JS【详解】Map (含Map 和 Object 的区别,Map 的常用 API,Map与Object 的性能对比,Map 的应用场景和不适合的使用场景)
13 0
|
9天前
|
JavaScript API
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
|
10天前
|
Web App开发 JavaScript 前端开发
js 调试—— 【控制台】debugger语句 、 命令行API
js 调试—— 【控制台】debugger语句 、 命令行API
14 0
|
JavaScript 前端开发 测试技术
MFC Activex与JavaScript的接口交互
MFC Activex与JavaScript的接口交互 在Activex的应用中与网页的JavaScript的交互必不可少,在这里就简单的介绍下。VC 创建的Activex的有两种类型,MFC Activex与ATL Activex, 在VC新建工程的时候选择,这篇文章介绍的是针对MFC Activex的,ATL Activex可以绕过了。
1109 0