[JavaScript]URLSearchParams 객체 사용 방법

URLSearchParams 객체 사용 방법

Query String이란 URL에서 물음표(?)부터 시작하는 문자열입니다. 주로 검색 기능이 있는 웹 사이트에서 검색 키워드를 Query String으로 설정합니다.

 

제가 개발 자료를 참고하는 stackabuse 사이트에서 url이란 키워드를 검색하면, URL은 다음과 같습니다.

https://stackabuse.com/search/?q=url

 위에서 언급했듯이 Query String은 물음표(?)부터 시작하므로 해당 URL의 Query String은 q=url입니다.

JavaScript 개발자는 위 예시와 같은 URL에서 Query String 추출 후 원하는 정보를 가져와야 하는 상황이 발생할 수 있는데, JavaScript는 친절하게도 복잡한 Query String을 파싱할 수 있도록 URLSearchParams 객체를 제공합니다.

 

이번 포스팅은 URL의 Query String을 다루는 URLSearchParams 객체 사용 방법을 소개합니다.

---

URLSearchParams 객체 생성 방법

다음 세 가지 방법으로 URLSearchParams 객체를 생성할 수 있습니다.

 

첫 번째 방법으로 URL 객체를 생성하고 search 프로퍼티를 URLSearchParams 생성자 함수에 전달합니다.

var urlObj = new URL('https://stackabuse.com/search/?q=url&type=article');
var urlSearchObj = new URLSearchParams(urlObj.search);

 

두 번째 방법으로 URLSearchParams 생성자 함수에 Query String을 전달합니다. 물음표를 포함하거나 생략할 수 있습니다.

var urlSearchObj1 = new URLSearchParams('?q=url&type=article');
var urlSearchObj2 = new URLSearchParams('q=url&type=article');

 

세 번째 방법으로 Key-Value 쌍을 배열 또는 객체 형태로 전달합니다.

// entry를 배열 형태로 전달
var urlSearchObj1 = new URLSearchParams([['q', 'url'], ['type', 'article']]);

// entry를 객체 형태로 전달
var urlSearchObj2 = new URLSearchParams({q:'url', type: 'article'});

---

URLSearchParams 객체의 메서드

URLSearchParams 객체의 프로퍼티 및 메서드 사용 방법을 소개합니다.

---

get

get() 메서드는 Query String의 특정 키(Key)에 대한 값(Value)을 가져옵니다.

 

특정 키가 존재하지 않으면, null을 반환합니다.

var urlSearchObj = new URLSearchParams('?q=url&type=article');

console.log(urlSearchObj.get('q'));    // url
console.log(urlSearchObj.get('type')); // article
console.log(urlSearchObj.get('page')); // null

---

getAll

Query String의 특정 키(Key)는 여러 값을 가질 수 있습니다.

 

특정 키에 대해 값이 여러개인 경우 get() 메서드는 맨 앞에 위치하는 값을 가져오지만, getAll() 메서드는 모든 값을 배열로 가져옵니다.

var urlSearchObj = new URLSearchParams('?q=1&q=2&q=3');

console.log(urlSearchObj.get('q'));    // 1
console.log(urlSearchObj.getAll('q')); // ['1', '2', '3']

---

has

has() 메서드는 Query String의 특정 키가 존재하면 true, 그렇지 않으면 false를 반환합니다.

var urlSearchObj = new URLSearchParams('?q=url&type=article');

console.log(urlSearchObj.has('q')); // true
console.log(urlSearchObj.has('p')); // false

---

toString

toString() 메서드는 Query String을 문자열로 반환합니다.

var urlSearchObj = new URLSearchParams('?q=url&type=article');

console.log(urlSearchObj.toString()); // q=url&type=article

---

append

append() 메서드는 Query String에 Key-Value 쌍을 맨 뒤에 추가합니다.

var urlSearchObj = new URLSearchParams('?q=url&type=article');

urlSearchObj.append('page', '2');

console.log(urlSearchObj.toString()); // q=url&type=article&page=2

---

delete

delete() 메서드는 매개변수로 전달된 Key를 Query String에서 제거합니다.

var urlSearchObj = new URLSearchParams('?q=url&type=article');

urlSearchObj.delete('type');

console.log(urlSearchObj.toString()); // q=url

---

set

set() 메서드는 Key의 Value를 변경합니다.

var urlSearchObj = new URLSearchParams('?q=url&type=article');

urlSearchObj.set('type', 'sports');

console.log(urlSearchObj.toString()); // q=url&type=sports

---

entries

entries() 메서드는 Key-Value 쌍을 순회할 수 있는 Iterator 객체를 반환합니다.

 

Iterator 객체는 for...of문을 사용하여 순회할 수 있습니다.

var urlSearchObj = new URLSearchParams('?q=url&type=article&page=2');

for(var [key, value] of urlSearchObj.entries()) {
  console.log(key + ' = ' + value);
}

[실행 결과]

---

keys

keys() 메서드는 Key 집합을 순회할 수 있는 Iterator 객체를 반환합니다.

 

마찬가지로 for...of문을 사용하여 순회할 수 있습니다.

var urlSearchObj = new URLSearchParams('?q=url&type=article&page=2');

for(var key of urlSearchObj.keys()) {
  console.log(key + ' = ' + urlSearchObj.get(key));
}

[실행 결과]

---

values

values() 메서드는 Value 집합을 순회할 수 있는 Iterator 객체를 반환합니다.

 

마찬가지로 for...of문을 사용하여 순회할 수 있습니다.

var urlSearchObj = new URLSearchParams('?q=url&type=article&page=2');

for(var value of urlSearchObj.values()) {
  console.log(value);
}

[실행 결과]

---

forEach

forEach() 메서드를 사용하면, entries() 메서드와 for...of문을 사용하지 않고 URLSearchParams 객체를 순회할 수 있습니다.

 

forEach() 메서드의 첫 번째 매개변수는 Value이며, 두 번째 매개변수는 Key입니다.

var urlSearchObj = new URLSearchParams('?q=url&type=article&page=2');

urlSearchObj.forEach((value, key) => {
  console.log(key + ' = ' + value);
});

[실행 결과]