• Unicode verstehen
• Mastering UTF-8
• Text Inspector (UTF-8)
• IT Procurement
• Rsync über SSH
• Perl5-Objekte
• Tips für Web-Profis
• HTML-Primer
• HTML Primer
• Effizient Tippen
• Tipp-Trainer
• HTML Redirect Tool
• Mail URL Tool
• My Code
•  

• 

•  
• Homepage / Kontakt
• Impressum, Rechtshinweise
• Datenschutz
• Legal Notice

Text Inspector

Zeichenketten in Unicode-Punkte mit UTF-8-Kodierung aufschlüsseln
Breaking down strings into Unicode Points with UTF-8 Encoding

Wie das funktioniert

Den entsprechenden Javascript-Code kann man im HTML-Quelltext dieser Seite einsehen. Er ist relativ simpel. Für Javascript-Anfänger hier ein paar Hinweise:

• Array.from(s)
  erlaubt es, aus allem, was die Eigenschaft length (Länge) hat, ein Array (also ein Feld oder eine Liste) zu erzeugen. Strings (Zeichenketten) haben eine Länge und können also so in ein Array umgewandelt werden, dessen Elemente dann die einzelnen Zeichen der Zeichenkette sind. An jeder Stelle des Array steht also ein Zeichen, und das kann aus einem einzelnen Byte, aber auch aus mehreren Bytes bestehen.
• codePointAt(n)
  gibt den Unicode-Punkt an der Position n zurück. Wenn man diese Methode auf eine Zeichenkette mit nur einem Zeichen anwendet (nämlich auf ein einzelnes Element des vorgenannten Zeichen-Arrays), erhält man den Code-Punkt dieses einen Zeichens.
• enc = new TextEncoder('utf-8')
  erstellt eine Instanz der Klasse TextEncoder. Diese Klasse ist seit 2014 Bestandteil der von den meisten Browsern unterstützten Javascript-Versionen. Die Methoden dieses TextEncoder werden dann wie folgt aufgerufen:
• Array.from(enc.encode(c))
  gibt ein Array von Bytes zurück, die das Zeichen c repräsentieren. Für Ein-Byte-Zeichen (also die klassischen 7-bit-ASCII-Zeichen) ist das jeweils ein Array mit nur einem Element. Für Multibyte-Zeichen hat das Array mehrere Element. Beispiel: In UTF-8 wird das kleine scharfe S (ß) als Wert 50079 gespeichert; ein Wert, für den man zwei Bytes braucht. Wenn man mit Unicode umgehen will, sollte man sich übrigens an hexadezimale Zahlen gewöhnen. Um den Zahlenwert für die einzelnen Bytes in hexadezimale Zahlen umzurechnen benutzen wir folgende Standard-Methode mit einem weniger gebräuchlichen Argument 16:
• b.toString(16)
  gibt uns die hexadezimale Ausführung des Zahlenwert b aus. In unserem Fall ist b das einzige Byte (oder eines von mehreren Bytes), die das gerade untersuchte Zeichen repräsentieren. Beispiel: Wie oben erwähnt, wird das Zeichen „ß” in UTF-8 als Zahlenwert 50079 gespeichert. Das rechnen wir jetzt einen hexadezimalen Wert um, nämlich C39F. Das Hexadezimalsystem hat 16 Ziffern (0-9 und A-F), daher die Zahl 16 in der Klammer oben. Randbemerkung: Beim Schreiben von Hexadezimalzahlen oft ein kann man durch das voranstellen von „0x” kenntlich machen, dass es sich um eine solche handelt. 50079 ist also gleich 0xC39F.

Der Rest des Javascript-Codes in dieser Seite fällt in den Bereich Darstellung und Kosmetik (Eintragen der Ergebnisse in eine Tabelle).

How it works

The Javascript code behind this is embedded into this page's HTML, thus readable from the Page Source. It is rather simple. Javascript beginners may find the following comments useful, describing how to split strings into characters and characters into bytes.

• Array.from(s)
  returns an array from anything that has a length property. A string has a length, thus can be turned into an array of characters. Note this is not an array of bytes, as it takes more than one byte to number characters beyond ASCII.
• codePointAt(n)
  returns the code point at position n, thus when applied to a string of one character (here: one individual element of aforementioned array) with parameter n=0,it returns the code point of its one and only character.
• enc = new TextEncoder('utf-8')
  creates an instance of TextEncoder (a class part of Javascript and supported by most browsers since 2014). It is required for calling one of its methods as follows:
• Array.from(enc.encode(c))
  returns, for one character c, an array of its bytes. For an ASCII character this will be just an array with one element - the one and only byte needed to represent it. For a multibyte character it will be an array of the individual bytes. Example: The UTF-8 encoding for the "Latin Small Letter Sharp S", in short "ß", is the two byte number (50079). But as we prefer to see hexadecimal numbers (if you do not prefer those yet, get used to them if you want to deal with Unicode), here comes a very standard method with a not so well-known parameter:
• b.toString(16)
  returns the hexadecimal representation of the value of b. In our case b is the sole byte or one of multiple bytes representing the character we are examining. The character "ß" from the example above, in UTF-8 encoded as the value of 50079, results in the strings "C3" and "9F". Just believe me that the hexadecimal number C39F (usually written as 0xC39F) has exactly the same value as the decimal number 50079.

The rest of the code is cosmetics like writing the results in a table.