URLSearchParams.set()没有URIEncoding

Question

URLSearchParams.set(键，值) URIEncodes给出的值，产生丑陋的未指定的urls。

下面的测试是基于这个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

如果一个人希望他们所有的searchParams都是未编码的，他们只需将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}`;
}

​