在JavaScript中在查询字符串和对象之间进行转换

正如大多数Web开发人员所知，URL用于远不止简单的页面导航，通常以查询字符串的形式包含大量信息。在许多Web应用程序中，将查询字符串和其对象表示之间进行转换至关重要。让我们看看如何做到这一点。

查询字符串转对象

查询字符串本质上是一个键值对列表。它们与URL之间用?字符分隔，与彼此之间用&字符分隔。给定一个URL对象，我们可以使用URL.prototype.search或URL.prototype.searchParams。然而，我们可能并不总是能够使用URL对象，所以最好创建一个可以使用普通字符串的函数。

知道了分隔符，我们可以使用String.prototype.split()来获取字符串的适当部分。然后，使用URLSearchParams()构造函数，我们可以创建一个对象，然后使用扩展运算符（...）将其转换为键值对数组。最后，我们可以使用Object.fromEntries()将键值对数组转换为对象。

const queryStringToObject = url =>
  Object.fromEntries([...new URLSearchParams(url.split('?')[1])]);

queryStringToObject('https://google.com?page=1&count=10');
// {page: '1', count: '10'}

对象转查询字符串

相反的操作同样有用。给定一个对象，我们可以创建一个可以附加到URL的查询字符串。我们可以使用Object.entries()来获取一个键值对数组。然后，我们可以使用Array.prototype.reduce()从键值对数组创建查询字符串。每个键值对都被转换为字符串并连接到queryString上。使用的分隔符是?和&，取决于键值对的索引。

const objectToQueryString = queryParameters => {
  return queryParameters
    ? Object.entries(queryParameters).reduce(
        (queryString, [key, val], index) => {
          const symbol = queryString.length === 0 ? '?' : '&';
          queryString +=
            typeof val === 'string' ? `${symbol}${key}=${val}` : '';
          return queryString;
        },
        ''
      )
    : '';
};

objectToQueryString({ page: '1', size: '2kg', key: undefined });
// '?page=1&size=2kg'

function objectToQueryString(obj) {
  const queryParams = [];

  for (let key in obj) {
    if (obj.hasOwnProperty(key) && obj[key] !== undefined) {
      queryParams.push(`${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`);
    }
  }

  return `?${queryParams.join('&')}`;
}

该函数将一个对象转换为查询字符串。它遍历对象的属性，并将每个属性和其对应的值编码为URL安全的格式。如果属性的值为undefined，则不包含该属性。最后，将所有的属性和值拼接成一个查询字符串，并在开头添加?符号。