JS URL()和URLSearchParams() API接口详细介绍

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8907

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、先快速了解这两个API干嘛用的

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

https://www.zhangxinxu.com/wordpress/?s=url

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

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

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

new URL('https://www.zhangxinxu.com/wordpress/?s=url').searchParams.get('s');

或者：

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

二、先来了解下URLSearchParams()语法

语法

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

参数

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

var params2 = new URLSearchParams(location.search);

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

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

三、URLSearchParams实例方法们

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

这个URLSearchParams实例包含众多方法，具体如下：

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

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

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

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

控制台输入结果示意：

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

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

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

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

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

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

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

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

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()兼容性

Edge17+支持。

四、再来了解下URL()语法

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

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

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

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

语法

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

参数

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

测试与用法示意

基本使用示意：

var base = 'https://www.zhangxinxu.com';
// 结果是：https://www.zhangxinxu.com/study
console.log(new URL('study', base).href);
// 结果是：https://www.zhangxinxu.com/study
console.log(new URL('/study', base).href);

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

var base = 'https://www.zhangxinxu.com';
var urlFromBase = new URL('study', base);
// 结果是：https://www.zhangxinxu.com/study
console.log(new URL(urlFromBase).href);
// 结果是：https://www.zhangxinxu.com/wordpress
console.log(new URL('wordpress', urlFromBase).href);

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

var base = 'https://www.zhangxinxu.com/study/a/b/c';
// 结果是：https://www.zhangxinxu.com/study/a/sp/icon
console.log(new URL('sp/icon', base).href);
// 结果是：https://www.zhangxinxu.com/study/a/sp/icon
// 上下结果对比表明./和裸露相对地址没有区别
console.log(new URL('./sp/icon', base).href);
// 结果是：https://www.zhangxinxu.com/study/sp/icon
// 向上一层URL层级深度
console.log(new URL('../sp/icon', base).href);
// 结果是：https://www.zhangxinxu.com/study/a/sp/icon
// 层级按照斜杠来算的
console.log(new URL('../sp/icon', base + '/').href);
// 结果是：https://www.zhangxinxu.com/sp/icon
// 斜杠开头表示跟地址开始匹配
console.log(new URL('/sp/icon', base).href);

眼见为实，下面的是控制台输出结果：

下面是不同域名之间的测试：

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

这是运行后的结果：

下面是出错的测试：

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

五、URL实例对象的属性和方法

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

属性

已知有URL地址如下：

var url = new URL('https://www.zhangxinxu.com:80/wordpress/?s=url#comments');
var ftp = new URL('ftp://username:[email protected]/path/file');

url.searchParams.get('s');

方法

静态方法

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

我们使用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项目： https://github.com/lifaon74/url-polyfill

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

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

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

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

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

七、结语

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

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

那些咨询我前端问题的小伙伴，不用再问我任何关于Vue和React的问题了，我全部用都没用过，以后也不会用，不是我的方向，也不是未来的方向。

本文为原创文章，欢迎分享，勿全文转载，如果内容你实在喜欢，可以加入收藏夹，永不过期，而且还会及时更新知识点以及修正错误，阅读体验也更好。

本文地址： https://www.zhangxinxu.com/wordpress/?p=8907

（本篇完）