使用 JavaScript 将对象转换为查询字符串

作者

将对象转换为查询字符串

Convert an Object to a Query String using JavaScript

使用URLSearchParams()构造函数将对象转换为查询字符串，例如new URLSearchParams(obj).toString(). 对结果调用该toString()
方法会返回一个不带问号的查询字符串。如果提供的对象为空，则返回一个空字符串。

索引.js
const obj = {
  page: 2,
  limit: 10,
  filter: 'js',
};

const result = '?' + new URLSearchParams(obj).toString();
console.log(result); // 👉️ "?page=2&limit=10&filter=js"

我们将一个对象传递给
URLSearchParams()
构造函数，并在结果上调用了
toString()
方法。

请注意，该toString()方法返回一个不带问号的查询字符串。

我们使用加法 (+) 运算符在结果前添加一个问号，使其成为有效的查询字符串。

请注意，URLSearchParams()Internet Explorer 不支持该构造函数。如果您需要支持浏览器，请改用map和join方法的组合。

要将对象转换为查询字符串：

  1. 使用该Object.keys()方法获取对象键的数组。
  2. 使用该map()方法遍历数组。
  3. 在每次迭代中，返回一个包含查询参数名称和值的字符串。
  4. 通过与符号连接结果&。
索引.js
// ✅ Supported in IE
const obj = {
  page: 2,
  limit: 10,
  filter: 'js',
};

const str =
  '?' +
  Object.keys(obj)
    .map(key => {
      return `${key}=${encodeURIComponent(obj[key])}`;
    })
    .join('&');

console.log(str); // 👉️ "?page=2&limit=10&filter=js"

Object.keys方法返回对象键的

数组。

索引.js
const obj = {
  page: 2,
  limit: 10,
  filter: 'js',
};

// 👇️ ['page', 'limit', 'filter']
console.log(Object.keys(obj));

下一步是使用
Array.map
方法迭代键数组。

我们传递给map()方法的函数被数组中的每个元素调用。

在每次迭代中，我们返回一个 形式的字符串key=value。

我们使用
encodeURIComponent()
函数对查询参数值进行编码。

这基本上用转义序列替换了 , 之类的字符，?以生成更一致的查询字符串。=&

我们使用
Array.join
方法将字符串数组与符号分隔符连接起来。

索引.js
const arr = ['page=2', 'limit=10', 'filter=js'];

// 👇️ "page=2&limit=10&filter=js"
console.log(arr.join('&'));

最后一步是在结果前加上问号以形成有效的查询字符串。

您选择哪种方法是个人喜好的问题。我会选择构造函数，因为它更直接且更易于阅读。如果您需要支持一些较旧的浏览器，结合使用和即可完成工作。 URLSearchParams() mapjoin

–