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
137
138
139
140
141
142
143
144
145
146
147
148
|
---
title: encodeURIComponent()
slug: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
tags:
- JavaScript
- Reference
- URI
translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
---
<div>{{jsSidebar("Objects")}}</div>
<p><span ><code><strong>encodeURIComponent()</strong></code> 함수는 {{glossary("URI")}}의 특정한 문자를 UTF-8로 인코딩해 하나, 둘, 셋, 혹은 네 개의 연속된 이스케이프 문자로 나타냅니다.</span> (두 개의 대리 문자로 이루어진 문자만 이스케이프 문자 네 개로 변환됩니다.)</p>
<div>{{EmbedInteractiveExample("pages/js/globalprops-encodeuricomponent.html")}}</div>
<h2 id="구문">구문</h2>
<pre class="syntaxbox">encodeURIComponent(<em>str</em>);</pre>
<h3 id="매개변수">매개변수</h3>
<dl>
<dt><code>str</code></dt>
<dd>URI 구성요소.</dd>
</dl>
<h3 id="반환_값">반환 값</h3>
<p>주어진 문자열을 URI 구성요소로서 인코딩한 새로운 문자열.</p>
<h2 id="설명">설명</h2>
<p><code>encodeURIComponent()</code>는 다음 문자를 <strong>제외</strong>한 문자를 이스케이프 합니다.</p>
<pre><strong><code>N</code>ot Escaped</strong>:
A-Z a-z 0-9 <code>-</code> <code>_</code> <code>.</code> <code>!</code> <code>~</code> <code>*</code> <code>'</code> <code>(</code> <code>)
</code>
</pre>
<p><code>encodeURIComponent()</code>와 {{jsxref("encodeURI", "encodeURI()")}}의 차이는 다음과 같습니다.</p>
<pre class="brush: js">var set1 = ";,/?:@&=+$"; // Reserved Characters
var set2 = "-_.!~*'()"; // Unescaped Characters
var set3 = "#"; // Number Sign
var set4 = "ABC abc 123"; // Alphanumeric Characters + Space
console.log(encodeURI(set1)); // ;,/?:@&=+$
console.log(encodeURI(set2)); // -_.!~*'()
console.log(encodeURI(set3)); // #
console.log(encodeURI(set4)); // ABC%20abc%20123 (the space gets encoded as %20)
console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(encodeURIComponent(set2)); // -_.!~*'()
console.log(encodeURIComponent(set3)); // %23
console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (the space gets encoded as %20)
</pre>
<p><span id="result_box" lang="ko"><span>상위-하위 쌍을 이루지 않은 단일 대리 문자를 인코딩 시도하면 {{jsxref("URIError")}}가 발생합니다.</span></span></p>
<pre class="brush: js">// high-low pair ok
console.log(encodeURIComponent('\uD800\uDFFF'));
// lone high surrogate throws "URIError: malformed URI sequence"
console.log(encodeURIComponent('\uD800'));
// lone low surrogate throws "URIError: malformed URI sequence"
console.log(encodeURIComponent('\uDFFF'));
</pre>
<p><code>encodeURIComponent()</code>를 사용해, 서버에 {{HTTPMethod("POST")}}로 요청할 양식 필드를 인코딩 하세요. 입력 중 의도치 않게 생성될 수 있는 HTML 특수 개체 등의 <code>"&"</code> 문자를 처리할 수 있습니다.</p>
<p>예를 들어 사용자가 입력한 <code>"Jack & Jill"</code>은 <code>"Jack &amp; Jill"</code>로 인코딩 됩니다. <code>encodeURIComponent()</code>를 사용하지 않았다면 서버가 앰퍼샌드를 새로운 필드의 시작으로 인식할 수 있으므로 데이터의 무결성을 해칠 수 있습니다.</p>
<p><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#application/x-www-form-urlencoded-encoding-algorithm"><code>application/x-www-form-urlencoded</code></a>의 스페이스는 <code>"+"</code>로 치환되어야 하므로, <code>encodeURIComponent()</code>의 결과에 추가로 <code>"%20"</code>을 <code>"+"</code>로 바꾸세요.</p>
<p>비록 URI의 구분자로서 형식화된 사용처는 없지만, 그럼에도 <code>!</code>, <code>'</code>, <code>(</code>, <code>)</code>, <code>*</code>을 추가로 예약하는 <a class="external" href="http://tools.ietf.org/html/rfc3986">RFC 3986</a>을 엄격하게 따르려면 아래의 코드를 사용해보세요.</p>
<pre class="brush: js">function fixedEncodeURIComponent(str) {
return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
return '%' + c.charCodeAt(0).toString(16);
});
}
</pre>
<h2 id="예제">예제</h2>
<p>다음 예제는 UTF-8 {{HTTPHeader("Content-Disposition")}} 과{{HTTPHeader("Link")}} 서버 응답 헤더에서 (UTF-8 파일 이름 등의 이유로) 필요한 문자 인코딩 방법을 보입니다.</p>
<pre class="brush: js">var fileName = 'my file(2).txt';
var header = "Content-Disposition: attachment; filename*=UTF-8''"
+ encodeRFC5987ValueChars(fileName);
console.log(header);
// logs "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"
function encodeRFC5987ValueChars(str) {
return encodeURIComponent(str).
// Note that although RFC3986 reserves "!", RFC5987 does not,
// so we do not need to escape it
replace(/['()]/g, escape). // i.e., %27 %28 %29
replace(/\*/g, '%2A').
// The following are not required for percent-encoding per RFC5987,
// so we can allow for a little better readability over the wire: |`^
replace(/%(?:7C|60|5E)/g, unescape);
}
// here is an alternative to the above function
function encodeRFC5987ValueChars2(str) {
return encodeURIComponent(str).
// Note that although RFC3986 reserves "!", RFC5987 does not,
// so we do not need to escape it
replace(/['()*]/g, c => "%" + c.charCodeAt(0).toString(16)). // i.e., %27 %28 %29 %2a (Note that valid encoding of "*" is %2A
// which necessitates calling toUpperCase() to properly encode)
// The following are not required for percent-encoding per RFC5987,
// so we can allow for a little better readability over the wire: |`^
replace(/%(7C|60|5E)/g, (str, hex) => String.fromCharCode(parseInt(hex, 16)));
}</pre>
<h2 id="명세">명세</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("javascript.builtins.encodeURIComponent")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{jsxref("decodeURI")}}</li>
<li>{{jsxref("encodeURI")}}</li>
<li>{{jsxref("decodeURIComponent")}}</li>
</ul>
|
