모던 자바스크립트, UTF-16 이슈 해결에 관련된 문자열 함수

UTF-16 과 관련된 변화 사항

• 자바스크립트는 UTF-16 인코딩을 통해 문자를 표현한다.
• 인코딩 방식에서 생기는 여러 이슈들이 있었는데, ES2015 이후에 이를 해결하기 위해 바뀐 것들이 몇가지 있다.

코드 포인트 이스케이프 시퀀스 (Code point escape sequence)

• 유니코드 6.0 부터 이모지가 유니코드에 추가되었다.
• 이모지는 8비트의 코드 유닛 2개로 표현된다.
• 코드 포인트 이스케이프 시퀀스는 2개의 코드 유닛을 이용한 문자를 작성하기 위해선 번거로웠던 부분을 해결한다.

console.log("\uD83D\uDE0A"); // 😊
console.log("\u{1F60A}"); // 😊

String.fromCodePoint()

• 코드 포인트를 숫자로 전달받아 해당하는 유니코드 문자열로 변경해준다.
• 함수 버전의 코드 포인트 변환기이다.

console.log(String.fromCodePoint(0x1f60a)); // 😊
console.log(String.fromCodePoint(128522)); // 😊

String.prototype.codePointAt()

• 문자열의 n 번째 인덱스에 있는 문자의 코드 포인트를 얻는다.

"😊".codePointAt(0); // 128522
"😊".codePointAt(0).toString(16); // '1f60a'

자바스크립트 UTF-16 문자열 반복 관련 이슈와 for-of

• UTF-16 인코딩은 2바이트(16비트)의 코드 유닛 1개 혹은 2개로 구성한다.
  • 그 말은 문자 1개가 2바이트 혹은 4바이트 둘 다 될 수 있다는 것이다.
  • 문자 1개가 4바이트를 차지하는 경우, 문자열의 인덱스를 이용하면 약간의 문제가 생긴다.

const emoji = "😊";
console.log(emoji.length); // 2
console.log(emoji[0]); // '\uD83D'
console.log(emoji[1]); // '\uDE0A'

• 문자 1개가 4바이트를 차지하는 경우, 문자는 1개인데 길이가 2로 나온다.
• 2바이트짜리 코드 유닛 2개가 합쳐져 하나의 문자를 만들어내야 하는데, 각각을 따로 보았기 때문이다.
• 문자를 1개씩 출력하고 싶다고 for 문을 이용하면 아래와 같은 상황을 겪게 된다.

const emoji = "😊";

for (let i = 0; i < emoji.length; i++) {
  console.log(emoji[i]);
}
// �
// �

• 각각의 코드 유닛은 유니코드에서 매칭되는 글자가 없기 때문에 적절히 표현되지 않는다.
• 이럴 때는 for-of 를 사용하면 적절히 처리할 수 있다.

const emoji = "😊";

for (const c of emoji) {
  console.log(c);
}
// 😊

• 위 코드가 올바르게 출력되는 이유는 인덱스 단위로 반복하지 않고, 문자열의 iterator 를 얻어오기 때문이다.
• 이터러블과 이터레이터에 대한 참고할만한 글

UTF-16 문자열 쪼개기 (split) 이슈와 Array.from()

• 위에서 설명한 문자열 반복 이슈와 동일하게 문자열을 쪼갤 때도 동일한 문제가 발생한다.

const emoji = "😊";

console.log(emoji.split("")); //  ['\uD83D', '\uDE0A']

• Array.from() 메서드를 이용해 이를 해결할 수 있다.

const emoji = "😊";

console.log(Array.from(emoji)); //  ['😊']

String.prototype.normalize()

• 문자열을 정규화된 양식으로 바꾸어준다.
• 사실상 동일한 문자가 다른 방식으로 표기됐을 때 이를 올바르게 비교할 수 있게 해준다.

const string1 = "café";
const string2 = "cafe\u0301";

console.log(string1 === string2); // false
console.log(string1.normalize() === string2.normalize()); // true