URLSearchParams.set() without URIEncoding

Question

URLSearchParams.set(key，value(URI对给定的值进行编码，生成难看的未指定URL。

以下测试基于此url友好字符列表

const url = new URL("http://www.example.com/path");
const test = "abc123+-_$#%?@,"
url.searchParams.set("foo", test);
console.log(`What foo should be: ${test}`);
console.log(`What foo is: ${url.search}`)

是否有方法使用URL.searchParams中的URLSearchParams将搜索参数更新为给定值，而不是其编码

Answer 1

如果希望所有的searchParam都是未编码的，他们可以将url.search设置为自己的未编码版本：

const url = new URL("http://www.example.com/path");
const test = "abc123+-_$#%?@,"
url.searchParams.set("foo", test)
url.search = decodeURIComponent(url.search)
console.log(`What foo should be: ${test}`);
console.log(`What foo is: ${url.search}`)

如果只想对指定的密钥进行未编码，则需要一些额外的

const testUrl = new URL("http://www.example.com/path");
testUrl.searchParams.set("bar", "++ ++");
const testVal = "abc123+-_$#%?@,";
setValueUnencoded(testUrl, "foo", testVal);

console.log(`What foo should be: ${testVal}`);
console.log(`What foo is: ${testUrl.search}`)

function setValueUnencoded(url, key, value) {
url.searchParams.set(key, value);
const entries = Array.from(url.searchParams.entries());
url.search = "";
entries.forEach(item => {
if (item[0] === key) { return; }
url.searchParams.set(item[0], item[1]);
});
url.search += `${key}=${value}`;
}