다국어 지원은 현대 웹 애플리케이션에서 중요한 요소입니다. 사용자가 여러 언어로 웹 사이트를 이용할 수 있게 하려면 다국어 표현식을 처리할 수 있는 방법이 필요합니다. 자바스크립트의 Intl API는 다국어 표현식 처리를 위한 강력한 기능을 제공합니다.
Intl API 개요
Intl API는 Internationalization API로 다국어 처리와 관련된 기능을 제공하는 내장 JavaScript API입니다. 이 API를 사용하면 숫자, 날짜, 통화 및 메시지의 다국어 표현식을 간편하게 처리할 수 있습니다. 자바스크립트에서 웹 페이지에 사용되는 텍스트를 동적으로 다국어로 변환하려면 이 API를 사용하면 됩니다.
다국어 표현식 처리 예시
숫자 다국어 표현식 처리
const number = 1000;
const formatter = new Intl.NumberFormat('en-US');
console.log(formatter.format(number));
// Output: 1,000
const formatterDE = new Intl.NumberFormat('de-DE');
console.log(formatterDE.format(number));
// Output: 1.000
위의 예시에서, Intl.NumberFormat 생성자를 사용하여 숫자를 다국어 형식으로 변환합니다. 'en-US'는 미국 영어 형식으로, 'de-DE'는 독일어 형식으로 설정됩니다. format 메소드를 사용하여 숫자를 지정된 형식으로 변환하고 출력할 수 있습니다.
날짜 다국어 표현식 처리
const date = new Date();
const options = { year: 'numeric', month: 'long', day: 'numeric' };
const formatter = new Intl.DateTimeFormat('en-US', options);
console.log(formatter.format(date));
// Output: December 17, 2022
const formatterDE = new Intl.DateTimeFormat('de-DE', options);
console.log(formatterDE.format(date));
// Output: 17. Dezember 2022
위의 예시에서, Intl.DateTimeFormat 생성자를 사용하여 날짜를 다국어 형식으로 변환합니다. 위의 예시에서는 현재 날짜를 사용하고, 형식 옵션은 year, month, day를 설정합니다. format 메소드를 사용하여 날짜를 지정된 형식으로 변환하고 출력할 수 있습니다.
통화 다국어 표현식 처리
const amount = 1000;
const currency = 'USD';
const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency });
console.log(formatter.format(amount));
// Output: $1,000
const formatterDE = new Intl.NumberFormat('de-DE', { style: 'currency', currency });
console.log(formatterDE.format(amount));
// Output: 1.000,00 $
const formatterJP = new Intl.NumberFormat('ja-JP', { style: 'currency', currency });
console.log(formatterJP.format(amount));
// Output: $1,000
Intl.NumberFormat 생성자를 사용하여 통화를 다국어 형식으로 변환합니다. 위의 예시에서는 currency 매개변수에 통화 코드('USD')를 전달합니다. style 옵션을 'currency'로 설정하여 통화 형식으로 변환합니다.
결론
Intl API를 사용하면 자바스크립트에서 간편하게 다국어 표현식을 처리할 수 있습니다. 숫자, 날짜, 통화 등의 값을 각 언어의 형식에 맞게 변환하여 다국어 사용자에게 더욱 높은 사용자 경험을 제공할 수 있습니다. 자세한 내용은 MDN web docs를 참조하세요.
#다국어 #자바스크립트