[Javascript] : 국제화 지원 API Intl - NumberFormat

Intl(Internationalization) API는 Javascript에서 국제화 지원을 가능하게 하는 API다.

Intl API를 사용하면 날짜, 시간, 통화, 메시지 등을 사용자의 지역에 맞게 표시할 수 있다. Intl API를 사용하려면 브라우저에서 지원하는지 먼저 확인해야 한다. 지원하지 않는 브라우저일 경우 Intl 폴리필 라이브러리를 사용하여 Intl API를 사용할 수 있다. 확인해보니 대부분의 브라우저를 22년도 4월에 업데이트 한 적이 있다면 Intl API를 사용할 수 있다.

 

Intl.NumberFormat

Intl.NumberFormat을 사용하면 언어별로 지정된 규칙에 따라 숫자를 서식화할 수 있다. 숫자를 해당 언어와 지역에 맞게 표시하고, 구분 기호(separator), 소수점 기호, 통화 기호(currency) 등을 커스터마이징할 수 있다.

 

기본 사용법

//locale을 설정하지 않은 경우엔 기본 locale과 옵션에 맞게 포매팅 된 문자열이 리턴된다.
const number = 3500;

console.log(new Intl.NumberFormat().format(number));
// '3,500' 한국인 경우. 본인 브라우저 언어가 어디냐에 따라 다르게 나옴.

 

locale을 명시하여 사용하는 방법

const number = 123456.789;

// 한국
console.log(new Intl.NumberFormat('ko-KR').format(number));
// 123,456.789

// 독일은 소수점 표기할 때 컴마(,)를 사용하고 1000단위 표기는 마침표(.)를 사용한다.
console.log(new Intl.NumberFormat("de-DE").format(number));
// 123.456,789

// 아랍쪽은 숫자를 표기할 때 아랍문자를 사용한다.
console.log(new Intl.NumberFormat("ar-EG").format(number));
// ١٢٣٤٥٦٫٧٨٩

// 지원하지 않는 언어를 locale로 사용할 경우를 대비해서(예 : Balinese) 
// 대체 언어를 추가해주는 방법도 있다. (ban => 지원 안함, id : 인도네시언 언어 locale을 대체언어로 표기)
console.log(new Intl.NumberFormat(["ban", "id"]).format(number));
// 123.456,789

 

options를 추가하여 사용하는 방법

const number = 123456.789;

// 숫자 포매팅은 독일에 맞추되, 금액표기(currency)는 EUR(유로)로 표기하겠다.
console.log(
  new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(
    number,
  ),
);
// 123.456,79 €

// 일본에서는 금액 표기를 할 때 소수 단위는 표시하지 않기때문에 자동으로 소수점 이하 금액은 잘림
console.log(
  new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY" }).format(
    number,
  ),
);
// ￥123,457

// 유효한 숫자 범위를 3자리로 제한하기
console.log(
  new Intl.NumberFormat("ko-KR", { maximumSignificantDigits: 3 }).format(
    number,
  ),
);
// 123,000

// 유효한 숫자 범위를 5자리로 제한하기
console.log(
  new Intl.NumberFormat("ko-KR", { maximumSignificantDigits: 3 }).format(
    number,
  ),
);
// 123,460


// 특정 단위를 사용해서 숫자 포매팅하기 : 스타일은 unit을 사용, unit은 시속키로미터로.
console.log(
  new Intl.NumberFormat("ko-KR", {
    style: "unit",
    unit: "kilometer-per-hour",
  }).format(50),
);
// 50km/h

// 특정 단위를 사용해서 숫자 포매팅하기 : 스타일은 unit을 사용, unit은 시속키로미터로.
console.log(
  (16).toLocaleString("ko-KR", {
    style: "unit",
    unit: "liter",
    unitDisplay: "long",
  }),
);
// 16 리터

위의 예시들을 보면 unit과 currency에 문자열이 들어간다. 그런데 어떤 문자열이 유효한 값인지 알 수가 없다. 

이걸 확인할 수 있는 Intl의 supportedValuesOf함수가 존재한다. 

 

정리

보통 locale에 맞는 시간, 날짜, 금액표기 등은 라이브러리를 많이 사용하거나 toLocaleString을 많이 사용했다. 하지만 Intl을 사용하면 라이브러리 없이도 모두 표현이 가능하고, toLocaleString을 사용하는 것 보다 컴팩트하다.