Intl 국제화표준 API

갑자기 유튜브 알고리즘에 의한 것인지 모르겠지만 Intl 이라는 Javascript 내장 API에 대한 설명해주는 영상을 보고 충격을 받았다. 자바스크립트 자체적으로 지원해주는 format API가 있다니.. 그래서 바로 MDN에 검색해봤다. 일단 인트로만 가져와보았다. 

 

Intl

The Intl object is the namespace for the ECMAScript Internationalization API, which provides language-sensitive string comparison, number formatting, and date and time formatting. The Intl object provides access to several constructors as well as functionality common to the internationalization constructors and other language-sensitive functions.

Intl 객체는 언어 간의 문자열비교, 숫자, 날짜, 시간에 대한 포맷팅을 제공하는 ECMAScript 국제화 API를 위한 네임스페이스입니다. Intl 객체는 국제화 생성자 및 기타 언어에 민감한 함수에 공통된 기능뿐만 아니라 여러 생성자에 대한 액세스를 제공한다.

 

 

거두절미하고 바로 생성자 프로퍼티들을 보도록하겠다. 

 

Intl.Collator()

Constructor for collators, which are objects that enable language-sensitive string comparison.  

collator 생성자는, 언어 의존 문자열 비교를 하는 객체입니다.  

 

Example) 이렇게 문자열 배열이 있고, 두가지의 방법으로 sorting을 하게 된다면 결과는 어떨까요? 

 

일단 sorting 알고리즘은 아스키코드를 통한 정렬을 하기 때문에 자동으로 대문자를 먼저 앞으로 전부 보내버리고 다음에 소문자를 정렬해줍니다. 하지만 Intl.Collator를 통해 언어를 선택해주면, 대소문자 구별없이 정렬해주는것을 볼 수 있습니다. 한글은 소용없었음..

 

Intl.DateTimeFormat()

Constructor for objects that enable language-sensitive date and time formatting.

언어의존 날짜와 시간 포맷팅을 하는 객체에 대한 생성자입니다.

 

이런식으로 나라 국제 규격에 따른 날짜 포맷팅을 간단히 셋팅할 수 있다.. 몰라서 못사용했더라니.. 이제 유틸로 만들어서 쓸일이 별로 없을거 같다라는 생각을 했습니다.

 

 

Intl.DisplayNames()

Constructor for objects that enable the consistent translation of language, region and script display names

언어, 지역 및 스크립트 표시 이름을 일관되게 변환할 하는 객체의 생성자입니다.

 

이렇듯 국제규격에 맞은 나라이름 혹은 화폐단위 여러가지들을 내가 원하는 언어로 변환해서 값을 반환해준다.

그런데 등록이 안되어있다면, 그런거 없이 그냥 입력한 문자열 그대로 반환된다. 

 

 

Intl.ListFormat()

Constructor for objects that enable language-sensitive list formatting.

언어별 목록 형식을 하는 객체의 생성자입니다.

 

배열을 이런식으로 type에 따라서 및, 또는 을 붙여줄 수 있고 아무것도 없이 출력할수 있다. 대신 이제 양옆에 brascket이 사라지는 것을 확인할 수 있다.

 

 

Intl.Locale()

Constructor for objects that represents a Unicode locale identifier.

유니코드 식별자를 나타내는 객체를 구성합니다.

이런식으로 먼저 선언해놓은 객체를 통해서 관리를 하는 것 같습니다. 그리고 이미 있는 locale에 대해 오버라이딩?을 해서 커스텀할 수도 있는 것 같아요 ! 

 

Intl.NumberFormat()

Constructor for objects that enable language-sensitive number formatting.

언어별 숫자 포맷팅을 하는 객체의 생성자입니다.

이런식으로 정말 간단하게 화폐단위, 온갖 공학적 단위계와 팔로워에 흔히쓰이는 notation들을 저렇게 쉽게 적용시켜서 사용할 수 있습니다. 이게 제일 유익해보이네요.

 

 

Intl.PluralRules()

Constructor for objects that enable plural-sensitive formatting and language-specific rules for plurals.

복수에 대한 특정 언어의 규칙과 복수별 포맷팅을 하는 객체의 생성자입니다.

 

위 코드는 아라비안 언어가 복수관련된 규칙이 달라서 저렇게 각 숫자마다 저렇게 나옵니다. 하지만 영어는 ?

그런거 딱히 없습니다. 무슨 기준인지 모르겠는데 type에 ordinal을 먹이니까 뭔가 달라진것을 확인 할 수 있었다.

 

그것을 이용해 Ranking suffix를 먹여 사용한 글을 봤다. 링크를 드리겠다. 한번 보고오시면 이런식으로도 활용할 수 있구나를 볼 수 있을거예요.

 

https://v8.dev/features/intl-pluralrules

Intl.PluralRules · V8

 

Intl.RelativeTimeFormat()

Constructor for objects that enable language-sensitive relative time formatting.

언어별 상태적 시간을 포맷팅을 하는 객체의 생성자입니다. 

 

유튜브에서 항상보던 이런식으로 상대적인 시간을 사용자에게 보여줄 수 있습니다.

하지만 변수옆에 단위를 써줘야합니다 ㅎㅎ;

 

Intl.Segmenter()

Constructor for objects that enable locale-sensitive text segmentation.

국가에 따른 텍스트 분할을 활성화하는 개체의 생성자입니다.

근데 약간 이걸 사용하면서 어떻게 해야할지 잘 모르겠는... 느낌이 드는데 이런식으로 사용할수 있을것 같습니다. 

 

 

Reference

 

https://www.youtube.com/watch?v=4YnKQrPMTNU 

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