Преобразовать строку запроса в объект JavaScript

Введение

В этом практическом занятии мы изучим, как преобразовать строку запроса или URL-адрес в объект с использованием JavaScript. Мы будем использовать метод String.prototype.split() для извлечения параметров из URL-адреса, а затем создавать объект с использованием конструктора URLSearchParams и преобразовывать его в массив пар ключ-значение. Наконец, мы будем использовать Array.prototype.reduce(), чтобы преобразовать массив в объект JavaScript. Это практическое занятие поможет вам понять, как манипулировать данными и извлекать их из URL-адресов и строк запросов в JavaScript.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/SecurityGroup(["Security"]) 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/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") javascript/SecurityGroup -.-> javascript/web_sec("Web Security Basics") subgraph Lab Skills javascript/variables -.-> lab-28565{{"Преобразование строки запроса в объект"}} javascript/data_types -.-> lab-28565{{"Преобразование строки запроса в объект"}} javascript/arith_ops -.-> lab-28565{{"Преобразование строки запроса в объект"}} javascript/comp_ops -.-> lab-28565{{"Преобразование строки запроса в объект"}} javascript/array_methods -.-> lab-28565{{"Преобразование строки запроса в объект"}} javascript/higher_funcs -.-> lab-28565{{"Преобразование строки запроса в объект"}} javascript/spread_rest -.-> lab-28565{{"Преобразование строки запроса в объект"}} javascript/web_sec -.-> lab-28565{{"Преобразование строки запроса в объект"}} end

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

Для преобразования строки запроса или URL-адреса в объект следуйте шагам:

Откройте Терминал/SSH и введите node, чтобы начать практиковаться в написании кода.
Используйте String.prototype.split(), чтобы извлечь параметры из заданного url.
Используйте конструктор URLSearchParams, чтобы создать объект и преобразовать его в массив пар ключ-значение с использованием оператора расширения (...).
Используйте Array.prototype.reduce(), чтобы преобразовать массив пар ключ-значение в объект.

Вот код для преобразования строки запроса:

const queryStringToObject = (url) =>
  [...new URLSearchParams(url.split("?")[1])].reduce(
    (a, [k, v]) => ((a[k] = v), a),
    {}
  );

Пример использования:

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

Резюме

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