<div id="readability-page-1" class="page"><div aria-label="post body section"><div><a rel="noopener  ugc nofollow" href="/?source=post_page-----28b44c2036fa-----------------------------------"><div><p><img alt="Jeong Woo Ahn" src="https://miro.medium.com/fit/c/56/56/2*5-DkBQYvxo0TLldXjX88Og.png" width="28" height="28"></p></div></a></div><section><p id="9876" aria-label="post body paragraph"><a href="https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams" rel="noopener ugc nofollow" target="_blank">URLSearchParams</a> 를 써보자</p><p id="4505" aria-label="post body paragraph"><strong>전제조건</strong>: IE를 고려하지 않아도 되는 브라우저 환경, Deno, Nodejs 에서 사용가능하다.</p><p id="9e45" aria-label="post body paragraph">서비스 환경이 전제조건에 부합하다면 적극적으로 사용하자. 너무 편하다.</p></section><pre><span id="7ec2">const params = new URLSearchParams('?a=aaa&amp;b=bbb');</span><span id="fb88">// 가져오고 <br>console.log(params.get('a')); // aaa </span><span id="77e1">// 추가하고 <br>params.append('c', 'ccc'); <br>console.log(params.get('c')); // ccc</span><span id="8601">// 제거하고 params.delete('c'); <br>console.log(params.get('c')); // null</span><span id="89ae">// 확인할 수 있다. <br>console.log(params.has('a')); // true</span><span id="9d15">// 쿼리 문자열로 변환도 가능하다<br>console.log(params.toString()); // ?a=aaa&amp;b=bbb</span></pre><h2 id="a6b9">순회가능</h2><section><p id="9ba0" aria-label="post body paragraph">기본적으로 <a href="https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams" rel="noopener ugc nofollow" target="_blank">URLSearchParams</a>의 인스턴스는 순회가능하도록 되어있다.</p></section><h2 id="758e">for ..of를 써보자</h2><pre><span id="50ea">for(const [key, value] of params){   <br>  console.log(key, value); <br>}</span></pre><section><p id="0e7f" aria-label="post body paragraph">결과는</p></section><pre><span id="858c">a, aaa <br>b, bbb</span></pre><h2 id="f5d5">forEach를 써보자</h2><pre><span id="d0ec">params.forEach((param) =&gt; {<br>   console.log(param) <br>})</span></pre><section><p id="afac" aria-label="post body paragraph">결과는</p></section><pre><span id="0655">aaa <br>bbb</span></pre><h2 id="56e0">키를 순회하고 싶을때는</h2><pre><span id="2bb5">for(const key of params.keys()) {<br>   console.log(key); <br>}</span></pre><section><p id="3aaa" aria-label="post body paragraph">이렇게 할 수 있다.</p></section><h2 id="61c4">객체로 만들고 싶다면</h2><section><p id="e40d" aria-label="post body paragraph">쿼리 파라미터들의 키/값으로 객체로 만들고 싶다면 <code>Object.fromEntries</code> 를 통해 가능하다.</p></section><pre><span id="6da6">const urlSearchParams = new URLSearchParams('?a=aaa&amp;b=bbb');<br>const params = Object.fromEntries(urlSearchParams.entries());<br>console.log(params.a) // aaa</span></pre><section><p id="9c43" aria-label="post body paragraph"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy" rel="noopener ugc nofollow" target="_blank">Proxy</a>를 사용하면 더 <a href="https://jsben.ch/MeP5G" rel="noopener ugc nofollow" target="_blank">성능이 좋다</a>고 한다.</p></section><pre><span id="0baa">const params = new Proxy(new URLSearchParams('?a=aaa&amp;b=bbb'), {<br>  get: (searchParams, prop) =&gt; searchParams.get(prop),<br>});<br>console.log(params.a) // aaa</span></pre><h2 id="2dbd">기타</h2><section><p id="cf19" aria-label="post body paragraph"><a href="https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams" rel="noopener ugc nofollow" target="_blank">URLSearchParams</a> 인터페이스는 <a href="https://developer.mozilla.org/ko/docs/Web/API/URL" rel="noopener ugc nofollow" target="_blank">URL</a> 과 a 태그에도 기능이 통합되어 있다. <code>searchParams</code> 이라는 메소드를 통해 읽기 전용 기능만 제공한다. 그래서 아래와 같이 사용할 수 있다.</p></section><pre><span id="cf15">const url = new URL(location);<br>const foo = url.searchParams.get('foo') || 'somedefault';</span><span id="e79b">const a = document.createElement('a');<br>a.href = 'https://example.com?filter=api';<br>// a.searchParams.get('filter') === 'api';</span></pre><h2 id="f0ed">참고자료</h2><ul><li id="b7f8"><a href="https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams" rel="noopener ugc nofollow" target="_blank">URLSearchParams</a></li><li id="4883"><a href="https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en" rel="noopener ugc nofollow" target="_blank">Easy URL Manipulation with URLSearchParams</a></li><li id="5ea5"><a href="https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript" rel="noopener ugc nofollow" target="_blank">How can I get query string values in JavaScript?</a></li></ul></div></div>

