[JS] URLSearchParams

---

알고있으면 좋은 Javascript Tip✨

---

URLSearchParams()

• URLSearchParams API는 URL 쿼리 파라미터에서 자료를 가져오는 방법을 제공한다.

URL 객체 사용

let url= new URL('https://sisiblog.tistory.com?mode=night&page=2');
let params = new URLSearchParams(url.search);
const $queryStr = new URLSearchParams(window.location.search);

• 직접 URL 객체를 만들어서 URLSearchParams 객체를 생성할 수도 있다.
• url.search 대신 window.location.search를 사용할 수 있다.
• window.location.search는 브라우저에서 입력받은 값을 사용해 URLSearchParams 객체를 생성할 수 있다.

쿼리 문자열 사용

let params1 = new URLSearchParams("mode=night&page=2");
let params2 = new URLSearchParams("?mode=night&page=2");

• &로 구분하는 URI 리소스 값을 문자열 그대로 입력할 수도 있다.
• '?'까지 포함해서 URLSearchParams 객체를 만들 수 있다.

 

유틸리티 메드

let url= new URL('https://sisiblog.tistory.com?mode=night&page=2&mode=day');
let params = new URLSearchParams(url.search);

• 모든 예제는 위 코드의 params를 사용했다.

1.get

let mode = params.get('mode'); // night
let time = params.get('time'); // null

• 매개변수로 전달 받은 값으로 첫 번째로 검색되는 값을 가져온다.
• 만일 찾지 못한 경우 null을 반환한다.

2.getAll

let modes = params.getAll('mode'); // ["night", "day"]

• get() 메드와는 다르게 전달 받은 매개변수 값으로 모든 항목을 검색한다.

3.has

let hasMode = params.has('mode'); // true
let hasTime = params.has('time'); // false

• query parameter에 특정한 이름이 존재하는지 확인한다.
• 쿼리 스트링의 특정 키가 존재하면 true, 그렇지 않다면 false 반환

4.toString

params.toString(); // mode=night&page=2&mode=day

• 쿼리 문자열 자체를 출력한다.

5.append

params.append('tag', "js"); 
params.toString(); // mode=night&page=2&mode=day&tag=js

• search params에 key-value 쌍으로 항목을 추가한다.
• 쿼리에 tag=js 라는 항목이 추가된 것을 확인할 수 있다.
• 만일 같은 key가 여러번 추가되면 append() 메드는 쿼리에 항목을 여러번 추가한다.

6.set

params.set('page', 3);
params.toString(); // mode=night&page=3&mode=day&tag=js&tag=tricks

• set() 메서드는 매개변수로 전달된 값으로 쿼리 내용을 수정한다.
• 만일 key가 여려개 존재할 경우 set() 메서드는 다른 항목은 지워버리고 하나로 세팅한다.
• 만일 같은 key가 여러번 추가되면 append() 메드는 쿼리에 항목을 여러번 추가한다.

params.set('tag', "javascript")
params.toString(); // mode=night&page=3&mode=day&tag=javascript

• 여기서 입력받은 매개변수 key가 쿼리에 존재하지 않는다면 새 항목을 추가한다.

params.set('n',"J") // mode=night&page=3&mode=day&tag=javascript&n=J

7.entries

console.log(...params.entries()); 

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

// mode => night
// page => 3
// mode => day
// tag => javascript
// n => j

• 쿼리 항목의 key-value 쌍을 루프돌 수 있도록 iterator를 반환한다.

8.keys

console.log(...params.keys()); // mode page mode tag n

• search params의 key 목록을 루프할 수 있는 iterator를 반환한다.

9.values

console.log(...params.values()); // night 3 day javascript j

• search params의 value 목록을 루프할 수 있도록 iterator를 반환한다.

10.forEach

params.forEach(function(value, key) {
  console.log(key,  value);
});

• params를 루프할 수 있다.

11.sort

params.sort();
params.toString(); // mode=night&mode=day&n=j&page=3&tag=javascript

• key-value 쌍을 정렬한다.

12.delete

params.delete('mode');
params.toString(); // name=Jeep&page=3&tag=javascript

• 전달받은 매개변수에 해당하는 모든 항목을 삭제한다.