[JS] 유니코드와 유니코드 프로퍼티

유니코드

---

💡 자바스크립트는 모든 문자열을 UTF-16으로 인코딩한다. UTF-16은 기본적으로 2바이트(16비트)로 인코딩하지만, 2바이트로 표현할 수 없는 이모지, 특수 기호 같은 문자는 서로게이트 페어를 통해 4바이트를 사용한다. 이를 보충 문자라고 부른다. 서로게이트 페어는 U+10000(65536) 이상의 코드 포인트를 표현하기 위해 두 개의 2바이트 코드 조합으로 보충 문자를 표현하는 방식이다.

 

자바스크립트는 유니코드를 사용해서 문자열을 인코딩한다. 유니코드는 전 세계의 다양한 문자와 기호를 표현할 수 있도록 설계된 국제 표준이다. 유니코드에서 각 문자는 고유한 코드 포인트(해당 문자열을 대표하는 숫자)를 가진다.

 

코드 포인트는 U+ 접두사와 16진수 숫자를 합친 표기법을 사용한다. 예를들어 알파벳 a의 코드포인트는 U+0061 이다. 여기서 16진수 61을 10진수로 표기하면 97이고, 이는 charCodeAt codePointAt 메서드가 반환하는 값과 동일하다.

'a'.charCodeAt(); // 97
'a'.codePointAt(); // 97

 

유니코드 U+D800(55296)부터 U+DFFF(57343) 까지의 코드는 단독으로는 완전한 문자를 나타낼 수 없다. 이 범위에 속하는 코드들은 서로게이트 페어라고 불리며, 4바이트로 인코딩된 문자를 표현할 때 사용된다. 이모지, 특수 기호, 다양한 국제 문자 등이 이 방식을 사용한다.

 

charCodeAt 메서드는 지정한 문자의 UTF-16 코드 유닛을 반환한다. 만약 해당 문자가 서로게이트 페어를 이루고 있다면 charCodeAt 메서드는 첫 번째 코드 유닛만 반환한다. 반면, codePointAt 메서드는 서로게이트 페어를 구성하는 두 코드 유닛을 결합하여 전체 유니코드 포인트를 반환한다. 때문에 이모지처럼 서로게이트 페어를 사용하는 문자의 전체 코드 포인트를 얻으려면 codePointAt 메서드를 사용해야 한다.

const emoji = "🙂"; // 서로게이트 페어를 사용하는 문자
console.log(emoji.length); // 2 (4바이트로 인코딩된 문자여서 length 2)

const firstUnit = emoji.charCodeAt(0); // 55357 (첫번째 코드 유닛)
const secondUnit = emoji.charCodeAt(1); // 56898 (두번째 코드 유닛)

const fullCodePoint = emoji.codePointAt(0); // 128578 (전체 코드 유닛)

 

• charCodeAt(index) : UTF-16 코드 유닛을 나타내는 0~65535 사이의 10진수 정수 반환
• codePointAt(index) : 전체 유니코드 코드 포인트를 10진수로 반환

 

 

유니코드 프로퍼티

---

유니코드의 모든 문자는 다양한 프로퍼티(속성)를 가지는데, 이 프로퍼티를 통해 해당 문자가 어떤 범주에 속하는지 등의 정보를 확인할 수 있다. 예를들어 Letter 프로퍼티는 특정 언어의 문자임을 나타내고 Number 프로퍼티는 숫자임을 나타낸다.

 

자바스크립트에선 정규식에 \p{...} 유니코드 속성 이스케이프 문법을 사용해서 유니코드 속성을 식별할 수 있다. 이때 u 플래그를 붙여서 유니코드 모드를 활성화해야 한다.

const num = "10";
num.match(/\p{Number}/u); // ['1', index: 0, input: '10', groups: undefined]
num.match(/\p{Letter}/u); // null

 

주요 프로퍼티 목록은 아래와 같다. 모든 종류의 문자를 찾을 땐 L 혹은 Letter, 소문자를 찾을 땐 Ll 프로퍼티를 사용하면 된다. 아래 유니코드 프로퍼티를 활용해서 특정 언어의 단어나, 통화 단위 같은 특수 문자를 쉽게 검색할 수 있다.

 