Stories by Jeong Woo Ahn on Medium

Jeongwoo Ahn

[JavaScript] URL의 파라미터 값을 확인하고 싶을때 — URLSearchParams
URLSearchParams 를 써보자
전제조건: IE를 고려하지 않아도 되는 브라우저 환경, Deno, Nodejs 에서 사용가능하다.
서비스 환경이 전제조건에 부합하다면 적극적으로 사용하자. 너무 편하다.
const params = new URLSearchParams('?a=aaa&b=bbb');
// 가져오고 
console.log(params.get('a')); // aaa 
// 추가하고 
params.append('c', 'ccc'); 
console.log(params.get('c')); // ccc
// 제거하고 params.delete('c'); 
console.log(params.get('c')); // null
// 확인할 수 있다. 
console.log(params.has('a')); // true
// 쿼리 문자열로 변환도 가능하다
console.log(params.toString()); // ?a=aaa&b=bbb
순회가능
기본적으로 URLSearchParams의 인스턴스는 순회가능하도록 되어있다.
for ..of를 써보자
for(const [key, value] of params){   
  console.log(key, value); 
}
결과는
a, aaa 
b, bbb
forEach를 써보자
params.forEach((param) => {
   console.log(param) 
})
결과는
aaa 
bbb
키를 순회하고 싶을때는
for(const key of params.keys()) {
   console.log(key); 
}
이렇게 할 수 있다.
객체로 만들고 싶다면
쿼리 파라미터들의 키/값으로 객체로 만들고 싶다면 Object.fromEntries 를 통해 가능하다.
const urlSearchParams = new URLSearchParams('?a=aaa&b=bbb');
const params = Object.fromEntries(urlSearchParams.entries());
console.log(params.a) // aaa
Proxy를 사용하면 더 성능이 좋다고 한다.
const params = new Proxy(new URLSearchParams('?a=aaa&b=bbb'), {
  get: (searchParams, prop) => searchParams.get(prop),
});
console.log(params.a) // aaa
기타
URLSearchParams 인터페이스는 URL 과 a 태그에도 기능이 통합되어 있다. searchParams 이라는 메소드를 통해 읽기 전용 기능만 제공한다. 그래서 아래와 같이 사용할 수 있다.
const url = new URL(location);
const foo = url.searchParams.get('foo') || 'somedefault';
const a = document.createElement('a');
a.href = 'https://example.com?filter=api';
// a.searchParams.get('filter') === 'api';
참고자료
URLSearchParams
Easy URL Manipulation with URLSearchParams
How can I get query string values in JavaScript?
이 글이 마음에 드셨다면 👏🏽👏🏽와 커피한잔 후원하기 (카카오페이), 이메일로 소식을 받아보고 싶으시다면 ✉️ 이메일 구독하기 해주세요.

[JavaScript] URL의 파라미터 값을 확인하고 싶을때 — URLSearchParams

댓글