如何使用URLSearchParams删除空查询参数？

Question

我在处理查询参数时，了解到了URLSearchParams。我正在使用它来形成这种类型的查询对象，

const x = {
  a: 'hello World'
  b: 23
  c: ''
}
let params = new URLSearchParams(x);
console.log(params.toString()) // a=hello+World&b=23&c=

我不想使用 c= 这个参数名，因为它看起来不太好，而且我的 API 也不需要它。

所以，我希望得到这个结果 a=hello+World&b=23（没有空查询字符串）。 但是，在 MDN Web Docs 上我找不到任何相关信息。

我该怎么做呢？

以下操作不起作用，因为它似乎直接改变了 params ，从而影响了 forEach ：

const x = {
  a: 'hello World',
  b: '',
  c: ''
};

let params = new URLSearchParams(x);
params.forEach((value, key) => { // never reaches `c`
  console.log(key, ' => ', value)
  if (value == '')
    params.delete(key);
});
console.log(params.toString());

- ezio4df

Answer 1

您可以迭代键值对并删除具有null值的键：

const x = {
  a: 'hello World',
  b: '',
  c: ''
};

let params = new URLSearchParams(x);
let keysForDel = [];
params.forEach((value, key) => {
  if (value == '') {
    keysForDel.push(key);
  }
});

keysForDel.forEach(key => {
  params.delete(key);
});

console.log(params.toString());

- Rahul Bhobe

---

注意，这将同时移除“0”值。 - Matt

@Matt 把条件改成 v == '' 就可以了，对吧？ - ezio4df

我根据那个进行了更改。 - Rahul Bhobe

当然 - 什么事？ - Rahul Bhobe

我简直不敢相信这不是URLSearchParams API的一部分。我简直不敢相信这是规范解决方案。我真的无法相信。 - martriay

Answer 2

我个人使用以下方式（使用lodash）来实现清晰的操作方法：

import omitBy from 'lodash/omitBy';
import isEmpty from 'lodash/isEmpty';

const x = {
  a: 'hello World'
  b: 23
  c: ''
}

const params = new URLSearchParams(omitBy(x, isEmpty));

// mixing other sets
const params = new URLSearchParams({
  otherParam: 'foo', 
  ...omitBy(x, isEmpty)
});

- r712m

---

这将同时删除0值。 - Tonni

出于Tonni所提到的原因，我会选择isNil而不是isEmpty。 - 76484

我在使用isNil和omitBy时一切顺利。 - undefined

Answer 3

JavaScript ES5+中删除查询参数的简单方法：

for (let param in query) { /* You can get copy by spreading {...query} */
  if (query[param] === undefined /* In case of undefined assignment */
    || query[param] === null 
    || query[param] === ""
  ) {    
    delete query[param];
  }
}
return new URLSearchParams(query).toString();

- abdelgrib

Answer 4

这是另一种干净的方法，您可以这样做：

const x = {
  a: 'hello World',
  b: 23,
  c: ''
};

// Create a new object with only non-empty properties
const y = Object.fromEntries(
  Object.entries(x).filter(([key, value]) => value !== '')
);

// Then use this new object to create URLSearchParams
let params = new URLSearchParams(y);

console.log(params.toString());  // a=hello+World&b=23

1. Object.entries(x) 给我们提供了 x 对象的 [key, value] 数组。
2. 筛选函数用于删除值为空字符串 ('') 的条目。
3. Object.fromEntries 然后将这个筛选后的数组转换回对象。
4. 这个结果对象被传递给 URLSearchParams，它只包含非空值的条目。

- Manuvo

Answer 5

如果您正在使用查询字符串，也可以使用正则表达式进行过滤：

const query = "a=hello+World&b=23&c=&d=12&e="

query.replace(/\w+=&/g, '').replace(/&\w+=$/, '')
// "a=hello+World&b=23&d=12"

- Lucas David

Answer 6

这是一个保留所有0值的一行代码。

const x = {
  a: 'hello World',
  b: '',
  c: '',
  d: 0
};

const params = new URLSearchParams(new URLSearchParams(x).toString().replace(/(?:\&|^)[^\&]*?\=(?=\&|$)/g, ''));

console.log(params.toString());

如果你想要一些更容易理解的内容：

const x = {
  a: 'hello World',
  b: '',
  c: '',
  d: 0
};

const params = new URLSearchParams(new URLSearchParams(x).toString().split('&').filter(el => el.split('=').slice(-1) !== '').join('&')).toString();

console.log(params.toString());

- cfx