대분류	소분류	축약 프로퍼티
문자(Letter) L	소문자(lowercase)	Ll
	조정(modifier)	Lm
	단어의 첫 글자를 대문자로(titlecase)	Lt
	대문자(uppercase)	Lu
	기타(other)	Lo
숫자(Number) N	10진수(decimal digit)	Nd
	문자(letter number)	Nl
	기타(other)	No
문장 부호(Punctuation) P	연결선(connector)	Pc
	대시(dash)	Pd
	처음 따옴표(initial quote)	Pi
	마지막 따옴표(final quote)	Pf
	열기(open)	Ps
	닫기(close)	Pe
	기타(other)	Po
표시(Mark) M	간격 결합(spacing combining)	Mc
	묶음(enclosing)	Me
	비공백(non-spacing)	Mn
기호(Symbol) S	통화(currency)	Sc
	수정(modifier)	Sk
	수학(math)	Sm
	기타(other)	So
구분 기호(Separator) Z	줄(line)	Zl
	단락(paragraph)	Zp
	공백(space)	Zs
기타(Other) C	제어(control)	Cc
	형식(format)	Cf
	할당되지 않음(not assigned)	Cn
	사용자 지정(private use)	Co
	서로게이트(surrogate)	Cs

 

위 목록 외에도 파생된 프로퍼티도 있다. 유니코드는 매우 다양한 프로퍼티를 지원하는데 링크에서 문자별 프로퍼티 목록, 프로퍼티별 문자 목록 등을 확인할 수 있다.

 

• Alphabetic(Alpha) : 모든 언어의 알파벳 e.g. A-Z, a-z, 가나다
• Other_Alphabetic(OAlpha) : 알파벳으로 간주되는 특수 문자 e.g. Ⅻ (로마숫자 12)
• Hex_Digit : 16진수 숫자 e.g. 0-9, a-f(혹은 A-F)
• Emoji_Presentation : 이모지 문자

 

 

예시

---

한글 검색 ⭐

Script 유니코드 프로퍼티는 특정 문자 체계나 스크립트를 식별할 때 사용한다. Script 프로퍼티를 이용해 라틴 문자, 한자, 한글 등을 식별하고 필터링할 수 있다. 구문은 아래와 같다.

Script=value 혹은 sc=value

 

value엔 원하는 스크립트 이름을 입력한다. 예를들어 한글 문자를 검색하려면 \p{sc=Hangul} 형태로 작성한다. 전체 Script 목록은 링크에서 확인할 수 있다. 참고로 Script 값은 대소문자를 구분하므로 주의하자.

const str = "a가b나c你d好";

// 한글 문자 검색
str.match(/\p{sc=Hangul}/gu); // ['가', '나']

// 한자 문자 검색
str.match(/\p{sc=Han}/gu); // ['你', '好']

// 라틴 문자 검색
str.match(/\p{sc=Latin}/gu); // ['a', 'b', 'c', 'd']

 

통화 검색

Currency_Symbol 혹은 Sc(축약형) 유니코드 프로퍼티로 통화 단위를 나타내는 문자를 찾을 수 있다. 아래는 통화 단위 숫자 형태의 가격 표시를 찾는 정규식 예시.

const str = "Prices: $8, €9, ¥98";

str.match(/\p{Sc}\d+/gu); // ['$8', '€9', '¥98']

 

🔍 + 수량자는 1번 이상 반복되는 경우 일치한다고 판단하고, \d 는 숫자 0에서 9까지의 문자 그룹을 가리키는 단축어다. 이와 반대인 \D는 숫자가 아닌 문자를 가리킨다.

 

16진수 검색

Hex_Digit 유니코드 프로퍼티를 이용해 0-9, a-f 혹은 A-F 범위에 속하는 16진수 문자를 찾을 수 있다. 아래는 0x 뒤에 1개 이상의 16진수 문자를 찾는 예시.

const userInput = "Error at 0x7fe3: invalid input";

userInput.match(/0x\p{Hex_Digit}+/gu); // ['0x7fe3']

 

 

레퍼런스

---

유니코드: 'u' 플래그와 \p{...} 클래스

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요