diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
| commit | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (patch) | |
| tree | d4a40e13ceeb9f85479605110a76e7a4d5f3b56b /files/de/web/javascript/reference/global_objects/encodeuricomponent | |
| parent | 33058f2b292b3a581333bdfb21b8f671898c5060 (diff) | |
| download | translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.gz translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.bz2 translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.zip | |
initial commit
Diffstat (limited to 'files/de/web/javascript/reference/global_objects/encodeuricomponent')
| -rw-r--r-- | files/de/web/javascript/reference/global_objects/encodeuricomponent/index.html | 163 |
1 files changed, 163 insertions, 0 deletions
diff --git a/files/de/web/javascript/reference/global_objects/encodeuricomponent/index.html b/files/de/web/javascript/reference/global_objects/encodeuricomponent/index.html new file mode 100644 index 0000000000..a632775085 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/encodeuricomponent/index.html @@ -0,0 +1,163 @@ +--- +title: encodeURIComponent() +slug: Web/JavaScript/Reference/Global_Objects/encodeURIComponent +tags: + - JavaScript + - URI +translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>Die Methode <strong><code>encodeURIComponent()</code></strong> kodiert eine Komponente des Uniform Resource Identifier (URI) indem jedes Vorkommen bestimmter Zeichen durch ein, zwei, drei oder vier Escape-Sequenzen ersetzt werden, die der UTF8-Kodierung des Zeichens entsprechen. Vier Escape-Sequenzen werden nur bei Zeichen bestehend aus zwei "Surrogate"-Zeichen verwendet.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">encodeURIComponent(str);</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>str</code></dt> + <dd>String. Eine URI-Komponente.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p><code>encodeURIComponent</code> kodiert alle Zeichen außer den Folgenden: alphabetische, dezimale Ziffern, <code>- _ . ! ~ * ' ( )</code></p> + +<p>Beachte, dass {{jsxref("URIError")}} beim Versuch geworfen wird, ein Surrogate-Zeichen zu kodieren, das nicht Teil eines High-Low-Paares ist, z.B.:</p> + +<pre class="brush: js">// Zulässiges High-Low-Paar +console.log(encodeURIComponent('\uD800\uDFFF')); + +// alleinstehendes High-Surrogate-Zeichen wirft "URIError: malformed URI sequence" +console.log(encodeURIComponent('\uD800')); + +// alleinstehendes Low-Surrogate-Zeichen wirft "URIError: malformed URI sequence" +console.log(encodeURIComponent('\uDFFF')); +</pre> + +<p>Um unerwartete Anfragen an den Server zu vermeiden, sollte <code>encodeURIComponent</code> für jeden benutzerdefinierten Parameter, der als Teil der URI übergeben wird, verwendet werden. Z.B. könnte ein Benutzer in einem variablen Kommentar "<code>Thyme &time=again</code>" schreiben. Ohne Verwendung von <code>encodeURIComponent</code> erhältst Du <code>comment=Thyme%20&time=again</code>. Beachte, dass das Kaufmännische Und (Ampersand) und das Gleich-Zeichen ein neues Schlüssel-Wert-Paar bedeuten. Das bedeutet, dass statt dem POST-Schlüssel "<code>Thyme &time=again</code>" zwei POST-Schlüssel verwendet werden, der eine mit dem Wert "<code>Thyme </code>", der andere (<code>time</code>) mit <code>again</code>.</p> + +<p>Bei <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> werden Leerzeichen mit '+' ersetzt, so dass es u.U. erwünscht ist, nach der Ersetzung durch <code>encodeURIComponent</code> eine weitere Ersetzung von "%20" mit "+" durchzuführen.</p> + +<p>Um streng konform mit <a href="http://tools.ietf.org/html/rfc3986">RFC 3986</a> zu sein (welches !, ', (, ) und * reserviert), obwohl diese Zeichen keine formalisierten Trennzeichen sind, kann das Folgende sicher verwendet werden:</p> + +<pre class="brush: js">function fixedEncodeURIComponent (str) { + return encodeURIComponent(str).replace(/[!'()*]/g, function(c) { + return '%' + c.charCodeAt(0).toString(16); + }); +} +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Das folgende Beispiel stellt die spezielle Kodierung sicher, die in UTF-8-kodierten Parameterwerten der Server-Antwort-Headern <code>Content-Disposition</code> und <code>Link</code> benötigt wird (z.B. UTF-8-kodierte Dateinamen):</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). + // Beachte, dass obwohl RFC3986 "!" reserviert, es nicht kodiert + // werden muss, weil RFC5987 es nicht reserviert. + replace(/['()]/g, escape). // i.e., %27 %28 %29 + replace(/\*/g, '%2A'). + // Die folgenden Zeichen müssen nicht nach RFC5987 kodiert werden, + // daher können wir bessere Lesbarkeit übers Netzwerk sicherstellen: + // |`^ + replace(/%(?:7C|60|5E)/g, unescape); +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome für Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Weitere_Infos">Weitere Infos</h2> + +<ul> + <li>{{jsxref("decodeURI")}}</li> + <li>{{jsxref("encodeURI")}}</li> + <li>{{jsxref("decodeURIComponent")}}</li> +</ul> |
