JavaScript에서 URLSearchParams 작업하기
이미 알고 있듯이, JavaScript에서 폼 및 GET 요청 작업 시 다음과 같은 형태의 문자열이 발생합니다:
let paramsString = 'a=1&b=2&c=3';
때로는 이 문자열에서 어떤 매개변수의 값을
프로그래밍 방식으로 변경해야 할 때가 있습니다.
이 작업을 수행하는 코드를 작성하는 것은 매우
불편합니다. 따라서 JavaScript에는 이러한 문자열 작업을 위한
특수 클래스 URLSearchParams가 내장되어 있습니다.
매개변수로 매개변수 문자열을 전달하여 이 클래스의 객체를 생성해 봅시다:
let paramsString = 'a=1&b=2&c=3';
let searchParams = new URLSearchParams(paramsString);
생성된 객체에 어떤 메서드가 있는지 살펴봅시다.
매개변수 값 가져오기
get 메서드를 사용하여
매개변수 값을 얻을 수 있습니다:
let res = searchParams.get('a');
console.log(res);
존재하지 않는 매개변수의 값을 얻어보려고 시도해 봅시다:
let res = searchParams.get('x');
console.log(res); // null을 출력합니다
매개변수 존재 여부 확인
has 메서드를 사용하여
매개변수 존재 여부를 확인할 수 있습니다. 존재하는 매개변수를 확인해 봅시다:
let res = searchParams.has('a');
console.log(res); // true를 출력합니다
존재하지 않는 매개변수를 확인해 봅시다:
let res = searchParams.has('x');
console.log(res); // false를 출력합니다
문자열로 변환
toString 메서드를 사용하여
객체를 다시 문자열로 변환할 수 있습니다:
let res = searchParams.toString();
console.log(res); // 'a=1&b=2&c=3'을 출력합니다
매개변수 변경
set 메서드를 사용하여
매개변수 값을 변경할 수 있습니다:
searchParams.set('b', 'x');
변경 사항을 확인해 봅시다:
let res = searchParams.toString();
console.log(res); // 'a=1&b=x&c=3'을 출력합니다
매개변수 추가
set 메서드를 사용하여
새 매개변수를 추가할 수도 있습니다:
searchParams.set('d', '4');
변경 사항을 확인해 봅시다:
let res = searchParams.toString();
console.log(res); // 'a=1&b=2&c=3&d=4'를 출력합니다
매개변수 추가
append 메서드를 사용하여
새 매개변수를 추가할 수도 있습니다:
searchParams.append('d', '4');
변경 사항을 확인해 봅시다:
let res = searchParams.toString();
console.log(res); // 'a=1&b=2&c=3&d=4'를 출력합니다
이미 존재하는 매개변수를 추가해 보려고 시도해 봅시다:
searchParams.append('a', '4');
이 경우 우리의 메서드는 단순히 동일한 이름의 매개변수를 끝에 추가할 것입니다:
let res = searchParams.toString();
console.log(res); // 'a=1&b=2&c=3&a=4'를 출력합니다
여기서 set 메서드와
append 메서드의 차이가 나타납니다. 첫 번째는
기존 매개변수를 변경하고, 두 번째는 단순히
복사본을 끝에 추가합니다.
매개변수 삭제
delete 메서드를 사용하여
매개변수를 삭제할 수 있습니다:
searchParams.delete('b');
변경 사항을 확인해 봅시다:
let res = searchParams.toString();
console.log(res); // 'a=1&c=3'을 출력합니다
루프를 사용한 매개변수 순회
매개변수는 루프를 사용하여 순회할 수 있습니다:
for (let p of searchParams) {
console.log(p);
}
동일한 매개변수가 여러 개인 경우
문자열에 동일한 매개변수가 여러 개 있다고 가정해 봅시다:
let paramsString = 'a=1&a=2b=2&c=3';
getAll 메서드를 사용하여
이 매개변수들의 값 배열을 얻을 수 있습니다:
let res = searchParams.getAll('a');
console.dir(res); // [1, 2]를 출력합니다
실습 과제
다음 매개변수 문자열이 주어졌다고 가정해 봅시다:
let paramsString = 'test1=param1&test2=param2&test3=param3';
이 문자열에 test3 매개변수를 하나 더 추가하세요.
이 문자열에서 test2 매개변수를 삭제하세요.
test1 매개변수를 새 값으로 변경하세요.
