如何更新URLSearchParams并获取修改后的完整URL？

首先，完全不推荐手动拼接URL——这种方式很容易踩坑，比如当查询参数为空时会多出多余的?，或者不小心破坏了URL中已有的编码字符，处理边界情况的成本很高。

其实URL对象本身就提供了内置的机制来处理这种场景，分两种情况来说：

1. 直接操作URL的内置searchParams（最优解） #

你不需要手动创建新的URLSearchParams实例，直接使用url.searchParams就能修改查询参数，修改完成后，url.href或者url.toString()会自动返回包含最新参数的完整URL：

let url = new URL(link.url);
// 直接通过url的searchParams添加参数
url.searchParams.append("collection", this.collection);
// 直接获取完整URL
const fullUrl = url.href; // 或者 url.toString()
console.log(fullUrl); // 会输出类似 "http://stackoverflow.dev/media?page=2&collection=xxx"

这种方式最简洁，也完全避免了手动拼接的各种潜在问题。

2. 如果你已经创建了独立的URLSearchParams对象 #

如果你因为某些原因已经生成了独立的params对象，也不需要手动拼接，只需要把更新后的params赋值给url.search，然后再获取url.href即可：

let url = new URL(link.url);
let params = new URLSearchParams(url.search);
params.append("collection", this.collection);
// 将更新后的params赋值给url的search属性
url.search = params;
// 获取完整URL
const fullUrl = url.href;
console.log(fullUrl);

URL对象会自动处理参数拼接、编码等细节，确保生成的URL是符合规范的。

为什么不推荐手动拼接？ #

举个简单的例子：如果你的params.toString()返回空（比如没有任何查询参数），手动拼接会得到http://stackoverflow.dev/media?，这是不符合URL规范的；而通过URL对象处理的话，会自动去掉多余的?，返回正确的http://stackoverflow.dev/media。另外，URL对象会自动处理特殊字符的编码，手动拼接很容易忽略这一点，导致URL失效。

内容的提问来源于stack exchange，提问作者Djave