diff options
Diffstat (limited to 'files/de/web/javascript/guide/textformatierung/index.html')
| -rw-r--r-- | files/de/web/javascript/guide/textformatierung/index.html | 257 |
1 files changed, 257 insertions, 0 deletions
diff --git a/files/de/web/javascript/guide/textformatierung/index.html b/files/de/web/javascript/guide/textformatierung/index.html new file mode 100644 index 0000000000..48c45c9871 --- /dev/null +++ b/files/de/web/javascript/guide/textformatierung/index.html @@ -0,0 +1,257 @@ +--- +title: Textformatierung +slug: Web/JavaScript/Guide/Textformatierung +tags: + - Guide + - JavaScript + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Text_formatting +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div> + +<p class="summary">Dieses Kapitel gibt eine Einführung darüber, wie in JavaScript mit Strings (Zeichenfolgen) und Texten gearbeitet wird.</p> + +<h2 id="Strings">Strings</h2> + +<p>JavaScript's Datentyp {{Glossary("String")}} wird verwendet, um textuelle Daten zu repräsentieren. Es handelt sich um eine Reihe von Elementen, die ganzzahlige 16-Bit-Werte ohne Vorzeichen (UTF-16 Code Units) sind. Jedes Element belegt eine Position im String. Das erste Element befindet hat den Index 0, das nächste den Index 1 usw. Die Länge des Strings ist die Anzahl der Elemente, die darin enthalten sind. Strings können über String-Literale oder String-Objekte erzeugt werden.</p> + +<p>ACHTUNG: Beim Bearbeiten dieser Seite keine Zeichen mit Zeichencode größer als U+FFFF einfügen, bis MDN bug 857438 behoben wurde ( <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=857438">https://bugzilla.mozilla.org/show_bug.cgi?id=857438</a> ).</p> + +<h3 id="String_Literale">String Literale</h3> + +<p>Einfache Strings können mittels einfacher oder doppelter Anführungszeichen erzeugt werden:</p> + +<pre class="brush: js">'foo' +"bar"</pre> + +<p>Anspruchsvollere Strings können mit Escape-Sequenzen erstellt werden:</p> + +<h4 id="Hexadezimale_Escape-Sequenzen">Hexadezimale Escape-Sequenzen</h4> + +<p>Die Zahl nach <code>\x</code> wird als hexadecimale Zahl interpretiert.</p> + +<pre class="brush: js">'\xA9' // "©" +</pre> + +<h4 id="Unicode_Escape-Sequenzen">Unicode Escape-Sequenzen</h4> + +<p>Unicode Escape-Sequenzen erfordern mindestens vier hexadezimale Ziffern nach <code>\u</code>.</p> + +<pre class="brush: js">'\u00A9' // "©"</pre> + +<h4 id="Unicode_Code_Point_Escapes">Unicode Code Point Escapes</h4> + +<p>Diese sind neu in ECMAScript 2015. Mit Unicode Code Point Maskierung können beliebige Zeichen durch Maskierungssequenzen mit hexadezimalen Zahlen erzeugt werden, sodass die Verwendung von Unicode Code Points bis zu <code>0x10FFFF</code> möglich ist. Mit einfachen Unicode Maskierungssequenz ist es oft notwendig, Surrogate-Hälften als zwei getrennte Maskierungssequenzen zu schreiben, um dasselbe Ergebnis zu erhalten.</p> + +<p>Siehe auch {{jsxref("String.fromCodePoint()")}} oder {{jsxref("String.prototype.codePointAt()")}}.</p> + +<pre class="brush: js">'\u{2F804}' + +// das gleiche mit einfachen Unicode Escape-Sequenzen +'\uD87E\uDC04'</pre> + +<h3 id="String_Objekte">String Objekte</h3> + +<p>Das {{jsxref("String")}} Objekt ist ein Wrapper für den primitiven Datentyp String.</p> + +<pre class="brush: js">var s = new String('foo'); // Erstellt ein String object +console.log(s); // Ausgabe: {'0': 'f', '1': 'o', '2': 'o'} +typeof s; // Gibt 'object' zurück +</pre> + +<p>Beliebige Methoden des <code>String</code> Objekts können als Methoden eines String-Literals aufgerufen werden – JavaScript wandelt das String-Literal automatisch in ein temporäres <code>String</code> Objekt um, ruft die Methode auf und verwirft das temporäre <code>String</code> Objekt anschließend. Außerdem kann die <code>String.length</code> Eigenschaft mit einem String-Literal verwendet werden.</p> + +<p>String-Literale sollten verwendet werden, außer es wird tatsächlich ein <code>String</code> Objekt benötigt, da <code>String</code> Objekte unerwartetes Verhalten aufweisen können. Beispielsweise:</p> + +<pre class="brush: js">var s1 = '2 + 2'; // Erzeugt ein String-Literal +var s2 = new String('2 + 2'); // Erzeugt ein String Objekt +eval(s1); // Gibt die Zahl 4 zurück +eval(s2); // Gibt den String "2 + 2" zurück</pre> + +<p>Ein <code>String</code> Objekt hat eine Eigenschaft <code>length</code>, die die Anzahl von der UTF-16 Code Units im String angibt. Der folgende Code beispielsweise weist der Variable <code>x</code> den Wert 13 zu, da "Hello, World!" aus 13 Zeichen besteht. Jedes dieser Zeichen wird durch eine UTF-16 Code Unit dargestellt. Auf jede dieser Code Units kann durch eckige Klammern zugegriffen werden. Es können jedoch keine Zeichen geändert werden, da Strings unveränderbare Array-ähnliche Objekte sind:</p> + +<pre class="brush: js">var mystring = 'Hello, World!'; +var x = mystring.length; +mystring[0] = 'L'; // hat keinen Effekt +mystring[0]; // gibt "H" zurück +</pre> + +<p>Zeichen mit einem Unicode-Wert größer als U+FFFF (wie z.B. manche seltene chinesiche/japanische/koreanische/vietnamesische Zeichen und einige Emoji) werden in UTF-16 als zwei Surrogate Code Units gespeichert. Ein String, der nur aus einem Zeichen, U+1F600 ("Emoji grinning face"), besteht, hätte die Länge 2. Der Zugriff auf einzelne Code Units in einem solchen String kann zu unerwünschten Effekten führen, wie z.B. die Entstehung von String mit unvollständigen Surrogate Code Units, was gegen den Unicode Standard verstößt. (Beispiele dafür sollten zu dieser Seite hinzugefügt werden, sobald MDN bug 857438 behoben wurde.) Siehe auch {{jsxref("String.fromCodePoint()")}} oder {{jsxref("String.prototype.codePointAt()")}}.</p> + +<p>Ein <code>String</code> Objekt verschiedenste Methoden, unter anderem auch welche, die den String in abgewandelter Form zurückgeben, wie z.B. <code>substring</code> und <code>toUpperCase</code>.</p> + +<p>Die folgende Tabelle gibt eine Zusammenfassung der Methoden von {{jsxref("String")}} Objekten.</p> + +<table class="standard-table"> + <caption> + <h4 id="Methoden_von_String">Methoden von <code>String</code></h4> + </caption> + <thead> + <tr> + <th scope="col">Methode</th> + <th scope="col">Beschreibung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}</td> + <td>Gibt das Zeichen oder den Zeichencode an der angegebenen Stelle im String zurück.</td> + </tr> + <tr> + <td>{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}</td> + <td>Gibt die erste bzw. letzte Position des angegebenen Teilstrings im String zurück.</td> + </tr> + <tr> + <td>{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}</td> + <td>Gibt zurück, ob ein String mit dem angegebenen Teilstring beginnt, endet oder den Teilstring enthält.</td> + </tr> + <tr> + <td>{{jsxref("String.concat", "concat")}}</td> + <td>Fügt die beiden Strings zusammen und gibt diesen neuen String zurück.</td> + </tr> + <tr> + <td>{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}</td> + <td>Erstellt einen String aus den angegebenen Unicode Codes. Es handelt sich um eine Methode der Klasse String, nicht die einer String Instanz.</td> + </tr> + <tr> + <td>{{jsxref("String.split", "split")}}</td> + <td>Teilt ein <code>String</code> Objekt in ein Array von Teilstrings.</td> + </tr> + <tr> + <td>{{jsxref("String.slice", "slice")}}</td> + <td>Gibt einen Ausschnitt des Strings als neuen String zurück.</td> + </tr> + <tr> + <td>{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}</td> + <td>Gibt einen Ausschnitt des Strings zurück, der entweder durch Angabe der Start- und Endindizes oder durch Angabe des Startindex und einer Länge gebildet wird.</td> + </tr> + <tr> + <td>{{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}</td> + <td>Verwendet Regular Expressions um Übereinstimmungen mit einem Suchmuster zu finden oder Teile des Strings zu ersetzen.</td> + </tr> + <tr> + <td>{{jsxref("String.toUpperCase", "toUpperCase")}}, {{jsxref("String.toLowerCase", "toLowerCase")}}</td> + <td> + <p>Wandelt einen String in Groß- bzw Kleinschreibung um und gibt das Ergebnis als neuen String zurück.</p> + </td> + </tr> + <tr> + <td>{{jsxref("String.normalize", "normalize")}}</td> + <td>Gibt die Unicode Normalization Form des Strings zurück.</td> + </tr> + <tr> + <td>{{jsxref("String.repeat", "repeat")}}</td> + <td>Gibt einen String zurück, in dem der ursprüngliche String mehrfach aneinandergereiht wurde.</td> + </tr> + <tr> + <td>{{jsxref("String.trim", "trim")}}</td> + <td>Entfernt Leerzeichen vom Anfang und vom Ende des Strings.</td> + </tr> + </tbody> +</table> + +<h3 id="Mehrzeilige_Template-Strings">Mehrzeilige Template-Strings</h3> + +<p><a href="/de/docs/Web/JavaScript/Reference/template_strings">Template-Strings</a> sind String-Symbole, die eingebettete Ausdrücke erlauben. Mit diesen Ausdrücken können mehrzeilige Strings und String-Interpolation genutzt werden.</p> + +<p>Template-Strings sind anstelle von doppelten bzw. einfachen Anführungszeichen in <em>Back-Ticks</em> (` `) (<a href="http://en.wikipedia.org/wiki/Grave_accent">grave accent</a>) eingeschlossen. Template-Strings können Platzhalter beinhalten, die durch das Dollarsymbol gefolgt von geschweiften Klammern gekennzeichnet sind (<code>${expression}</code>).</p> + +<h4 id="Mehrzeilige_Strings">Mehrzeilige Strings</h4> + +<p>Alle Zeichen, die einen Zeilenumbruch einleiten und sich zwischen Back-Ticks befinden, werden als Teil des Template Strings verwendet. Bei normalen Strings muss die folgende Syntax genutzt werden, um Strings mit Zeilenumbrücken über mehrere Codezeilen zu definieren:</p> + +<pre class="brush: js">console.log('string text line 1\n\ +string text line 2'); +// "string text line 1 +// string text line 2"</pre> + +<p>Um dasselbe Ergebnis mit Template-Strings zu erreichen, kann die folgende Schreibweise genutzt werden:</p> + +<pre class="brush: js">console.log(`string text line 1 +string text line 2`); +// "string text line 1 +// string text line 2"</pre> + +<h4 id="Erweiterung_von_Ausdrücken">Erweiterung von Ausdrücken</h4> + +<p>Um Ausdrücke in normale Strings einzufügen, müsste die folgende Syntax genutzt werden:</p> + +<pre class="brush: js">var a = 5; +var b = 10; +console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.'); +// "Fifteen is 15 and +// not 20."</pre> + +<p>Mit Template-Strings können nun die syntaktischen Vorteile genutzt werden um solche Ersetzungen leserlicher zu machen:</p> + +<pre class="brush: js">var a = 5; +var b = 10; +console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`); +// "Fifteen is 15 and +// not 20."</pre> + +<p>Mehr Informationen sind unter <a href="/en-US/docs/Web/JavaScript/Reference/template_strings">Template-Strings</a> in der <a href="/de/docs/Web/JavaScript/Reference">JavaScript-Referenz</a> nachzulesen. </p> + +<h2 id="Internationalization">Internationalization</h2> + +<p>Das {{jsxref("Intl")}} Objekt ist der Namespace für das ECMAScript Internationalization API, welches sprachabhängige String-Vergleiche, Zahlen-, Datums- und Uhrzeitformate bereitstellt. Die Konstruktoren für {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} und {{jsxref("DateTimeFormat")}} Objekte sind Eigenschaften des <code>Intl</code> Objekts.</p> + +<h3 id="Datums-_und_Uhrzeitformatierung">Datums- und Uhrzeitformatierung</h3> + +<p>Das {{jsxref("DateTimeFormat")}} Objekt hilft bei der Datums- oder Uhrzeitformatierung. Im folgenden Beispiel wird ein Datum für amerikanisches Englisch formatiert. (Das Ergebnis variiert je nach eingestellter Zeitzone.)</p> + +<pre class="brush: js">var msPerDay = 24 * 60 * 60 * 1000; + +// July 17, 2014 00:00:00 UTC. +var july172014 = new Date(msPerDay * (44 * 365 + 11 + 197)); + +var options = { year: '2-digit', month: '2-digit', day: '2-digit', + hour: '2-digit', minute: '2-digit', timeZoneName: 'short' }; +var americanDateTime = new Intl.DateTimeFormat('en-US', options).format; + +console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT +</pre> + +<h3 id="Zahlenformatierung">Zahlenformatierung</h3> + +<p>Das {{jsxref("NumberFormat")}} Objekt hilft bei der Formatierung von Zahlen, wie z.B. Währungen.</p> + +<pre class="brush: js">var gasPrice = new Intl.NumberFormat('en-US', + { style: 'currency', currency: 'USD', + minimumFractionDigits: 3 }); + +console.log(gasPrice.format(5.259)); // $5.259 + +var hanDecimalRMBInChina = new Intl.NumberFormat('zh-CN-u-nu-hanidec', + { style: 'currency', currency: 'CNY' }); + +console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五 +</pre> + +<h3 id="Sortierung">Sortierung</h3> + +<p>Das {{jsxref("Collator")}} Objekt hilft beim Vergleichen und Sortieren von Strings.</p> + +<p>Zum Beispiel gibt es im Deutschen zwei unterschiedliche Sortierreihenfolgen: Telefonbuchsortierung und Wörterbuchsortierung. Bei der Telefonbuchsortierung werden "ä", "ö" etc. so sortiert, als ob es sich um "ae", "oe" etc. handeln würde.</p> + +<pre class="brush: js">var names = ['Hochberg', 'Hönigswald', 'Holzman']; + +var germanPhonebook = new Intl.Collator('de-DE-u-co-phonebk'); + +// as if sorting ["Hochberg", "Hoenigswald", "Holzman"]: +console.log(names.sort(germanPhonebook.compare).join(', ')); +// logs "Hochberg, Hönigswald, Holzman" +</pre> + +<p>Bei manchen Beugungsformen wird ein Vokal zu einem Umlaut, daher ist es sinnvoll, Wörterbücher so zu sortieren, dass Vokale und Umlaute gleich sortiert werden. Bei der Sortierung wird dann also "ä" wie "a" und "ö" wie "o" sortiert. Eine Ausnahme stellen Wörter dar, die sich nur im Umlaut unterscheiden. In solchen Fällen wird der Vokal vor dem Umlaut gereiht (z.B. <em>schon</em> vor <em>schön</em>). </p> + +<pre class="brush: js">var germanDictionary = new Intl.Collator('de-DE-u-co-dict'); + +// as if sorting ["Hochberg", "Honigswald", "Holzman"]: +console.log(names.sort(germanDictionary.compare).join(', ')); +// logs "Hochberg, Holzman, Hönigswald" +</pre> + +<p>Mehr Informationen über das {{jsxref("Intl")}} API können unter <a href="https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/">Introducing the JavaScript Internationalization API</a> (in Englisch) nachgelesen werden.</p> + +<div>{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div> |