- JavaScript TextDecoder and TextEncoder
- TextEncoder
- TextDecoder и TextEncoder
- TextEncoder
- TextEncoder
- Constructor
- Instance properties
- Instance methods
- Examples
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- TextEncoder: encode() method
- Syntax
- Parameters
- Return value
- Examples
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- TextDecoder and TextEncoder
- TextEncoder
- Comments
JavaScript TextDecoder and TextEncoder
In this chapter, we are going to explore TextEncoder and TextDecoder in JavaScript. Imagine that the binary data is a string. For example, getting a file with a textual data. With the help of a built-in TextDecoder object, it is possible to read the value into a JavaScript actual string, with the encoding and the buffer.
First of all, it’s necessary to create it like this:
let textDecoder = new TextDecoder([label], [options]);
- the label is the encoding, by default utf-8. Windows-1251 and big5 are also supported.
- options consider the optional object.
- fatal: it’s a boolean. If it’s true, then throwing an exception for invalid characters. Otherwise, replacing them with the \uFFFD character.
- ignoreBOM: it’s also a boolean. If true, then ignoring BOM. However, it’s used rarely.
The next step is decoding, like this:
let str = textDecoder.decode([input], [options]);
- input is the BufferSource for decoding.
- options include the optional object.
- stream is true for decoding streams at times when decoder is continuously called with incoming data chunks.
Javascript a built-in TextDecoder decode uint8Array
‘use strict’; let uint8Array = new Uint8Array([119, 101, 108, 99, 111, 109, 101]); console.log(new TextDecoder().decode(uint8Array)); // Welcome
Javascript a built-in TextDecoder decode uint8Array
‘use strict’; let uint8Array = new Uint8Array([229, 190, 150, 229, 161, 179]); console.log(new TextDecoder().decode(uint8Array)); // 徖塳
By generating a subarray view, a part of the buffer can be decoded:
Javascript a built-in TextDecoder decode uint8Array
let uint8Array = new Uint8Array([0, 119, 101, 108, 99, 111, 109, 101, 0]); // the middle row //create a new look at it without copying anything let binaryStr = uint8Array.subarray(1, -1); console.log(new TextDecoder().decode(binaryStr)); // welcome
TextEncoder
The TextEncoder does the opposite thing. With the help of this built-in object, you can convert a string into bytes.
Its syntax is the following:
let textEncoder = new TextEncoder();
It includes two main methods:
- encode(str): returning the Uint8Array from a string.
- encodeInto(str, destination): encoding str into destination, which should be Uint8Array .
Javascript a built-in TextEncoder
let textEncoder = new TextEncoder(); let uint8Array = textEncoder.encode(«Welcome»); console.log(uint8Array); // 87,101,108,99,111, 109, 101
TextDecoder и TextEncoder
Что если бинарные данные фактически являются строкой? Например, мы получили файл с текстовыми данными.
Встроенный объект TextDecoder позволяет декодировать данные из бинарного буфера в обычную строку.
Для этого прежде всего нам нужно создать сам декодер:
let decoder = new TextDecoder([label], [options]);
- label – тип кодировки, utf-8 используется по умолчанию, но также поддерживаются big5 , windows-1251 и многие другие.
- options – объект с дополнительными настройками:
- fatal – boolean, если значение true , тогда генерируется ошибка для невалидных (не декодируемых) символов, в ином случае (по умолчанию) они заменяются символом \uFFFD .
- ignoreBOM – boolean, если значение true , тогда игнорируется BOM (дополнительный признак, определяющий порядок следования байтов), что необходимо крайне редко.
…и после использовать его метод decode:
let str = decoder.decode([input], [options]);
- input – бинарный буфер ( BufferSource ) для декодирования.
- options – объект с дополнительными настройками:
- stream – true для декодирования потока данных, при этом decoder вызывается вновь и вновь для каждого следующего фрагмента данных. В этом случае многобайтовый символ может иногда быть разделён и попасть в разные фрагменты данных. Это опция указывает TextDecoder запомнить символ, на котором остановился процесс, и декодировать его со следующим фрагментом.
let uint8Array = new Uint8Array([72, 101, 108, 108, 111]); alert( new TextDecoder().decode(uint8Array) ); // Hello
let uint8Array = new Uint8Array([228, 189, 160, 229, 165, 189]); alert( new TextDecoder().decode(uint8Array) ); // 你好
Мы можем декодировать часть бинарного массива, создав подмассив:
let uint8Array = new Uint8Array([0, 72, 101, 108, 108, 111, 0]); // Возьмём строку из середины массива // Также обратите внимание, что это создаёт только новое представление без копирования самого массива. // Изменения в содержимом созданного подмассива повлияют на исходный массив и наоборот. let binaryString = uint8Array.subarray(1, -1); alert( new TextDecoder().decode(binaryString) ); // Hello
TextEncoder
TextEncoder поступает наоборот – кодирует строку в бинарный массив.
Имеет следующий синтаксис:
TextEncoder
The TextEncoder interface takes a stream of code points as input and emits a stream of UTF-8 bytes.
Note: This feature is available in Web Workers
Constructor
Returns a newly constructed TextEncoder that will generate a byte stream with UTF-8 encoding.
Instance properties
The TextEncoder interface doesn’t inherit any properties.
Instance methods
The TextEncoder interface doesn’t inherit any methods.
Takes a string as input, and returns a Uint8Array containing UTF-8 encoded text.
Takes a string to encode and a destination Uint8Array to put resulting UTF-8 encoded text into, and returns an object indicating the progress of the encoding. This is potentially more performant than the older encode() method.
Examples
const encoder = new TextEncoder(); const view = encoder.encode("€"); console.log(view); // Uint8Array(3) [226, 130, 172]
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Feb 19, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.TextEncoder: encode() method
The TextEncoder.encode() method takes a string as input, and returns a Uint8Array containing the text given in parameters encoded with the specific method for that TextEncoder object.
Syntax
Parameters
A string containing the text to encode.
Return value
Examples
p class="source">This is a sample paragraph.p> p class="result">Encoded result:p>
const sourcePara = document.querySelector(".source"); const resultPara = document.querySelector(".result"); const string = sourcePara.textContent; const textEncoder = new TextEncoder(); let encoded = textEncoder.encode(string); resultPara.textContent += encoded;
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Apr 8, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.TextDecoder and TextEncoder
What if the binary data is actually a string? For instance, we received a file with textual data.
The built-in TextDecoder object allows one to read the value into an actual JavaScript string, given the buffer and the encoding.
We first need to create it:
let decoder = new TextDecoder([label], [options]);
- label – the encoding, utf-8 by default, but big5 , windows-1251 and many other are also supported.
- options – optional object:
- fatal – boolean, if true then throw an exception for invalid (non-decodable) characters, otherwise (default) replace them with character \uFFFD .
- ignoreBOM – boolean, if true then ignore BOM (an optional byte-order Unicode mark), rarely needed.
let str = decoder.decode([input], [options]);
- input – BufferSource to decode.
- options – optional object:
- stream – true for decoding streams, when decoder is called repeatedly with incoming chunks of data. In that case a multi-byte character may occasionally split between chunks. This options tells TextDecoder to memorize “unfinished” characters and decode them when the next chunk comes.
let uint8Array = new Uint8Array([72, 101, 108, 108, 111]); alert( new TextDecoder().decode(uint8Array) ); // Hello
let uint8Array = new Uint8Array([228, 189, 160, 229, 165, 189]); alert( new TextDecoder().decode(uint8Array) ); // 你好
We can decode a part of the buffer by creating a subarray view for it:
let uint8Array = new Uint8Array([0, 72, 101, 108, 108, 111, 0]); // the string is in the middle // create a new view over it, without copying anything let binaryString = uint8Array.subarray(1, -1); alert( new TextDecoder().decode(binaryString) ); // Hello
TextEncoder
TextEncoder does the reverse thing – converts a string into bytes.
let encoder = new TextEncoder();
The only encoding it supports is “utf-8”.
- encode(str) – returns Uint8Array from a string.
- encodeInto(str, destination) – encodes str into destination that must be Uint8Array .
let encoder = new TextEncoder(); let uint8Array = encoder.encode("Hello"); alert(uint8Array); // 72,101,108,108,111
Comments
- If you have suggestions what to improve — please submit a GitHub issue or a pull request instead of commenting.
- If you can’t understand something in the article – please elaborate.
- To insert few words of code, use the tag, for several lines – wrap them in tag, for more than 10 lines – use a sandbox (plnkr, jsbin, codepen…)