Il y a plus de deux ans, Renato Mangini a décrit une méthode permettant de convertir des données brutes ArrayBuffers dans la représentation sous forme de chaîne correspondante. À la fin de l'article, Renato Renato indique qu'une API standardisée officielle permettant de gérer la conversion était en cours de rédaction. La spécification a été validée, et les interfaces TextDecoder et TextEncoder sont désormais compatibles de façon native avec Firefox et Google Chrome.
Comme le montre cet exemple en direct, présenté ci-dessous, l'API Encoding facilite la conversion d'octets bruts en chaînes JavaScript natives, quels que soient les nombreux encodages standards que vous devez utiliser.
<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>
L'exemple ci-dessus utilise la détection des fonctionnalités pour déterminer si l'interface TextDecoder requise est disponible dans le navigateur actuel. Si ce n'est pas le cas, un message d'erreur s'affiche. Dans une application réelle, il est préférable de s'appuyer sur une autre implémentation si la compatibilité native n'est pas disponible. Heureusement, la bibliothèque d'encodage de texte mentionnée par Renato dans son article original reste un bon choix. La bibliothèque utilise les méthodes natives dans les navigateurs compatibles et propose des polyfills pour l'API Encoding sur les navigateurs qui ne sont pas encore compatibles.
Mise à jour de septembre 2014: modification de l'exemple pour illustrer la vérification de la disponibilité de l'API Encoding dans le navigateur actuel.