码云笔记前端博客
Home > 前端技术 > 详解JS的URL()和URLSearchParams() API接口

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

2019-08-26 分类:前端技术 作者:码云 阅读(167)

本文共计7781个字,预计阅读时长需要20分钟。

两个API接口定义

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

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

快速了解两个API在哪里用

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

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

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

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

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

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

或者

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

URLSearchParams()语法

语法

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

参数

strSearchParams

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

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

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

1
var params2 = new URLSearchParams(location.search);

arrSearchSequence

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

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

objSearchKeyValue

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

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

URLSearchParams实例方法

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

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

URLSearchParams.append(name,key)

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

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

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

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

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

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

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

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

控制台输入结果示意:
详解JS的URL()和URLSearchParams() API接口
URLSearchParams.forEach(callback)

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

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

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

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

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

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

详解JS的URL()和URLSearchParams() API接口
如果没有对应的值,则返回null。

URLSearchParams.getAll(name)

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

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

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

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

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

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

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

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

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

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

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

详解JS的URL()和URLSearchParams() API接口
URLSearchParams.set(name,value)

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

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

详解JS的URL()和URLSearchParams() API接口
可以看到会替换之前所有的's'查询参数值。下面这个例子展示“无则加冕”:

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

详解JS的URL()和URLSearchParams() API接口
也就是原本没有对应参数的时候会添加这个参数。

URLSearchParams.sort()

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

1
2
3
4
5
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

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

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

URLSearchParams()兼容性

Edge17+支持。
URLSearchParams()兼容性

URL()语法

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

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

1
2
3
if (window.URL) {
    // ...
}

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

语法

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

参数

url

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

base

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

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

测试与用法示意

基本使用示意:

1
2
3
4
5
var base = 'https://www.mybj123.com';
// 结果是:https://www.mybj123.com/aboutus
console.log(new URL('aboutus', base).href);
// 结果是:https://www.mybj123.com/aboutus
console.log(new URL('/aboutus', base).href);

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

1
2
3
4
5
6
var base = 'https://www.mybj123.com';
var urlFromBase = new URL('aboutus', base);
// 结果是:https://www.mybj123.com/aboutus
console.log(new URL(urlFromBase).href);
// 结果是:https://www.mybj123.com/sitemaps
console.log(new URL('sitemaps', urlFromBase).href);

详解JS的URL()和URLSearchParams() API接口
下面是带有较深层级base地址和不同相对地址形式的测试:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var base = 'https://www.mybj123.com/study/a/b/c';
// 结果是:https://www.mybj123.com/study/a/sp/icon
console.log(new URL('sp/icon', base).href);
// 结果是:https://www.mybj123.com/study/a/sp/icon
// 上下结果对比表明./和裸露相对地址没有区别
console.log(new URL('./sp/icon', base).href);
// 结果是:https://www.mybj123.com/study/sp/icon
// 向上一层URL层级深度
console.log(new URL('../sp/icon', base).href);
// 结果是:https://www.mybj123.com/study/a/sp/icon
// 层级按照斜杠来算的
console.log(new URL('../sp/icon', base + '/').href);
// 结果是:https://www.mybj123.com/sp/icon
// 斜杠开头表示跟地址开始匹配
console.log(new URL('/sp/icon', base).href);

详解JS的URL()和URLSearchParams() API接口
下面是不同域名之间的测试:

1
2
3
4
5
6
7
8
var base = 'https://www.mybj123.com';
// 结果是:http://image.mybj123.com和https://image.mybj123.com
// 没有协议的url认为是相对地址,协议取自base地址
console.log(new URL('//image.mybj123.com', 'http://www.mybj123.com').href);
console.log(new URL('//image.mybj123.com', 'https://www.mybj123.com').href);
// 结果是:https://image.mybj123.com
// 这里url是完整的绝对地址,因此,忽略后面的base参数
console.log(new URL('https://image.mybj123.com', base).href);

下面是出错的测试:

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

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

URL实例对象的属性和方法

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

属性

已知有URL地址如下:

1
2
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对应的值,可以:

1
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跨域生成问题的时候可以使用这两个静态方法:

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

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

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(7) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
7

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - 详解JS的URL()和URLSearchParams() API接口

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 458 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 215 条
  • 链接总数: 14 个
  • 标签总数: 1011 个
  • 建站时间: 495 天
  • 访问总量: 8647997 次
  • 最近更新: 2019年10月21日