Vor über zwei Jahren beschrieb Renato Mangini eine Methode zur Konvertierung zwischen Roh-ArrayBuffers und der entsprechenden Stringdarstellung dieser Daten. Am Ende des Beitrags erwähnte Renato, dass eine offizielle standardisierte API für die Umstellung in der Entwicklung ist. Die Spezifikation ist jetzt ausgereift und sowohl Firefox als auch Google Chrome bieten native Unterstützung für die Schnittstellen TextDecoder und TextEncoder.
Wie in diesem Live-Beispiel, aus dem unten ein Auszug zu sehen ist, können Sie mit der Encoding API ganz einfach zwischen Rohbytes und nativen JavaScript-Strings übersetzen, unabhängig davon, mit welcher der vielen Standardcodierungen Sie arbeiten müssen.
<pre id="results"></pre>
<script>
if ('TextDecoder' in window) {
// The local files to be fetched, mapped to the encoding that they're using.
var filesToEncoding = {
'utf8.bin': 'utf-8',
'utf16le.bin': 'utf-16le',
'macintosh.bin': 'macintosh'
};
Object.keys(filesToEncoding).forEach(function(file) {
fetchAndDecode(file, filesToEncoding[file]);
});
} else {
document.querySelector('#results').textContent = 'Your browser does not support the Encoding API.'
}
// Use XHR to fetch `file` and interpret its contents as being encoded with `encoding`.
function fetchAndDecode(file, encoding) {
var xhr = new XMLHttpRequest();
xhr.open('GET', file);
// Using 'arraybuffer' as the responseType ensures that the raw data is returned,
// rather than letting XMLHttpRequest decode the data first.
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
if (this.status == 200) {
// The decode() method takes a DataView as a parameter, which is a wrapper on top of the ArrayBuffer.
var dataView = new DataView(this.response);
// The TextDecoder interface is documented at http://encoding.spec.whatwg.org/#interface-textdecoder
var decoder = new TextDecoder(encoding);
var decodedString = decoder.decode(dataView);
// Add the decoded file's text to the <pre> element on the page.
document.querySelector('#results').textContent += decodedString + '\n';
} else {
console.error('Error while requesting', file, this);
}
};
xhr.send();
}
</script>
Im Beispiel oben wird anhand der Funktionserkennung ermittelt, ob die erforderliche TextDecoder
-Benutzeroberfläche im aktuellen Browser verfügbar ist. Andernfalls wird eine Fehlermeldung angezeigt. In einer echten Anwendung sollten Sie normalerweise auf eine alternative Implementierung zurückgreifen, wenn keine native Unterstützung verfügbar ist. Glücklicherweise ist die Textcodierungsbibliothek, die Renato in seinem ursprünglichen Artikel erwähnte, immer noch eine gute Wahl. Die Bibliothek verwendet die nativen Methoden in Browsern, die sie unterstützen, und bietet Polyfills für die Encoding API in Browsern, die sie noch nicht unterstützen.
Aktualisierung, September 2014: Das Beispiel wurde geändert, um zu veranschaulichen, wie geprüft wird, ob die Encoding API im aktuellen Browser verfügbar ist.