JavaScript Intl API로 날짜, 통화 국제화하기 + 영문자 정렬

자바스크립트 내장 객체인 Intl에는 국제화를 지원하는 기능들이 포함되어 있다.

날짜나 통화같이 국제적으로 형식이 다른 데이터들을 Intl API를 이용해서 포맷해보자.

 

---

Intl.NumberFormat()

NumberFormat 메소드는 숫자를 특정 지역에 맞는 형식으로 자동으로 변환해준다.

const cost = 1267900;

// 원화(KRW)로 변환
const krw = Intl.NumberFormat("ko-KR", { style: "currency", currency: "KRW" }).format(cost);
console.log(krw); // ₩1,267,900


// 달러(USD)로 변환
const usd = Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(cost);
console.log(usd); // $1,267,900.00

---

Intl.DateTimeFormat()

날짜와 시간을 지역에 맞게 포맷하는 메소드.

한국의 경우 "년 월 일"로 변환하고 미국의 경우 "월 일, 년" 기준으로 변환한다.

// 한국 날짜 포맷
const kr = Intl.DateTimeFormat("ko-KR", { dateStyle: "long" }).format(new Date("2024-11-22"));
console.log(kr); // 2024년 11월 22일

// 미국 날짜 포맷
const us = Intl.DateTimeFormat("en-US", { dateStyle: "long" }).format(new Date("2024-11-22"));
console.log(us); // November 22, 2024

---

Intl.Collator()

문자열을 지역에 따라 비교하는 메소드인 Collator는 한국어 기준으로는 ㄱ-ㅎ, 영어로는 a-z 순서로 정렬한다.

const kr = Intl.Collator("ko-KR");
const fruitsKr = ["사과", "바나나", "체리"];
console.log(fruitsKr.sort(kr.compare)); // ["바나나", "사과", "체리"]

const us = Intl.Collator("en-US");
const fruitsUs = ["apple", "banana", "cherry"];
console.log(fruitsUs.sort(us.compare)); // ["apple", "banana", "cherry"]

---

 

항상 느끼지만 자바스크립트에는 내장 객체나 메소드들에는 생각보다 훨씬 다양한것들이 많다.

노션 위젯을 만들 때 사용자층이 글로벌해서 표준을 어떻게 맞춰야할 지 고민됐는데 Intl API를 이용해봐야겠다.