URL 쿼리 매개변수를 추출하는 방법

다음과 같은 URL이 있다고 가정합니다https://myshop.com/products?id=1.

해당 id 값을 어떻게 가져올 수 있습니까?

오늘은 바닐라 JavaScript를 사용하여 URL에서 ID를 가져오는 방법을 살펴보겠습니다.

주요 개념

창.위치

location is is a window property that contains information about the current Document. Document refers to the page that is being rendered.

URLSearchParams API

MDN에 따르면:

The URLSearchParams API defines utility methods that can be used to manipulate the URL string like ours here: "https://myshop.com/products?id=1"

이를 달성하기 위해 URLSearchParams 및 위치를 사용하는 방법은 무엇입니까?

연료 페달을 밟고 URLSearchParams API를 사용하여 속도를 높이기 직전에 한 가지 더 자세히 설명해야 합니다window.location.

오 예! window.location가 호출되면 현재 문서에 관한 모든 정보가 포함된 객체를 반환합니다. 예를 들어 지금 작업 중인 이 창의 콘솔에서 window.location를 실행하면 다음과 같은 결과가 나타납니다.



보시다시피 바로 거기에 많은 정보가 있습니다 👆👆
window.location 속성에 대한 이러한 지식을 통해 링크https://myshop.com/products?id=1에서 매개변수를 가져오는 것에서 하나의 속성에 불과합니다.

우리가 얼마나 가까이 있는지 볼 수 있도록 이전 개체를 확장하겠습니다.

무슨 말인지 알겠어? 응! 바로 거기에서 search: ""를 볼 수 있습니다. 예, 이 경우에는 현재 창에 쿼리 매개변수가 없기 때문에 비어 있습니다.

링크가 다음과 같다면 https://myshop.com/products?id=1 , 그러면 search는 다음과 같이 표시됩니다.search: "?id=1"

못 박자

검색 매개변수를 얻기 위해 다음과 같이 URLSearchParams와 window.location.search를 결합합니다.

let searchParams = new URLSearchParams(window.location.search);

위 스니펫에서 new URLSearchParams(window.location.search)는 URL 쿼리(id=1)를 키/값 쌍으로 분할합니다.

따라서 변수searchParams는 다음과 같습니다.

{
  id: 1,
};

오 예! 알았지? 여기에서 우리가 해야 할 일은 id에 액세스하는 것뿐이며 이 경우 값1을 제공합니다.

방법은 다음과 같습니다.

let id = searchParams.get("id");
console.log(id);
//=> 1

주요 테이크 아웃

window.location는 현재 문서에 관한 모든 정보를 반환하는 속성입니다.

URLSearchParams API를 사용하면 URL을 조작할 수 있습니다.

window.location.search는 URL 쿼리 목록이 포함된 search 속성을 반환합니다.

URLSearchParams API 및 window.location.search를 함께 사용하면 URL에서 검색 매개변수를 추출할 수 있습니다.

다음과 같이 URL을 URLSearchParams API에 전달하여 쿼리 매개변수의 키/값 쌍을 가져올 수 있습니다.

URL 검색 매개변수를 추출하는 방법은 무엇입니까? 아래 의견에 친절하게 공유하십시오.