Преобразование JS-объекта в строку запроса: решение без фреймворков

Быстрый ответ

Если вам необходимо быстро и удобно преобразовать объект JavaScript в строку запроса, примените функцию encodeURIComponent, чтобы правильно перевести его в URL:

const obj = { name: 'Stack', language: 'JavaScript' };
const queryString = Object.entries(obj)
  .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
  .join('&');

console.log(queryString);

Таким образом, мы получим безопасную для URL строку запроса, которая соединяет ключи и их значения.

Кодирование сложных объектов

Указанный метод эффективен для обычных, так называемых "плоских" объектов. В случае работы со сложными или вложенными объектами потребуется более детальная обработка элементов и массивов.

Для решения данной задачи можно написать функцию serialize, которая с использованием рекурсии обходит свойства объекта и формирует правильную закодированную строку запроса:

function serialize(obj, prefix) {
  const queryString = [];
  for (let key in obj) {
    if (!obj.hasOwnProperty(key)) continue;

    const fullKey = prefix 
        ? `${prefix}[${encodeURIComponent(key)}]`
        : encodeURIComponent(key); 
    const value = obj[key];

    queryString.push(
      (value !== null && typeof value === "object")
        ? serialize(value, fullKey) 
        : `${fullKey}=${encodeURIComponent(String(value))}`
    );
  }

  return queryString.join('&');
}

URLSearchParams: Улучшаем код

URLSearchParams это современный API, который упрощает создание строки запроса, выполняя автоматическое кодирование компонентов. Стоит использовать этот API, если не существует проблем совместимости.

const params = new URLSearchParams();
const data = { user: 'Coder123', skills: ['JS', 'Python', 'Java'] };

Object.keys(data).forEach(key => {
  const value = data[key];
  if (Array.isArray(value)) {
    value.forEach(item => params.append(key, item));
  } else {
    params.set(key, value);
  }
});

console.log(params.toString());

Кодирование особых случаев

Специальные методы, такие как Object.entries(), эффективны для обработки специфических ситуаций и корректного кодирования сложных объектов, как в простых, так и в усложненных структурах:

const encodeSimple = obj => Object.entries(obj)
  .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
  .join('&');

const encodeComplex = (obj, parentKey = '') => {
  const pairs = [];
  for (let [key, value] of Object.entries(obj)) {
    if (value instanceof Object) {
      pairs.push(...encodeComplex(value, parentKey ? `${parentKey}[${key}]` : key));
    } else {
      pairs.push(`${parentKey ? `${parentKey}[${encodeURIComponent(key)}]` : encodeURIComponent(key)}=${encodeURIComponent(value)}`);
    }
  }
  return pairs.join('&');
};

Визуализация

Представим объект JavaScript в виде чемодана с различными "вещами", которые мы хотим передать через интернет:

// Объект JavaScript
const suitcase = { 
  questions: 5, 
  problems: 15,  
  comments: ['Замечательно', 'Ок', 'Хорошо'] 
};

Наша цель – передать содержимое этого чемодана в киберпространство (🌐).

Кодирование строки запроса:
"questions=5&problems=15&comments=Замечательно&comments=Оk&comments=Хорошо"

И вот содержание нашего чемодана уже на пути к конечному пункту назначения.

Решение возможных проблем

Специальные символы и кодирование

Если в значениях имеются специальные символы, encodeURIComponent поможет корректно их закодировать, предотвратив нарушение формата строки запроса:

const complexVal = { query: 'Сложно? &="Да"' };
console.log(`Сложное кодирование: ${encodeSimple(complexVal)}`);

Подробнее об этом расскажет наш спикер на видео

Кодирование дат и других нестроковых значений

В объектах могут содержаться нестроковые значения, такие как объекты Date, которые следует преобразовать в строки до кодирования:

const paramsWithDate = { event: 'Конференция', date: new Date() };
console.log(`Кодирование даты: ${encodeSimple(paramsWithDate)}`);

Этот метод преобразует дату в формат UTC строки, после чего ее кодирует.

Переиспользование и удобство использования

При интеграции в большие системы рекомендуется вынести функционал кодирования в отдельный модуль. Это облегчит его переиспользование и поддержку:

export const queryStringEncoder = {
    encode: encodeSimple,
    encodeComplex: encodeComplex
};

Таким образом, функции можно легко импортировать и использовать в разных проектах.

Полезные материалы