1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
---
title: URLSearchParams
slug: Web/API/URLSearchParams
tags:
- API
- Interface
- Reference
- URL API
- URLSearchParams
translation_of: Web/API/URLSearchParams
---
<div>{{ApiRef("URL API")}}</div>
<p><strong><code>URLSearchParams</code></strong> 인터페이스는 URL의 쿼리 문자열에 대해 작업할 수 있는 유틸리티 메서드를 정의합니다.</p>
<p><code>URLSearchParams</code>를 구현하는 객체는 {{jsxref("Statements/for...of", "for...of")}} 반복문에 바로 사용할 수 있습니다.</p>
<pre class="brush: js">for (const [key, value] of mySearchParams) {}
for (const [key, value] of mySearchParams.entries()) {}
</pre>
<p>{{availableinworkers}}</p>
<h2 id="생성자">생성자</h2>
<dl>
<dt>{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}</dt>
<dd> <code>URLSearchParams</code> 객체 인스턴스를 반환합니다.</dd>
</dl>
<h2 id="메서드">메서드</h2>
<dl>
<dt>{{domxref("URLSearchParams.append()")}}</dt>
<dd>특정 키/값을 새로운 검색 매개변수로 추가합니다.</dd>
<dt>{{domxref("URLSearchParams.delete()")}}</dt>
<dd>특정 매개변수를 찾아 키와 값 모두 지웁니다.</dd>
<dt>{{domxref("URLSearchParams.entries()")}}</dt>
<dd>객체의 모든 키/값 쌍을 순회할 수 있는 {{jsxref("Iteration_protocols","순회기")}}를 반환합니다.</dd>
<dt>{{domxref("URLSearchParams.forEach()")}}</dt>
<dd>객체의 모든 값을 순회하며 지정한 콜백을 호출합니다.</dd>
<dt>{{domxref("URLSearchParams.get()")}}</dt>
<dd>주어진 검색 매개변수에 연결된 첫 번째 값을 반환합니다.</dd>
<dt>{{domxref("URLSearchParams.getAll()")}}</dt>
<dd>주어진 검색 매개변수에 연결된 모든 값을 반환합니다.</dd>
<dt>{{domxref("URLSearchParams.has()")}}</dt>
<dd>주어진 검색 매개변수의 존재 여부를 나타내는 {{jsxref("Boolean")}}을 반환합니다.</dd>
<dt>{{domxref("URLSearchParams.keys()")}}</dt>
<dd>객체의 <strong>모든 키</strong>를 순회할 수 있는 {{jsxref("Iteration_protocols", "순회기")}}를 반환합니다.</dd>
<dt>{{domxref("URLSearchParams.set()")}}</dt>
<dd>주어진 검색 매개변수에 연결된 값을 설정합니다. 연결된 값이 다수라면 나머지는 제거합니다.</dd>
<dt>{{domxref("URLSearchParams.sort()")}}</dt>
<dd>모든 키/값 쌍을 키로 정렬합니다.</dd>
<dt>{{domxref("URLSearchParams.toString()")}}</dt>
<dd>URL에 쓰기 적합한 형태의 쿼리 문자열을 반환합니다.</dd>
<dt>{{domxref("URLSearchParams.values()")}}</dt>
<dd>객체의 <strong>모든 값</strong>을 순회할 수 있는 {{jsxref("Iteration_protocols", "순회기")}}를 반환합니다.</dd>
</dl>
<h2 id="예제">예제</h2>
<pre class="brush: js">var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);
//Iterate the search parameters.
for (let p of searchParams) {
console.log(p);
}
searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"
</pre>
<h3 id="주의점">주의점</h3>
<p><code>URLSearchParams</code> 생성자는 전체 URL을 분석하지 않습니다. 그러나, 맨 앞의 <code>?</code>는 제거합니다.</p>
<pre>var paramsString1 = "http://example.com/search?query=%40";
var searchParams1 = new URLSearchParams(paramsString1);
searchParams1.has("query"); // false
searchParams1.has("http://example.com/search?query"); // true
searchParams1.get("query"); // null
searchParams1.get("http://example.com/search?query"); // "@" (equivalent to decodeURIComponent('%40'))
var paramsString2 = "?query=value";
var searchParams2 = new URLSearchParams(paramsString2);
searchParams2.has("query"); // true
var url = new URL("http://example.com/search?query=%40");
var searchParams3 = new URLSearchParams(url.search);
searchParams3.has("query") // true</pre>
<h2 id="명세">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">명세</th>
<th scope="col">상태</th>
<th scope="col">비고</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('URL', '#urlsearchparams', "URLSearchParams")}}</td>
<td>{{Spec2('URL')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("api.URLSearchParams")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{domxref("URL")}} 인터페이스.</li>
<li><a href="https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en">Google Developers: Easy URL manipulation with URLSearchParams</a></li>
</ul>
<dl>
</dl>
|
