Colin's Blog
자바스크립트 Intl API를 사용하여 지역화된 숫자 형식 지정하기

자바스크립트는 다국어 환경에서 숫자를 표시할 때, 각 지역에 맞는 형식으로 보여주어야 합니다. 예를 들어, 미국에서는 천 단위마다 쉼표(,)를 사용하지만, 유럽에서는 점(.)을 사용합니다. 이와 같은 지역화된 숫자 형식을 적용하기 위해서는 자바스크립트의 Intl API를 사용하면 됩니다.

Intl API는 자바스크립트에서 지역화된 기능을 사용할 수 있는 내장 객체입니다. 특히, Intl.NumberFormat 객체를 사용하면 숫자를 형식화할 수 있습니다. 아래는 예시 코드입니다.

// 현재 지역에 맞는 숫자 형식을 사용하여 숫자를 형식화합니다.
const number = 1000;
const formattedNumber = new Intl.NumberFormat().format(number);

console.log(formattedNumber);
// 출력값: "1,000" (미국)
// 출력값: "1.000" (유럽)

위 코드에서 Intl.NumberFormat 객체를 생성하고 format 메서드를 사용하여 숫자를 형식화하였습니다. 이때, NumberFormat 생성자에 언어 및 지역 옵션을 지정하지 않은 경우, 현재 사용자의 브라우저 설정에 따라 형식이 결정됩니다.

만약 특정 지역의 숫자 형식을 사용하고 싶다면, NumberFormat 생성자에 옵션을 전달하여 설정할 수 있습니다. 아래는 미국 지역의 숫자 형식을 사용하는 예시 코드입니다.

const number = 1000;
const options = {
  style: 'decimal',
  useGrouping: true,
  notation: 'standard',
};

const formatter = new Intl.NumberFormat('en-US', options);
const formattedNumber = formatter.format(number);

console.log(formattedNumber);
// 출력값: "1,000"

위 코드에서는 number 변수를 en-US 옵션으로 생성한 NumberFormat 객체를 사용하여 형식화하였습니다. options 객체에 style, useGrouping, notation 등의 옵션을 설정하여 원하는 형식을 지정할 수 있습니다.

자바스크립트 Intl API를 사용하면 다국어 환경에서 숫자를 지역화된 형식으로 표시하는 것이 간단하고 편리합니다. 형식을 지정하여 숫자를 형식화하는 방법을 익히면, 사용자에게 더 직관적이고 친숙한 경험을 제공할 수 있습니다.

참고 자료:

© 2018 Colin. All rights reserved.