[Javascript] 써로게이트 페어(surrogate pair)

const str= '😅';
console.log(str.length);

 

위 코드를 실행하면 콘솔에는 어떻게 표시될까?

 

'1글자니까 1이겠지' 라고 생각할 수 있지만 2가 표시된다.

 

 

왜 이렇게 표시되는지 알아보자

 

써로게이트 페어 (surrogate pair)

 

기본적으로 js에서 string은 UTF-16으로 다뤄진다.

 

UTF-16은 문자를 표현할 때 2바이트 또는 4바이트를 가변적으로 사용한다.

 

한국어 문자(가, 나, 다...)는 2바이트로 표현이 가능하지만

일부 한자나 이모지 등은 2바이트로 표현이 불가능해 2바이트를 더 사용해야 한다,

 

따라서 기본적으로는 2바이트를 사용하되, 

2바이트로 표현 가능한 범위 바깥의 문자열들은 2바이트를 더 사용하여 표현한다.

 

두 글자만큼의 공간을 한 글자를 표현하는데 사용하는 이것을 써로게이트 페어(surrogate pair)라고 한다.

 

const str= '😅'; //써로게이트 페어는 4바이트(기본 크기의 2배)를 사용하여 문자를 표현하므로
console.log(str.length); //1글자처럼 보이지만 length는 2가 된다

 

 

써로게이트 페어 다루기

한 글자처럼 보이지만 실제 길이는 2기 때문에 써로게이트 페어가 포함된 문자열을 다룰 때에는 유의해야 한다.

 

const str= '😅가나다';

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

 

위처럼 인덱스를 기준으로 문자열 내부를 반복하면 써로게이트 페어를 고려해주지 못해

기본 크기인 2바이트로 문자가 잘리게 된다.

 

 

 

😅는 4바이트, 즉 2글자 만큼을 사용하고 있으므로 

바이트가 절반씩 잘려나가 console.log에 들어간다.

 

올바르게 문자열 내부를 반복하려면 일반 for 대신 for-of를 사용할 수 있다

 

const str= '😅가나다';

for(const char of str){
  console.log(char);
}

 

 

 

이외의 String 메서드에서 index를 이용해 다루는 함수에서도 써로게이트 페어는 고려되지 않는 경우가 많으므로 주의해야 한다.

 

단독 써로게이트

 

String.prototype.isWellFormed()로 현재 string이 정상적인 바이트 패턴을 가지고 있는 문자인지 판정할 수 있다.

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/isWellFormed

String.prototype.isWellFormed() - JavaScript | MDN

const str= '😅가나다';

for(let i=0; i< str.length; i++){
  if(!str[i].isWellFormed()){
    console.error('this string is not wellFormed');
  }
  console.log(str[i]);
}

 

 

isWellFormed() 가 false라면 써로게이트 페어가 깨졌다는 것을 의미한다.

 

2글자만큼의 공간이 1글자를 표현하는 데 사용되었어야 하지만 1글자분의 바이트(lone surrogate)만 포함되었다는 것이다.