자바스크립트 Intl API를 활용하여 지역화된 단위 변환하기

10 Nov 2023

intl

자바스크립트 Intl API는 지역화된 기능을 제공하여 언어, 날짜 및 시간, 단위 등을 처리하는 데 도움을 줍니다. 이 중에서도 단위 변환을 다루는 기능을 살펴보도록 하겠습니다.

Intl.NumberFormat

Intl.NumberFormat은 숫자를 특정 지역의 형식에 맞게 포맷팅할 때 사용됩니다. 이 중에서 단위 변환을 위한 기능을 활용해 보겠습니다.

const usNumberFormat = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'mile-per-hour' });
const metricNumberFormat = new Intl.NumberFormat('de-DE', { style: 'unit', unit: 'kilometer-per-hour' });

const speed = 60;
const usSpeed = usNumberFormat.format(speed);
const metricSpeed = metricNumberFormat.format(speed);

console.log(`${speed}mph는 ${usSpeed}입니다.`);
console.log(`${speed}mph는 ${metricSpeed}입니다.`);

위 예제에서는 속도를 mph(마일/시간)로 주어졌을 때, en-US 로케일에서는 mph로 변환하여 표시하고, de-DE 로케일에서는 km/h로 변환하여 표시합니다.

결과:

60mph는 60mph입니다.
60mph는 96.56km/h입니다.

Intl.PluralRules

특정 지역의 규칙에 따라 복수형과 단수형을 처리하기 위해 Intl.PluralRules를 사용할 수 있습니다. 이를 활용하여 단위 변환 시에 자연스러운 복수형을 사용할 수 있습니다.

const usPluralRules = new Intl.PluralRules('en-US');
const metricPluralRules = new Intl.PluralRules('de-DE');

const distance = 5;
const usDistance = usNumberFormat.format(distance);
const metricDistance = metricNumberFormat.format(distance);
const usPlural = usPluralRules.select(distance);
const metricPlural = metricPluralRules.select(distance);

console.log(`${distance} miles는 ${usDistance} ${usPlural}입니다.`);
console.log(`${distance} miles는 ${metricDistance} ${metricPlural}입니다.`);

위 예제에서는 거리를 miles로 주어졌을 때, en-US 로케일에서는 마일 단위와 단수 복수형을 함께 표시하고, de-DE 로케일에서는 kilometer 단위와 단수 복수형을 함께 표시합니다.

결과:

5 miles는 5 miles입니다.
5 miles는 8.05 km입니다.

위의 예제를 통해 자바스크립트의 Intl API를 활용하여 지역화된 단위 변환을 효과적으로 처리할 수 있음을 알 수 있습니다. 이를 통해 다국어 지원이 필요한 웹 애플리케이션에서 세련된 사용자 경험을 제공할 수 있습니다.

더 자세한 정보는 MDN web docs를 참조하세요.

#javascript #intl