Параметры URL в виде объекта

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

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

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

Введение

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

Объект с параметрами URL

Чтобы создать объект, содержащий параметры текущего URL, следуйте этим шагам:

  1. Откройте Терминал/SSH и введите node, чтобы начать практиковаться в написании кода.
  2. Используйте String.prototype.match() с соответствующим регулярным выражением, чтобы извлечь все пары ключ-значение.
  3. Используйте Array.prototype.reduce(), чтобы сопоставить и объединить их в единый объект.
  4. Передайте location.search в качестве аргумента, чтобы применить его к текущему URL.

Вот код:

const getURLParameters = (url) =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => (
      (a[v.slice(0, v.indexOf("="))] = v.slice(v.indexOf("=") + 1)),
      a
    ),
    {}
  );

Вы можете использовать эту функцию с любым URL, чтобы получить объект с его параметрами. Вот несколько примеров:

getURLParameters("google.com"); // {}
getURLParameters("http://url.com/page?name=Adam&surname=Smith");
// {name: 'Adam', surname: 'Smith'}

Резюме

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