URL 매개변수를 객체로

소개

이 랩에서는 정규 표현식과 배열 메서드를 사용하여 URL 매개변수를 추출하고 JavaScript 객체로 매핑하는 방법을 살펴봅니다. String.prototype.match()를 사용하여 모든 키 - 값 쌍을 얻고, Array.prototype.reduce()를 사용하여 이를 단일 객체로 변환하는 방법을 배웁니다. 이 랩을 마치면 URL 을 사용하고 URL 에서 유용한 정보를 추출하는 방법에 대한 이해도가 높아질 것입니다.

URL 매개변수를 포함하는 객체

현재 URL 의 매개변수를 포함하는 객체를 생성하려면 다음 단계를 따르세요.

1. 터미널/SSH 를 열고 node를 입력하여 코딩 연습을 시작합니다.
2. 적절한 정규 표현식과 함께 String.prototype.match()를 사용하여 모든 키 - 값 쌍을 추출합니다.
3. Array.prototype.reduce()를 사용하여 매핑하고 단일 객체로 결합합니다.
4. 현재 URL 에 적용할 인수로 location.search를 전달합니다.

다음은 코드입니다.

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 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.