이진 데이터는 결국 ASCII, Unicode, Base64 등으로 인코딩 되어 사용됩니다.
다른 포스팅에서는 btoa(), atob() API 를 소개드렸었는데요.
이 두 가지는 binaryData <-> Base64 로 인코딩, 디코딩하는 함수였습니다.
이번에 소개해드릴 API 는 binaryData <-> utf-8 로 인코딩 하는 함수입니다.
TextDecoder
decode 는 이진 데이터를 텍스트로 디코딩 합니다.
const decoder = new TextDecoder();
const arr = new Uint8Array([104, 101, 108, 108, 111, 64]);
console.log(decoder.decode(arr)); // hello@
TextEncoder
encode 는 텍스트를 이진데이터로 인코딩 합니다.
const str = 'hello@';
const encoder = new TextEncoder();
console.log(encoder.encode(str)); // Uint8Array(6) [104, 101, 108, 108, 111, 64]
위 예시에서는 ASCII 코드에 해당하는 문자들이라, 1byte 씩 사용하여 6개의 ArrayBuffer 를 만들어냈습니다.
그렇담, 이모지 같이 더 많은 byte 가 필요한 문자는 어떻게될까요?
const str = '🎉';
const encoder = new TextEncoder();
console.log(encoder.encode(str)); // Uint8Array(2) [240, 159, 142, 137]
위처럼 1개의 문자를 표현하기 위해서 4byte 를 사용합니다.
바로 utf-8 이 이렇게 인코딩하는 것이었습니다!
1~4byte 를 가변적으로 사용하는 거죠!
이전 포스팅에서 다루었던 이론적인 부분을 직접 확인할 수 있었네요 :)
반응형
'FE > javascript' 카테고리의 다른 글
[JS] javascript 에서 Byte 다루기 (feat.ArrayBuffer) (0) | 2023.10.04 |
---|