텍스트 디코더와 텍스트 인코더

이진 데이터가 문자열이라면 어떨지 생각해봅시다. 예를 들어 텍스트 데이터가 있는 파일을 받았다고 가정하겠습니다.

내장 객체, TextDecoder는 주어진 버퍼와 인코딩으로 값을 실제 자바스크립트 문자열로 읽을 수 있게 해줍니다.

첫 번째로 객체를 생성합니다.

let decoder = new TextDecoder([label], [options]);
  • label – 기본적인 인코딩 방식은 utf-8이지만 big5, windows-1251 및 다른 인코딩 방식도 지원됩니다.
  • options – 선택 항목입니다.
    • fatal – 불린 값. true인 경우, 잘못된 글자(디코딩 불가능한 글자)를 대상으로 예외를 던집니다. false(기본값)인 경우, 글자를 \uFFFD로 대체합니다.
    • ignoreBOM – 불린 값이 true인 경우 사용되지 않는 바이트 순서 표식(Byte Order Mark, BOM)을 무시합니다.

그런 다음 생성했던 객체를 디코딩합니다.

let str = decoder.decode([input], [options]);
  • input – 디코딩할 BufferSource를 입력합니다.
  • options – 선택 항목입니다.
    • stream – 많은 양의 데이터를 받아들여 decoder를 반복적으로 호출할 때도 decoding이 반복적으로 실행됩니다. 이런 경우 멀티 바이트 문자가 많은 데이터로 분할될 수 있습니다. 이 옵션은 데이터 분할을 방지하기 위해 TextDecoder에 “unfinished” 문자를 입력시키고 다음 데이터가 오면 디코딩하도록 지시합니다.

예시:

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는 반대로 문자열을 바이트로 변환합니다.

문법은 다음과 같습니다.

let encoder = new TextEncoder();

TextEncoder는 인코딩 시 'utf-8’만 지원합니다.

2가지 메서드가 있습니다.

  • encode(str)Uint8Array에 문자열을 반환합니다.
  • encodeInto(str, destination)Uint8Array 구조 형태로 문자열 strdestination에 인코딩합니다.
let encoder = new TextEncoder();

let uint8Array = encoder.encode("Hello");
alert(uint8Array); // 72,101,108,108,111
튜토리얼 지도

댓글

댓글을 달기 전에 마우스를 올렸을 때 나타나는 글을 먼저 읽어주세요.
  • 추가 코멘트, 질문 및 답변을 자유롭게 남겨주세요. 개선해야 할 것이 있다면 댓글 대신 이슈를 만들어주세요.
  • 잘 이해되지 않는 부분은 구체적으로 언급해주세요.
  • 댓글에 한 줄짜리 코드를 삽입하고 싶다면 <code> 태그를, 여러 줄로 구성된 코드를 삽입하고 싶다면 <pre> 태그를 이용하세요. 10줄 이상의 코드는 plnkr, JSBin, codepen 등의 샌드박스를 사용하세요.