JavaScript Intl API로 다국어 포맷팅 구현하기
2024년 09월 24일애플리케이션을 여러 국가의 사용자에게 서비스할 때 숫자, 날짜, 통화 등을 각 나라의 형식에 맞게 표시하는 것은 매우 중요합니다. 예를 들어 1000000이라는 숫자는 미국에서는 '1,000,000', 독일에서는 '1.000.000', 프랑스에서는 '1 000 000'과 같이 다르게 표시됩니다. JavaScript의 Intl API는 이러한 지역화(Localization) 작업을 손쉽게 처리할 수 있게 해줍니다.
기초적인 사용법
Intl API는 여러 생성자를 제공합니다. 가장 일반적으로 사용되는 것들은 다음과 같습니다:
Intl.NumberFormat: 숫자Intl.DateTimeFormat: 날짜와 시간Intl.RelativeTimeFormat: 상대적 시간
Intl API 사용
먼저 new Intl.NumberFormat 형태로 인스턴스를 생성합니다. 생성자는 1)로케일 2)옵션을 인자로 받습니다.
생성된 인스턴스의 format 메서드를 사용하면 원하는 형태의 결과를 얻을 수 있습니다.
console.log(new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).format(1000));
//$1,000.00
Intl 객체의 인스턴스를 생성하여 재사용할 수도 있습니다. 매번 새로운 인스턴스를 생성하는 것보다 효율적입니다.
예를 들어, NumberFormat을 사용할 때:
// 인스턴스 생성
const numberFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
});
// 여러 번 재사용
console.log(numberFormatter.format(1000)); // $1,000.00
console.log(numberFormatter.format(2000)); // $2,000.00
console.log(numberFormatter.format(3000)); // $3,000.00
DateTimeFormat의 경우:
// 인스턴스 생성
const dateFormatter = new Intl.DateTimeFormat('ko-KR', {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long'
});
// 여러 날짜에 대해 재사용
const date1 = new Date(2023, 0, 1);
const date2 = new Date(2023, 5, 15);
const date3 = new Date(2023, 11, 31);
console.log(dateFormatter.format(date1)); // 2023년 1월 1일 일요일
console.log(dateFormatter.format(date2)); // 2023년 6월 15일 목요일
console.log(dateFormatter.format(date3)); // 2023년 12월 31일 일요일
이렇게 인스턴스를 재사용하면 특히 많은 수의 날짜나 숫자를 형식화해야 할 때 편리하고 성능상의 효과도 있습니다.
Intl.NumberFormat
Intl.NumberFormat은 숫자를 특정 로케일에 맞게 형식화합니다.
기본 사용법
const number = 1234567.89;
// 기본 미국 영어 형식
console.log(new Intl.NumberFormat('en-US').format(number));
// 출력: 1,234,567.89
// 독일어 형식
console.log(new Intl.NumberFormat('de-DE').format(number));
// 출력: 1.234.567,89
// 한국어 형식
console.log(new Intl.NumberFormat('ko-KR').format(number));
// 출력: 1,234,567.89
통화 형식
// 달러 표시
console.log(new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(number));
// 출력: $1,234,567.89
// 유로 표시
console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// 출력: 1.234.567,89 €
// 원 표시
console.log(new Intl.NumberFormat('ko-KR', { style: 'currency', currency: 'KRW' }).format(number));
// 출력: ₩1,234,568
단위 표시
// 킬로미터 표시
console.log(new Intl.NumberFormat('en-US', { style: 'unit', unit: 'kilometer' }).format(number));
// 출력: 1,234,567.89 km
// 킬로그램 표시
console.log(new Intl.NumberFormat('en-US', { style: 'unit', unit: 'kilogram' }).format(number));
// 출력: 1,234,567.89 kg
Intl.DateTimeFormat
Intl.DateTimeFormat은 날짜와 시간을 특정 로케일에 맞게 형식화합니다.
기본 사용법
const date = new Date();
// 미국 영어 형식
console.log(new Intl.DateTimeFormat('en-US').format(date));
// 출력: 9/24/2024
// 한국어 형식
console.log(new Intl.DateTimeFormat('ko-KR').format(date));
// 출력: 2024. 9. 24.
// 독일어 형식
console.log(new Intl.DateTimeFormat('de-DE').format(date));
// 출력: 24.9.2024
날짜와 시간 함께 표시
const options = {
year: 'numeric',
month: 'long',
day: 'numeric'
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
timeZone: 'UTC'
};
console.log(new Intl.DateTimeFormat('en-US', options).format(date));
// 출력: May 15, 2023 at 12:00:00 PM
console.log(new Intl.DateTimeFormat('ko-KR', options).format(date));
// 출력: 2023년 5월 15일 오후 12시 0분 0초
Intl.RelativeTimeFormat
상대 시간 표시
const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
console.log(rtf.format(-1, 'day'));
// 출력: yesterday
console.log(rtf.format(2, 'day'));
// 출력: in 2 days
console.log(rtf.format(-1, 'week'));
// 출력: last week
const rtfKo = new Intl.RelativeTimeFormat('ko', { numeric: 'auto' });
console.log(rtfKo.format(-1, 'day'));
// 출력: 어제
console.log(rtfKo.format(2, 'day'));
// 출력: 모레
console.log(rtfKo.format(-1, 'week'));
// 출력: 지난주
결론
Intl API는 다국어 지원이 필요한 애플리케이션에서 매우 유용합니다. 이 API를 사용하면 복잡한 날짜, 시간, 숫자 형식화 로직을 직접 구현할 필요 없이 브라우저의 내장 기능을 활용할 수 있습니다. 위에서 소개한 NumberFormat과 DateTimeFormat 외에도 Collator, ListFormat, PluralRules 등 다양한 기능을 제공하므로, 필요에 따라 적절히 활용하면 좋습니다.
참고자료
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl
TAGSJAVASCRIPTFRONTEND