본문 바로가기
FE/javascript

[JS] TextEncoding (Binary <-> UTF-8)

by livemehere 2023. 10. 4.

이진 데이터는 결국 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