Преобразование объекта в строку запроса

JavaScriptJavaScriptBeginner
Практиковаться сейчас

This tutorial is from open-source community. Access the source code

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом практическом занятии мы изучим, как с помощью JavaScript генерировать строку запроса из пар ключ-значение объекта. Мы будем использовать метод Array.prototype.reduce() для Object.entries() для создания строки запроса и определять соответствующий символ в зависимости от длины queryString. В конце этого практического занятия вы сможете эффективно генерировать строку запроса для своих веб-приложений.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") javascript/AdvancedConceptsGroup -.-> javascript/template_lit("Template Literals") subgraph Lab Skills javascript/variables -.-> lab-28524{{"Преобразование объекта в строку запроса"}} javascript/data_types -.-> lab-28524{{"Преобразование объекта в строку запроса"}} javascript/arith_ops -.-> lab-28524{{"Преобразование объекта в строку запроса"}} javascript/comp_ops -.-> lab-28524{{"Преобразование объекта в строку запроса"}} javascript/obj_manip -.-> lab-28524{{"Преобразование объекта в строку запроса"}} javascript/higher_funcs -.-> lab-28524{{"Преобразование объекта в строку запроса"}} javascript/destr_assign -.-> lab-28524{{"Преобразование объекта в строку запроса"}} javascript/template_lit -.-> lab-28524{{"Преобразование объекта в строку запроса"}} end

Преобразование объекта в строку запроса

Для преобразования объекта в строку запроса используйте функцию objectToQueryString(), которая генерирует строку запроса из пар ключ-значение заданного объекта.

Функция работает следующим образом:

  • Она использует Array.prototype.reduce() для Object.entries() для создания строки запроса из queryParameters.
  • Она определяет symbol как ? или & в зависимости от длины queryString.
  • Она конкатенирует val к queryString только если это строка.
  • Она возвращает queryString или пустую строку, когда queryParameters ложны.

Вот код для функции objectToQueryString():

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():

objectToQueryString({ page: "1", size: "2kg", key: undefined }); // возвращает '?page=1&size=2kg'

Резюме

Поздравляем! Вы завершили практическое занятие по преобразованию объекта в строку запроса. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.