지역화는 웹 애플리케이션에서 중요한 요소입니다. 사용자가 서로 다른 언어와 문화권에서 앱을 사용할 때, 숫자 서식을 해당 지역에 맞게 표시하는 것은 매우 중요합니다. 자바스크립트에서는 Intl API를 사용하여 이러한 지역화된 숫자 서식을 손쉽게 처리할 수 있습니다.

Intl.NumberFormat 객체

Intl API에서는 지역화된 숫자 서식을 처리하기 위해 Intl.NumberFormat 객체를 제공합니다. 이 객체는 다양한 옵션을 제공하여 숫자를 지정된 지역에 맞게 서식화할 수 있습니다.

const number = 123456.789;

const formatter = new Intl.NumberFormat('en-US', {
  style: 'decimal',
  maximumFractionDigits: 2,
});

console.log(formatter.format(number));
// Output: 123,456.79

위의 예제에서는 Intl.NumberFormat 생성자 함수를 사용하여 en-US 지역에 맞게 숫자를 서식화하고 있습니다. style 옵션을 decimal로 설정하여 소수점 이하의 숫자를 표시하고, maximumFractionDigits 옵션을 2로 설정하여 최대 소수점 자리수를 지정했습니다. format 메서드를 사용하여 숫자를 서식화하고, 결과를 콘솔에 출력합니다.

다른 지역의 숫자 서식 처리하기

위의 예제에서는 en-US 지역을 사용했지만, 다른 지역의 숫자를 서식화할 수도 있습니다. 각 국가의 지역 코드를 사용하여 원하는 지역을 설정할 수 있습니다.

const number = 123456.789;

const formatter = new Intl.NumberFormat('ko-KR', {
  style: 'decimal',
  maximumFractionDigits: 2,
});

console.log(formatter.format(number));
// Output: 123,456.79

위의 예제에서는 ko-KR 지역에 맞게 숫자를 서식화하고 있습니다. 결과는 123,456.79로 표시됩니다.

기타 옵션

Intl.NumberFormat 객체는 다양한 옵션을 제공하여 숫자 서식화를 더욱 설정할 수 있습니다. 몇 가지 예시를 살펴보겠습니다.

• minimumFractionDigits: 최소 소수점 자리수를 지정합니다. 입력된 숫자의 소수점 이하 자리수가 이 값보다 작을 경우, 0으로 채워집니다.
• grouping 또는 useGrouping: 천 단위로 구분 기호를 표시할지 여부를 설정합니다.
• currency: 통화 서식을 지정합니다.

더 많은 옵션과 사용 예제는 MDN web docs에서 확인할 수 있습니다.

결론

지역화된 숫자 서식 처리는 웹 애플리케이션에서 중요한 요소입니다. 자바스크립트의 Intl API를 사용하면 손쉽게 숫자를 지정된 지역에 맞게 서식화할 수 있습니다. 다양한 옵션을 설정하여 숫자의 소수점 자리수, 천 단위 구분 기호 등을 조절할 수 있습니다. 이를 통해 사용자가 숫자를 더욱 쉽게 이해하고 편리하게 사용할 수 있습니다.

#javascript #internationalization