자바스크립트 현재 URL 쿼리스트링(파라미터) 가져오기

올바른 이해와 사용 방법

현재 페이지의 URL 쿼리스트링(파라미터)은 window.location.search 속성으로 가져올 수 있습니다.

window.location.search 속성은 현재 URL의 쿼리스트링(? 포함) 정보를 문자열로 반환합니다. 쿼리가 없으면 빈 문자열("")을 반환합니다.

참고하세요!
window.location.search 속성은 줄여서 location.search라고만 작성하는 경우도 많습니다.
브라우저에서는 window 객체가 전역 객체이므로, window.location는 줄여서 location만으로도 동일하게 사용할 수 있습니다.

문자열로 반환되는 URL의 쿼리스트링 정보

URL에서 쿼리스트링(Query String)은 URL 뒷부분에 물음표(?)로 구분되어 시작하는 주소의 일부로, URL에 추가적인 데이터(정보)를 담을 때 사용됩니다.

주요 특징

시작 기호: 반드시 (?)로 시작합니다.
구조: 데이터는 ? 다음에 name=value(이름=값) 형태의 구조로 구성됩니다.
다중 데이터: 여러 데이터를 담을 때에는 & 기호로 연결합니다. (예: name1=value1&name2=value2)
이 구조에 해시(#)가 포함되어 있으면 이 부분부터는 쿼리스트링에 포함되지 않습니다.

URL에서 쿼리스트링(Query String)은 '쿼리(Query)' 또는 'URL 파라미터(Parameter)'라고도 불립니다.

window.location.search 속성은 현재 URL에서 사용되는 쿼리스트링을 문자열로 반환합니다.

기본 예제

현재 웹 페이지가 어떤 쿼리스트링을 가지고 있는지 콘솔에 출력하는 가장 단순한 코드입니다.

window 객체는 생략할 수 있으며, 보통 location.search를 사용합니다.

JavaScript

/* 전체 URL 예: https://www.example.com/products/list?page=1#review */
console.log(location.search); // console.log(window.location.search)와 동일
// 출력: "?page=1"