[JS] URL parameter 가져오기

 

기초

URL 중 파라미터 값만 JavaScript로 추출해야 할 경우가 생깁니다.

• location.href를 이용하여 현재 페이지 전체 URL을 가져올 수 있습니다.
• location.search를 이용하여 현재 페이지 URL의 Parameter를 얻을 수 있습니다.

 

모든 값 가져오기

javascript
const searchParams = new URLSearchParams(location.search);

for (const param of searchParams) {
  console.log(param);
}

new URLSearchParams 함수를 사용하면 location.search 안에 존재하는 [key, value] 형식으로 묶여있는 파라미터를 얻을 수 있게됩니다.

 

예시

특정 값만 가져오기

javascript
const urlParams = new URL(location.href).searchParams;

const name = urlParams.get('name');

console.log(name)

해당 방법은 location.search 부분만을 가져오지 않고 전체 URL을 필요로 합니다. 전체 URL을 구하는 방법은 location.href으로 구할 수 있습니다.

 

현재의 주소를 URL 형식으로 바꿔주고 get 메서드를 통해 특정 파라미터를 가져올 수 있습니다.

 

예시