详解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