字符串拼接与

URL如需要处理相对路径、不同的协议、查询参数编码等容易出错且难以维护。

手动拼接可能会忽略一些细节比如自动编码特殊字符等需要enUrlcode。

new

的各个组成部分协议、主机、路径、查询参数等并且可以自动处理编码、路径规范化等问题。

const

baseUrl);console.log(fullUrl.toString());

https://example.com/api/data?id123优点

自动处理

URL字符串拼接或模板语法通常就足够了尤其是在你非常确定路径和参数不会产生问题时。

URL

URL则直接使用。

如果是相对路径则需要结合第二个参数来解析为完整的

URLbase

URL(https://example.com/path?namevalue#hash);

https://example.com/path?namevalue#hash示例

2使用相对路径和基准

https://example.com/path?namevalue#hash2.

new

https://example.com/path?namevalue#hashorigin协议、域名和端口号的组合。

example.comhostname主机名部分不包括端口号。

const

URL(https://example.com:8080/path);

?namevaluesearchParamsURLSearchParams

console.log(url.searchParams.get(name));

value

https://example.com/path?namevalue#hashtoJSON()返回

URL

https://example.com/path?namevalue#hash3.

常见用法示例

url.searchParams.append(filter,

active);

https://example.com/api/data?id123filteractive3.2.

操作查询参数

URL(https://example.com/api/data?id123filteractive);

console.log(url.searchParams.get(id));

123

url.searchParams.delete(filter);

删除参数

https://example.com/api/data?id4563.3.

处理相对路径

https://example.com/some/path/;

const

https://example.com/some/other/path4.

使用场景

假设我们有一个URL需要将一个数组作为查询参数添加到URL中。

const

arrayParam.join(,));console.log(url.toString());

https://example.com/?arrayvalue1,value2,value3解析数组参数

当我们获取URL并需要解析其中的数组参数时可以使用URLSearchParams对象进行解析。

const

https://example.com/?arrayvalue1,value2,value3;

const

有时我们可能会遇到需要处理多个同名参数的情况例如?arrayvalue1arrayvalue2arrayvalue3。

可以使用URLSearchParams的getAll方法

拼接多个同名参数到URL

value));console.log(url.toString());

https://example.com/?arrayvalue1arrayvalue2arrayvalue3//

解析多个同名参数从URL

parsedUrl.searchParams.getAll(array);console.log(parsedArrayParam);

[value1,

value3]但实际情况往往比上面的示例更复杂比如参数是一个对象、根据实际情况来设置参数的值、要处理undefined、0、0、Boolean、true、NaN等不同类型和异常的值每次使用时都去处理显然是不合理的这时候就可以将拼接和移除参数的函数封装成方法来使用。

/***

URLSearchParams(url.search);const

result

https://example.com/?param1value1param2value2param2value3;

const

https://example.com/?param1value1param2value2param2value3param5value5实现一个url解析参数和拼接参数的功能。

这时候一个简单的解析和拼接的函数就可以搞定。

当然方法有多种实现方式下面还有一种通过正则来实现的但下面拼接的时候会忽略数字0所以参数一定要用字符串。

/***

_arr.push(${key}${encodeURIComponent(_query[key])})}return

${url.split(?)[0]}${_arr.length

?${_arr.join()}

url.substring(url.lastIndexOf(?)

1);const

/([^?])([^?]*)/g;search.replace(reg,

(rs,

它是开源免费项目每周下载量将近7千万支持任意字符对象进行解析和拼接支持types/qs导入后11.3k。