对象查询字符串js - JavaScript

在 JavaScript 中，对象查询字符串是一种常用的方式，用于从一个 JavaScript 对象中构建 URL 查询字符串。这个功能非常有用，因为很多网络 API 都需要使用查询字符串传递参数。

什么是对象查询字符串？

查询字符串是 URL 地址里的一部分，用于携带参数。例如，在下面的 URL 中，查询字符串是 ?page=2&limit=10。

http://example.com/articles?page=2&limit=10

在 JavaScript 中，我们可以使用对象查询字符串来构建这些参数。以下是一个例子：

const params = { page: 2, limit: 10 };
const queryString = Object.keys(params).map(key => key + '=' + params[key]).join('&');
console.log(queryString); // "page=2&limit=10"

在这个例子中，我们使用 Object.keys 方法获取 params 对象的键，然后使用 map 方法将每个键和值转换为一个字符串形式的参数，最后使用 join 方法将它们连接为一个查询字符串。

如何将查询字符串转换成对象？

如果我们有一个查询字符串，我们需要将其转换成一个对象以便于我们在 JavaScript 中使用。以下是一个例子：

const queryString = 'page=2&limit=10';
const params = queryString.split('&').reduce((params, param) => {
  const [key, value] = param.split('=');
  params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
  return params;
}, {});
console.log(params); // { page: '2', limit: '10' }

在这个例子中，我们使用 split 方法将查询字符串分割成一个参数数组。然后我们使用 reduce 方法将这些参数转换为一个对象。对于每个参数，我们使用 split 方法将它分割为键和值。如果值不为空，我们使用 decodeURIComponent 方法解码它，并使用正则表达式将 + 替换为一个空格。

如何将对象查询字符串添加到 URL 中？

当我们需要将一个对象查询字符串添加到一个 URL 中时，我们需要考虑两种情况。如果 URL 中已经存在查询字符串，我们需要将查询字符串添加到现有的查询字符串中。否则，我们需要将查询字符串添加到 URL 的末尾。

以下是一个可以实现这个功能的函数：

function appendQueryParams(url, params) {
  const queryString = Object.keys(params).map(key => key + '=' + params[key]).join('&');
  if (url.includes('?')) {
    return url + '&' + queryString;
  }
  else {
    return url + '?' + queryString;
  }
}

const url = 'http://example.com/articles';
const params = { page: 2, limit: 10 };
const urlWithQueryParams = appendQueryParams(url, params);
console.log(urlWithQueryParams); // "http://example.com/articles?page=2&limit=10"

在这个函数中，我们首先使用我们之前提到的代码将对象转换为查询字符串。然后，我们检查 url 是否已经包含查询字符串。如果是的话，我们将查询字符串添加到现有的查询字符串中。否则，我们将查询字符串添加到 URL 的末尾。

结论

对象查询字符串是一个常用的工具，用于从 JavaScript 对象中构建 URL 查询字符串。当我们需要与网络 API 交互时，了解这个工具非常重要。我们可以使用 JavaScript 提供的强大工具轻松地实现这个功能。