防止在 searchParams 处理中出现不必要的“=”

Question

处理 时searchParams，=为空值添加的额外内容会导致错误的 URL。加工时
有没有办法防止不必要的情况发生？=searchParams

注意：可以删除额外=的RegExp()，但问题的目的是使用 来实现它searchParams。

const u = new URL('https://example.com/?4FEE63D94&foo=1');
params = u.searchParams;

params.delete('foo');         // Delete the foo parameter
console.log(u.href);          // https://example.com/?4FEE63D94=

更新

URLSearchParams方法似乎会改变 URL。
URLSearchParams.entries()&&URLSearchParams.forEach()替换URLSearchParams.get()为+空格 ( %20)。

const u = new URL('https://example.com/?4FEE63D94&foo=1&bar=aaa+bbb+ccc');
let params = u.searchParams;

params.delete('foo');         // Delete the foo parameter
console.log(u.href);          // https://example.com/?4FEE63D94=&bar=aaa+bbb+ccc

u.search = [...params.entries()].map(([key, value]) =>  value ? `${key}=${value}` : key).join('&');
console.log(u.href);          // https://example.com/?4FEE63D94&bar=aaa%20bbb%20ccc

甚至params.delete()改变网址。(auth,client至 auth%2Cclient)
注意：运行代码片段不会显示它

const url = 'https://example.com/?4FEE63D94&scope=auth,client&foo=1&bar=aaa+bbb+ccc';
const u = new URL(url);
let params = u.searchParams;
params.delete['foo'];
console.log(u.href);          // https://example.com/?4FEE63D94=&scope=auth%2Cclient&bar=aaa+bbb+ccc

解决方法：删除不需要的=

根据@Bergi的建议

const u = new URL('https://example.com?4FEE63D94&foo=1&bar=aaa+bbb+ccc');
let params = u.searchParams;

params.delete('foo');         // Delete the foo parameter
console.log(u.href);          // https://example.com/?4FEE63D94=&bar=aaa+bbb+ccc

// URL() params.delete() adds = to all params
u.search = u.search.replace(/=(?=&|$)/g, '');

console.log(u.search);        // ?4FEE63D94&bar=aaa+bbb+ccc
console.log(u.href);          // https://example.com/?4FEE63D94&bar=aaa+bbb+ccc

性能测试

手动处理与 URLSearchParams

let t;
const n = 100000;

const url = 'https://example.com/?4FEE63D94&scope=auth,client&foo=1&bar=aaa+bbb+ccc';
const u = new URL(url);

t = performance.now();
for (let i = 0; i < n; i++) {
  let params = Object.fromEntries(u.search.substring(1).split('&').map(p => p.split('=')));
  delete params['foo'];
  u.search = Object.entries(params).map(([key, value]) => value ? `${key}=${value}` : key).join('&');
}
console.log(`Operation took ${performance.now() - t} milliseconds`); // 731 millisecond

t = performance.now();
for (let i = 0; i < n; i++) {
  let params = u.searchParams;
  params.delete('foo');
}
console.log(`Operation took ${performance.now() - t} milliseconds`); // 208 millisecond

Answer 1

该类URL将搜索参数理解为键值对，如评论之一所述。您需要考虑什么FEE63D94是：键还是值？

如果它是一个键，那么它将有一个空值，如下所示FEE63D94=

如果它是一个值，那么为它找到一个合适的键，key=FEE63D94

另一种选择是让它成为路径的一部分，https://example.com/4FEE63D94?foo=1