[JavaScript] URL 파라미터 값 가져오기

URL에 태운 파라미터 값을 가져와서 자바스크립트 단에서 처리해야 할 일이 있었다. 

로컬 환경에서 예시를 들자면, http://localhost:8080?userid=user001&name=kim 와 같이 userid와 name 2개의 파라미터를 넘겼을 때 각 파라미터의 값을 가져오는 방법에 대해 알아보자.

 

1. URL 

const urlParams = new URL(window.location.href).searchParams;
console.log(urlParams.get('userid')); // user001
console.log(urlParams.get('name')); // kim

- window.location.href : 파라미터를 포함한 전체 URL 문자열을 반환한다.

ex) http://localhost:8080?userid=user001&name=kim

 

2. URLSearchParams

const searchParams = new URLSearchParams(window.location.search);
console.log(searchParams.get('userid')); // user001
console.log(searchParams.get('name')); // kim

-  window.location.search : URL에 쿼리스트링 즉, ?를 기준으로 뒤에 부분만 문자열로 반환한다.

ex) userid=user001&name=kim

 

 

* URL 객체를 사용하는 방식은 브라우저 호환성 문제로 특정 브라우저 환경에서 문제가 발생할 수도 있다고 한다. 외부 라이브러리와 함께 사용하는 경우, URL 파라미터에 접근할 때 URLSearchParams 객체를 직접 사용하는 것이 브라우저 호환성 문제없이 안전하게 사용 가능하다.

 

 

자바 스크립트 아이콘 제작자: Freepik - Flaticon

---

출처 : OpenAI ChatGPT (https://openai.com)