Intl API는 국제화된 텍스트, 숫자, 날짜 및 통화의 서식 지정 및 조작을 간소화합니다. 로케일(locale)에 따라 다양한 데이터 형식을 처리할 수 있습니다.
이 API는 다양한 문화와 언어에 맞게 데이터 서식을 지정하는 문제를 해결합니다. 특정 지역에 적합한 날짜 형식을 사용하여 적절한 통화 기호 또는 날짜로 숫자의 서식을 쉽게 지정할 수 있습니다.
Intl API를 사용하면 다양한 지역과 문화권의 잠재고객이 접근하고 쉽게 사용할 수 있는 웹 애플리케이션을 만들 수 있습니다.
사용자 로캘 가져오기
Intl API에서 제공하는 JavaScript 생성자는 익숙한 패턴에 따라 날짜, 텍스트, 숫자 등의 서식을 지정하는 데 사용할 로캘을 식별합니다. 각 생성자는 로캘 옵션 객체를 인수로 사용합니다. 생성자는 이러한 인수를 사용하여 요청된 로캘을 현재 지원하는 로캘과 비교하여 일치시킵니다.
사용자의 로캘을 가져오려면 navigator.language 속성을 사용할 수 있습니다. 이 속성은 브라우저의 언어 버전을 나타내는 문자열을 반환합니다.
navigator.language 속성의 값은 언어 코드와 선택적으로 지역 코드 및 기타 하위 태그로 구성되는 BCP 47 언어 태그입니다. 예를 들어 “en-US”는 미국에서 사용되는 영어를 나타냅니다.
navigator.languages 속성을 사용하여 우선순위에 따라 정렬된 사용자의 기본 설정 언어 배열을 가져올 수도 있습니다. 배열의 첫 번째 항목은 사용자의 기본 언어 기본 설정을 나타냅니다.
사용자의 로캘을 가져온 후에는 Intl API를 사용하여 애플리케이션의 날짜, 시간, 숫자 및 통화 표시를 사용자 지정할 수 있습니다.
사용자의 로캘을 가져오는 데 도움이 되는 간단한 JavaScript 함수를 만들 수 있습니다. 다음은 도움이 될 수 있는 코드 스니펫입니다:
const getUserLocale = () => {
if (navigator.languages && navigator.languages.length) {
return navigator.languages[0];
}
return navigator.language;
};
console.log(getUserLocale());
This getUserLocale 함수는 내비게이터의 첫 번째 요소를 반환합니다. 언어 속성을 사용할 수 있는 경우 반환합니다. 그렇지 않으면 이전 브라우저에서 사용자가 선호하는 언어를 나타내는 navigator.language 속성으로 되돌아갑니다.
다른 로캘에 대한 날짜 서식 지정하기
Intl API를 사용하여 날짜 서식을 지정하려면 Intl.DateTimeFormat() 생성자를 사용할 수 있습니다. 이 생성자는 로캘 문자열과 옵션 객체라는 두 가지 인수를 받습니다.
옵션 개체에는 날짜 서식을 제어하는 속성이 포함될 수 있습니다.
일반적으로 사용되는 옵션에는 다음이 포함됩니다:
⭐ weekday : 이 옵션은 요일 형식을 지정합니다. long (Friday), short (Fri) 또는 narrow (F) 중 하나로 설정할 수 있습니다.
⭐ year : 이 옵션은 연도 형식을 지정합니다. numeric (2023) 또는 2-digit (23) 중 하나로 설정할 수 있습니다.
⭐ 월 : 이 옵션은 월의 형식을 지정합니다. numeric (3), 2-digit (03), long (March), short (Mar) 또는 narrow (M) 중 하나로 설정할 수 있습니다.
⭐ 일 : 이 옵션은 요일 형식을 지정합니다. numeric (2) 또는 2-digit (02) 중 하나로 설정할 수 있습니다.
다음은 Intl.DateTimeFormat() 생성자를 사용하여 날짜 서식을 지정하는 방법을 보여주는 예제입니다.
const date = Date.now()
const locale = getUserLocale();
const options = {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
};
const formatter = new Intl.DateTimeFormat(locale, options);
// weekday, month date, year (Friday, March 24, 2023)
console.log(formatter.format(date));이 코드는 사용자의 로캘을 Intl.DateTimeFormat() 에 옵션 세트와 함께 전달하여 포맷터 객체를 설정합니다. 그런 다음 포맷터를 사용하여 현재 날짜를 문자열로 변환합니다. 옵션 개체에는 날짜의 서식을 제어하는 속성이 포함되어 있습니다.
다른 유형의 숫자 서식 지정
Intl API를 사용하여 Intl.NumberFormat() 생성자를 사용하여 숫자 서식을 지정할 수 있습니다. Intl.DateTimeFormat() 과 마찬가지로 이 생성자는 로캘 문자열과 옵션 개체를 인수로 받습니다.
옵션 객체에는 숫자의 서식을 제어하는 속성이 포함되어 있습니다. 이러한 속성은 지정된 스타일 숫자에 따라 달라집니다.
소수점 및 백분율 서식 지정
Intl을 사용하여 숫자의 서식을 소수점 및 백분율로 지정할 수 있습니다. NumberFormat() 생성자에서 스타일 속성을 소수점 소수점 퍼센트 백분율.
다음은 소수점 서식을 지정하는 방법을 보여주는 예입니다.
const num = 123456;
const locale = getUserLocale(); // en-US
const options = {
style: "decimal",
minimumFractionDigits: 2,
maximumFractionDigits: 2,
useGrouping: true,
};
const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(num)); // 123,456.00
위의 코드 블록은 그룹 구분 기호( , )와 소수점 이하 두 자리를 사용하여 123,456을 소수점으로 형식화합니다.
다음은 백분율 서식을 지정하는 방법을 보여주는 예입니다.
const num = 123456;
const locale = getUserLocale();
const options = {
style: "percent",
useGrouping: true,
};
const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(num)); // 12,345,600%
위의 코드 블록은 그룹 구분 기호를 사용하여 123,456을 백분율로 표현합니다.
통화 서식 지정
스타일 속성을 통화 으로 설정하여 숫자를 통화로 서식을 지정할 수 있습니다. 다음과 같은 다른 옵션도 함께 설정해야 합니다:
⭐ currency(통화) : 서식에 사용할 ISO 4217 통화 코드(예: “USD”, “EUR” 또는 “JPY”)를 나타내는 문자열입니다. 이 옵션을 제공하지 않으면 포맷터가 사용자의 로캘에 따라 통화 코드를 선택합니다.
⭐ currencyDisplay : 이 속성은 브라우저에서 통화를 표시하는 방법을 지정합니다. symbol (US$ 75), code (USD 75) 또는 name (75 US dollars) 중 하나일 수 있습니다.
다음은 통화 서식을 지정하는 방법을 보여주는 예입니다.
const num = 123456;
const locale = getUserLocale(); // en-US
const options = {
style: "currency",
currency: "USD",
currencyDisplay: "code",
};
const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(num)); // USD 123,456.00
위의 코드 블록은 123,456을 통화(USD)로 형식화합니다.
단위 서식 지정
Intl.NumberFormat() 생성자를 사용하여 길이, 부피, 질량 등의 단위가 있는 숫자의 서식을 지정할 수 있습니다. 스타일 을 단위 로 설정하여 이 작업을 수행하면 됩니다. 스타일을 단위로 설정할 때는 이러한 옵션을 지정해야 합니다:
⭐ unit(단위) : 이 속성은 “미터”, “킬로그램”, “리터”, “초” 등과 같이 서식에 사용할 단위를 지정합니다.
⭐ unitDisplay : 이 속성은 브라우저에서 단위를 표시하는 방법을 지정합니다. long (10 liters), short (10 L) 또는 narrow (10l) 중 하나로 설정할 수 있습니다.
다음은 단위 서식을 지정하는 방법을 보여주는 예입니다.
const num = 123456;
const locale = getUserLocale();
const options = {
style: "unit",
unit: "liter",
unitDisplay: "long",
};
const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(num)); //123,456 liters
위의 코드 블록은 숫자 123,456을 리터 단위로 형식화합니다.
Intl API의 대안
Intl API는 JavaScript 애플리케이션에서 날짜, 숫자, 통화 및 단위의 서식을 지정하는 강력하고 유연한 도구 세트를 제공합니다. 다양한 로케일을 지원하며 다양한 문화와 언어에 걸쳐 일관된 데이터 서식 지정 방법을 제공합니다.
Intl에 대한 브라우저 지원이 제한되어 있으므로 Luxon 또는 Day.js와 같은 대체 라이브러리를 사용하는 것이 좋습니다. 궁극적으로 Intl API와 대체 라이브러리 중 하나를 결정하는 것은 프로젝트의 특정 요구 사항과 제약 조건에 따라 달라집니다.