Colin's Blog
자바스크립트 Intl API를 이용하여 지역화된 숫자 표시하기

지역화된 숫자 표시는 웹 애플리케이션에서 국가 또는 지역에 따라 숫자를 다르게 표현하는 것을 의미합니다. 이를 위해 자바스크립트는 Intl API를 제공합니다. Intl API는 숫자, 날짜, 통화 및 언어 관련 정보를 처리하는 다양한 기능을 제공하는 국제화 API입니다.

Intl API를 사용하여 지역화된 숫자를 표시하려면 다음과 같은 단계를 따를 수 있습니다.

1. 숫자 형식 지정

Intl.NumberFormat 객체를 사용하여 원하는 숫자 형식을 지정합니다. 이 객체는 숫자를 서식화하기 위해 사용되며, 형식을 지정하는 다양한 옵션을 제공합니다.

// 한국 형식의 숫자를 표시하는 Intl.NumberFormat 객체 생성
const formatter = new Intl.NumberFormat('ko-KR');

// 숫자 형식 지정
const number = 1234567.89;
const formattedNumber = formatter.format(number);

console.log(formattedNumber); // 1,234,567.89

위의 예제에서는 한국 형식의 숫자를 표시하기 위해 ‘ko-KR’로 Locale을 설정하고, NumberFormat 객체를 생성합니다. 그리고 format() 함수를 사용하여 숫자를 형식에 맞게 표시합니다.

2. 다양한 숫자 형식 사용

Intl API는 다양한 숫자 형식을 지원합니다. 예를 들어 숫자를 통화로 표시하거나 소수점 이하 자릿수를 지정할 수 있습니다.

콤마로 구분된 숫자

const number1 = 1234567.89;
const formatter1 = new Intl.NumberFormat('en-US');
const formattedNumber1 = formatter1.format(number1);

console.log(formattedNumber1); // 1,234,567.89

통화로 표시된 숫자

const number2 = 1234567.89;
const formatter2 = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});
const formattedNumber2 = formatter2.format(number2);

console.log(formattedNumber2); // $1,234,567.89

소수점 이하 자릿수 제한

const number3 = 1234567.89;
const formatter3 = new Intl.NumberFormat('en-US', {
  maximumFractionDigits: 2
});
const formattedNumber3 = formatter3.format(number3);

console.log(formattedNumber3); // 1,234,567.89

위의 예제에서는 각각 콤마로 구분된 숫자, 통화로 표시된 숫자 및 소수점 이하 자릿수 제한이 적용된 숫자를 표시하는 방법을 보여줍니다.

Intl API를 사용하여 자바스크립트에서 지역화된 숫자를 표시할 수 있습니다. 이를 통해 사용자의 지역에 맞게 숫자를 표시하여 사용성을 향상시킬 수 있습니다.

더 많은 정보와 옵션에 대해서는 JavaScript 공식 문서를 참고하세요.

참고 자료:

#javascript #intl

© 2018 Colin. All rights reserved.