JavaScript의 Intl 클래스는 다국어 지원, 날짜 및 시간 형식, 화폐, 숫자 및 단위 변환 등과 같은 다양한 지역화 기능을 제공합니다. 이 글에서는 Intl 클래스의 사용법에 대해 소개하고, 어떤 상황에서 사용할 수 있는지 설명하겠습니다.
1. Intl 클래스란?
Intl 클래스는 JavaScript에서 다양한 지역화 기능을 제공하는 클래스입니다. 이 클래스를 사용하면 사용자의 지역에 따라 문자열, 숫자, 날짜 및 시간 형식, 화폐, 단위 등을 다르게 표현할 수 있습니다.
Intl 클래스는 다양한 하위 클래스를 포함하고 있으며, 이를 통해 다양한 기능을 제공합니다. Collator 클래스는 문자열을 정렬하는 기능을 제공하고, DateTimeFormat 클래스는 날짜 및 시간 형식을 지정하는 기능을 제공합니다. NumberFormat 클래스는 숫자를 형식화하고, PluralRules 클래스는 복수형을 처리하는 기능을 제공합니다.
Intl 클래스는 다양한 옵션을 지정하여 사용할 수 있습니다. 예를 들어, 날짜 형식을 지정할 때는 월과 일의 순서, 날짜 구분 기호, 시간대 등을 지정할 수 있습니다. 이러한 옵션을 통해 사용자가 원하는 방식으로 표현할 수 있습니다.
JavaScript에서 Intl 클래스를 사용하기 위해서는 먼저 해당 클래스의 인스턴스를 생성해야 합니다. 이후에는 인스턴스의 메서드를 호출하여 다양한 기능을 사용할 수 있습니다.
Intl 클래스는 JavaScript의 표준 라이브러리이므로, 모던 브라우저에서는 기본적으로 지원됩니다. 따라서, 이를 이용하여 다양한 지역화 기능을 구현할 수 있습니다. 다음 섹션에서는 Intl 클래스의 하위 클래스들을 자세히 살펴보겠습니다.
2. 다국어 지원하기
Intl 클래스를 사용하면 JavaScript에서 다국어 지원을 쉽게 구현할 수 있습니다. 이 섹션에서는 다국어 지원을 위한 Collator 클래스와 DateTimeFormat 클래스, NumberFormat 클래스에 대해 소개하겠습니다.
2.1 Collator 클래스
Collator 클래스는 문자열을 비교하고 정렬하는 기능을 제공합니다. 이를 통해 각 언어의 규칙에 따라 문자열을 정렬할 수 있습니다.
다음은 간단한 예시입니다.
const fruits = ['apple', 'Orange', 'banana', 'Pineapple'];
const collator = new Intl.Collator('en', { sensitivity: 'accent' });
console.log(fruits.sort(collator.compare)); // ["apple", "banana", "Orange", "Pineapple"]위 코드에서는 Collator 클래스를 사용하여 fruits 배열의 문자열을 정렬합니다. sensitivity 옵션을 accent로 설정하여 대소문자 및 강세 기호를 구분합니다. 결과는 "apple", "banana", "Orange", "Pineapple"로 정렬됩니다.
2.2 DateTimeFormat 클래스
DateTimeFormat 클래스는 날짜와 시간을 지역화된 형식으로 표현하는 기능을 제공합니다. 이 클래스를 사용하여 날짜와 시간을 사용자의 지역에 맞게 표시할 수 있습니다.
다음은 간단한 예시입니다.
const date = new Date();
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
const formatter = new Intl.DateTimeFormat('en-US', options);
console.log(formatter.format(date)); // "Monday, March 7, 2023"위 코드에서는 DateTimeFormat 클래스를 사용하여 현재 날짜를 "Monday, March 7, 2023"와 같은 형식으로 표현합니다. weekday, year, month, day와 같은 옵션을 설정하여 사용자가 원하는 형식으로 표현할 수 있습니다.
2.3 NumberFormat 클래스
NumberFormat 클래스는 숫자를 사용자의 지역에 맞게 형식화하는 기능을 제공합니다. 이 클래스를 사용하여 숫자를 사용자가 이해하기 쉬운 형태로 표시할 수 있습니다.
다음은 간단한 예시입니다.
const number = 1234567.89;
const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
console.log(formatter.format(number)); // "$1,234,567.89"위 코드에서는 NumberFormat 클래스를 사용하여 1234567.89 숫자를 미국 달러 통화 형태로 표시합니다. 결과는 "$1,234,567.89"로 표시됩니다. style 옵션을 currency로 설정하여 통화 형식으로 표현합니다. currency 옵션을 USD로 설정하여 미국 달러로 표현합니다.
Intl 클래스의 하위 클래스들을 사용하여 JavaScript에서 다국어 지원을 쉽게 구현할 수 있습니다. 각 하위 클래스는 사용자의 지역과 관련된 옵션을 지정하여 사용할 수 있습니다. 이를 통해 사용자가 이해하기 쉬운 형태로 문자열, 날짜, 시간, 숫자 등을 표현할 수 있습니다.
Intl 클래스는 다양한 옵션을 제공하므로, 사용자가 원하는 형태로 데이터를 표현할 수 있습니다. 이를 통해 다국어 지원 기능을 쉽게 구현할 수 있으며, 사용자가 올바른 데이터를 받을 수 있도록 도와줍니다.
다음 섹션에서는 Intl 클래스의 날짜 및 시간 형식 설정, 화폐, 숫자 및 단위 변환 기능에 대해 더 자세히 살펴보겠습니다.
3. 날짜 및 시간 형식 설정하기
Intl 클래스를 사용하면 JavaScript에서 다양한 날짜 및 시간 형식을 지원할 수 있습니다. 이 섹션에서는 DateFormatOptions 객체와 TimeFormatOptions 객체를 사용하여 날짜 및 시간 형식을 설정하는 방법에 대해 소개하겠습니다.
3.1 DateFormatOptions 객체
DateFormatOptions 객체는 날짜 형식을 지정하는 데 사용됩니다. 이 객체는 다음과 같은 속성을 포함합니다.
- weekday: 요일을 표시합니다. 예를 들어, 'long'은 "Monday"와 같이 긴 형식으로 표시하고, 'short'는 "Mon"과 같이 짧은 형식으로 표시합니다.
- year: 년도를 표시합니다. 예를 들어, 'numeric'은 "2023"과 같이 숫자로 표시하고, '2-digit'은 "23"과 같이 두 자리 숫자로 표시합니다.
- month: 월을 표시합니다. 예를 들어, 'long'은 "March"와 같이 긴 형식으로 표시하고, 'short'는 "Mar"과 같이 짧은 형식으로 표시합니다.
- day: 일을 표시합니다. 예를 들어, 'numeric'은 "7"과 같이 숫자로 표시하고, '2-digit'은 "07"과 같이 두 자리 숫자로 표시합니다.
- hour: 시간을 표시합니다. 예를 들어, 'numeric'은 "3"과 같이 숫자로 표시하고, '2-digit'은 "03"과 같이 두 자리 숫자로 표시합니다.
- minute: 분을 표시합니다. 예를 들어, 'numeric'은 "30"과 같이 숫자로 표시하고, '2-digit'은 "30"과 같이 두 자리 숫자로 표시합니다.
- second: 초를 표시합니다. 예를 들어, 'numeric'은 "15"와 같이 숫자로 표시하고, '2-digit'은 "15"와 같이 두 자리 숫자로 표시합니다.
- timeZoneName: 시간대를 표시합니다. 예를 들어, 'long'은 "Pacific Standard Time"와 같이 긴 형식으로 표시하고, 'short'는 "PST"와 같이 짧은 형식으로 표시합니다.
다음은 간단한 예시입니다.
const date = new Date();
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
const formatter = new Intl.DateTimeFormat('en-US', options);
console.log(formatter.format(date)); // "Monday, March 7, 2023"위 코드에서는 DateFormatOptions 객체를 사용하여 현재 날짜를 "Monday, March 7, 2023"와 같은 형식으로 표현합니다. weekday, year, month, day와 같은 옵션을 설정하여 사용자가 원하는 형식으로 표현할 수 있습니다.
3.2 TimeFormatOptions 객체
TimeFormatOptions 객체는 시간 형식을 지정하는 데 사용됩니다. 이 객체는 다음과 같은 속성을 포함합니다.
- hour: 시간을 표시합니다. 예를 들어, 'numeric'은 "3"과 같이 숫자로 표시하고, '2-digit'은 "03"과 같이 두 자리 숫자로 표시합니다.
- minute: 분을 표시합니다. 예를 들어, 'numeric'은 "30"과 같이 숫자로 표시하고, '2-digit'은 "30"과 같이 두 자리 숫자로 표시합니다.
- second: 초를 표시합니다. 예를 들어, 'numeric'은 "15"와 같이 숫자로 표시하고, '2-digit'은 "15"와 같이 두 자리 숫자로 표시합니다.
- timeZoneName: 시간대를 표시합니다. 예를 들어, 'long'은 "Pacific Standard Time"와 같이 긴 형식으로 표시하고, 'short'는 "PST"와 같이 짧은 형식으로 표시합니다.
다음은 간단한 예시입니다.
const date = new Date();
const options = { hour: 'numeric', minute: 'numeric', timeZoneName: 'short' };
const formatter = new Intl.DateTimeFormat('en-US', options);
console.log(formatter.format(date)); // "1:30 AM PST"위 코드에서는 TimeFormatOptions 객체를 사용하여 현재 시간을 "1:30 AM PST"와 같은 형식으로 표현합니다. hour, minute, timeZoneName와 같은 옵션을 설정하여 사용자가 원하는 형식으로 표현할 수 있습니다.
Intl 클래스를 사용하면 사용자의 지역에 따라 날짜 및 시간 형식을 쉽게 지정할 수 있습니다. 이를 통해 다국어 지원 기능을 쉽게 구현할 수 있으며, 사용자가 올바른 데이터를 받을 수 있도록 도와줍니다.
4. 화폐, 숫자 및 단위 변환
Intl 클래스를 사용하면 JavaScript에서 화폐, 숫자 및 단위 변환을 쉽게 구현할 수 있습니다. 이 섹션에서는 CurrencyFormatOptions 객체와 NumberFormatOptions 객체를 사용하여 화폐와 숫자를 형식화하고, UnitFormatOptions 객체를 사용하여 단위를 변환하는 방법에 대해 소개하겠습니다.
4.1 CurrencyFormatOptions 객체
CurrencyFormatOptions 객체는 화폐를 형식화하는 데 사용됩니다. 이 객체는 다음과 같은 속성을 포함합니다.
- style: 화폐 형식을 지정합니다. 예를 들어, 'currency'는 통화 기호와 함께 표시하고, 'accounting'은 통화 기호와 부호를 함께 표시합니다.
- currency: 통화를 지정합니다. 예를 들어, 'USD'는 미국 달러를 의미합니다.
- currencyDisplay: 통화 기호의 위치를 지정합니다. 예를 들어, 'symbol'은 통화 기호를 앞에 표시하고, 'code'는 통화 코드를 앞에 표시합니다.
다음은 간단한 예시입니다.
const number = 1234567.89;
const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
console.log(formatter.format(number)); // "$1,234,567.89"위 코드에서는 CurrencyFormatOptions 객체를 사용하여 1234567.89 숫자를 미국 달러 통화 형태로 표시합니다. 결과는 "$1,234,567.89"로 표시됩니다. style 옵션을 currency로 설정하여 통화 형식으로 표현합니다. currency 옵션을 USD로 설정하여 미국 달러로 표현합니다.
4.2 NumberFormatOptions 객체
NumberFormatOptions 객체는 숫자를 형식화하는 데 사용됩니다. 이 객체는 다음과 같은 속성을 포함합니다.
- style: 숫자 형식을 지정합니다. 예를 들어, 'decimal'은 소수점 이하 숫자를 표시하고, 'percent'는 백분율 형식으로 표시합니다.
- minimumFractionDigits: 소수점 이하 최소 자릿수를 지정합니다. 예를 들어, 2는 "1.00"과 같이 소수점 이하 두 자리까지 표시합니다.
- maximumFractionDigits: 소수점 이하 최대 자릿수를 지정합니다. 예를 들어, 2는 "1.234"와 같이 소수점 이하 두 자리까지 표시합니다.
다음은 간단한 예시입니다.
const number = 0.1234567;
const formatter = new Intl.NumberFormat('en-US', { style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 2 });
console.log(formatter.format(number)); // "12.35%"위 코드에서는 NumberFormatOptions 객체를 사용하여 `0.1234567` 숫자를 백분율 형태로 표시합니다. 결과는 "12.35%"로 표시됩니다. `style` 옵션을 `percent`로 설정하여 백분율 형식으로 표현합니다. `minimumFractionDigits` 옵션을 `2`로 설정하여 소수점 이하 두 자리까지 표시하고, `maximumFractionDigits` 옵션을 `2`로 설정하여 소수점 이하 두 자리까지 표시합니다.
4.3 UnitFormatOptions 객체
UnitFormatOptions 객체는 단위를 변환하는 데 사용됩니다. 이 객체는 다음과 같은 속성을 포함합니다.
- localeMatcher: 사용자 지역과 일치하는 단위를 찾을지, 아니면 사용자가 설정한 단위를 사용할지를 지정합니다.
- usage: 단위 형식의 용도를 지정합니다. 예를 들어, `'unit'`은 일반적인 단위 형식을 지정하고, `'measurement'`은 측정 단위 형식을 지정합니다.
- unit: 변환할 단위를 지정합니다. 예를 들어, `'meter-per-second'`는 초당 미터를 의미합니다.
- unitDisplay: 단위 기호의 위치를 지정합니다. 예를 들어, `'long'`은 단위 이름을 함께 표시하고, `'short'`는 단위 기호만 표시합니다.
다음은 간단한 예시입니다.
const value = 100;
const formatter = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'mile-per-hour' });
console.log(formatter.format(value)); // "100 mph"위 코드에서는 UnitFormatOptions 객체를 사용하여 100 값을 마일당 시간 단위로 표시합니다. 결과는 "100 mph"로 표시됩니다. style 옵션을 unit로 설정하여 단위 형식으로 표현합니다. unit 옵션을 'mile-per-hour'로 설정하여 마일당 시간 단위로 표현합니다.
Intl 클래스를 사용하면 JavaScript에서 화폐, 숫자 및 단위 변환을 쉽게 구현할 수 있습니다. 이를 통해 다국어 지원 기능을 쉽게 구현할 수 있으며, 사용자가 올바른 데이터를 받을 수 있도록 도와줍니다.
5. Intl 클래스를 사용하는 방법
Intl 클래스는 JavaScript에서 다국어 지원 기능을 구현하는 데 사용됩니다. 이 클래스는 다양한 언어와 지역을 지원하며, 날짜, 시간, 화폐, 숫자 및 단위 변환과 같은 다양한 기능을 제공합니다. 이 섹션에서는 Intl 클래스를 사용하는 방법에 대해 소개하겠습니다.
5.1 Intl 클래스의 생성자
Intl 클래스의 생성자는 다음과 같은 형식을 가지고 있습니다.
new Intl.Constructor([locales[, options]])locales 매개변수는 지원할 언어와 지역을 나타내는 문자열 또는 문자열 배열입니다. options 매개변수는 형식화에 사용할 옵션을 나타내는 객체입니다. options 객체는 DateFormatOptions 객체, TimeFormatOptions 객체, CurrencyFormatOptions 객체, NumberFormatOptions 객체, UnitFormatOptions 객체 중 하나를 사용할 수 있습니다.
다음은 예시입니다.
const formatter = new Intl.DateTimeFormat('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
console.log(formatter.format(new Date())); // "Monday, March 7, 2023"위 코드에서는 Intl 클래스의 DateTimeFormat 생성자를 사용하여 날짜와 시간을 형식화합니다. en-US 지역에서 weekday, year, month, day와 같은 옵션을 사용하여 현재 날짜를 "Monday, March 7, 2023"와 같은 형식으로 표시합니다.
5.2 언어와 지역 설정
Intl 클래스는 사용자의 언어와 지역을 지원합니다. locales 매개변수를 사용하여 지역을 설정할 수 있습니다. options 매개변수를 사용하여 형식화에 사용할 옵션을 설정할 수 있습니다.
다음은 예시입니다.
const formatter = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });
console.log(formatter.format(1234.56)); // "1.234,56 €"위 코드에서는 de-DE 지역에서 currency 형식으로 표시합니다. currency 옵션을 EUR로 설정하여 유로화로 표시합니다.
5.3 형식화 기능 사용
Intl 클래스는 다양한 형식화 기능을 제공합니다. DateFormatOptions 객체, TimeFormatOptions 객체, CurrencyFormatOptions 객체, NumberFormatOptions 객체, UnitFormatOptions 객체를 사용하여 다양한 형식으로 날짜, 시간, 화폐, 숫자, 단위를 표시할 수 있습니다.
다음은 예시입니다.
const dateFormatter = new Intl.DateTimeFormat('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
console.log(dateFormatter.format(new Date())); // "Monday, March 7, 2023"
const timeFormatter = new Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: 'numeric' });
console.log(timeFormatter.format(new Date())); // "1:30 AM"
const currencyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
console.log(currencyFormatter.format(1234.56)); // "$1,234.56"
const numberFormatter = new Intl.NumberFormat('en-US', { style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2 });
console.log(numberFormatter.format(1234.56)); // "1,234.56"
const unitFormatter = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'mile-per-hour' });
console.log(unitFormatter.format(100)); // "100 mph"위 코드에서는 Intl 클래스를 사용하여 날짜, 시간, 화폐, 숫자, 단위를 형식화합니다. `DateTimeFormat`, `NumberFormat` 생성자를 사용하여 `dateFormatter`, `timeFormatter`, `currencyFormatter`, `numberFormatter`, `unitFormatter` 변수를 생성합니다. 이 변수들을 사용하여 각각 다양한 형식으로 날짜, 시간, 화폐, 숫자, 단위를 표시합니다.
5.4 다국어 지원
Intl 클래스는 다국어 지원 기능을 제공합니다. 이 기능을 사용하면 사용자의 언어와 지역에 맞는 형식으로 날짜, 시간, 화폐, 숫자, 단위를 표시할 수 있습니다.
다음은 예시입니다.
const dateFormatter = new Intl.DateTimeFormat('ja-JP', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
console.log(dateFormatter.format(new Date())); // "2023年3月7日月曜日"
const timeFormatter = new Intl.DateTimeFormat('ja-JP', { hour: 'numeric', minute: 'numeric' });
console.log(timeFormatter.format(new Date())); // "1:30"
const currencyFormatter = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' });
console.log(currencyFormatter.format(1234.56)); // "¥1,235"
const numberFormatter = new Intl.NumberFormat('ja-JP', { style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2 });
console.log(numberFormatter.format(1234.56)); // "1,234.56"
const unitFormatter = new Intl.NumberFormat('ja-JP', { style: 'unit', unit: 'kilometer-per-hour' });
console.log(unitFormatter.format(100)); // "100 km/h"위 코드에서는 ja-JP 지역에서 DateTimeFormat, NumberFormat 생성자를 사용하여 dateFormatter, timeFormatter, currencyFormatter, numberFormatter, unitFormatter 변수를 생성합니다. 이 변수들을 사용하여 각각 다양한 형식으로 날짜, 시간, 화폐, 숫자, 단위를 표시합니다.
Intl 클래스를 사용하여 다국어 지원 기능을 구현하면 사용자의 언어와 지역에 맞게 데이터를 제공할 수 있습니다. 이를 통해 사용자의 편의성을 높일 수 있습니다.
6. Intl 클래스의 브라우저 지원 여부
Intl 클래스는 ECMAScript Internationalization API Specification에 정의되어 있으며, 모던 브라우저에서 지원됩니다. 다만 구형 브라우저에서는 지원되지 않을 수 있습니다. 구체적으로는 다음과 같은 브라우저에서 지원됩니다.
- Chrome (10 이상)
- Edge (12 이상)
- Firefox (29 이상)
- Internet Explorer (11 이상)
- Opera (12.1 이상)
- Safari (5.1 이상)
이외에도 Node.js와 같은 JavaScript 환경에서도 Intl 클래스를 사용할 수 있습니다. 하지만 Node.js는 브라우저보다 구형 브라우저일 가능성이 높기 때문에 Intl 클래스의 모든 기능을 지원하지 않을 수 있습니다. 따라서 Node.js에서 Intl 클래스를 사용할 때는 주의해야 합니다.
브라우저의 지역 설정에 따라 Intl 클래스의 결과가 달라질 수 있습니다. 브라우저가 제공하는 지역 설정에 맞게 Intl 클래스를 사용하면, 사용자가 사용하는 언어와 지역에 맞게 형식화된 데이터를 제공할 수 있습니다. 따라서, 다국어 지원 기능이 필요한 웹 애플리케이션을 개발할 때는 Intl 클래스를 사용하는 것이 좋습니다.
7. 결론
이 글에서는 JavaScript의 Intl 클래스에 대해 살펴보았습니다. Intl 클래스는 JavaScript에서 다국어 지원 기능을 구현하는 데 사용됩니다. 이 클래스는 날짜, 시간, 화폐, 숫자, 단위 변환과 같은 다양한 기능을 제공하며, 사용자의 언어와 지역에 맞게 데이터를 형식화할 수 있습니다.
이 글에서는 Intl 클래스의 다양한 기능을 소개하였습니다. Intl 클래스의 생성자, 언어와 지역 설정, 형식화 기능 사용, 다국어 지원, 브라우저 지원 여부 등에 대해 알아보았습니다. 이를 통해 다국어 지원 기능이 필요한 웹 애플리케이션을 개발할 때 Intl 클래스를 사용하는 것이 좋다는 것을 알게 되었습니다.
마지막으로, 이 글에서 소개된 내용을 토대로 사용자 경험을 높이는 다국어 지원 기능을 개발하는 데 도움이 되길 바랍니다.
댓글