JavaScript 통화 형식 지정하기: Intl.NumberFormat 활용 가이드

JavaScript에서 Intl.NumberFormat() 메서드는 숫자를 원하는 통화 형식으로 표현할 때 사용하는 강력한 도구입니다. 이 메서드는 생성자(constructor)로 동작하며, style 속성을 통해 통화 서식을 지정할 수 있습니다.

이 글에서는 Intl.NumberFormat()을 활용해 통화 형식을 지정하는 방법을 예제 코드와 함께 자세히 살펴보겠습니다.

생성자와 매개변수 이해하기

new Intl.NumberFormat([locales[, options]])

Intl.NumberFormat()은 생성자이므로, 특수한 숫자 포맷팅 기능을 가진 객체를 만들기 위해 반드시 JavaScript의 new 키워드와 함께 호출해야 합니다.

이 생성자는 두 개의 선택적 매개변수인 locales와 options를 받습니다. locales에는 인터넷 언어 태그 표준인 BCP 47 형식의 문자열이 들어갑니다. 예를 들어 미국 영어라면 'en-US', 브라질 포르투갈어라면 'pt-BR' 태그를 사용하면 됩니다.

options는 총 17가지 속성을 가질 수 있지만, 이 글에서는 그중 세 가지에 집중합니다. 바로 통화와 함께 사용되는 style, 그리고 currencyDisplay, currencySign입니다.

예제 코드

const money = 85000.50
 
// 브라질 헤알(BRL)
console.log(new Intl.NumberFormat('pt-BR', {style: 'currency', currency: 'BRL'}).format(money))
// 출력: R$85,000.50
 
// 미국 달러(USD)
console.log(new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'}).format(money))
// 출력: $85,000.50
 
// 일본 엔(JPY)
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(money));
// 출력: ¥85,001

위 예제 코드에서 눈여겨볼 점은, 새 객체를 생성한 후 format() 메서드에 money 변수를 전달했다는 것입니다. 이렇게 하면 매개변수로 넘긴 설정값에 따라 통화가 원하는 형식으로 변환됩니다.

출력 결과를 보면 단순히 통화 기호만 붙는 것이 아니라 각 국가에 맞는 올바른 숫자 형식까지 적용됩니다. 특히 일본 엔의 경우 소수점 이하 단위(센트)를 사용하지 않기 때문에 값이 의도적으로 반올림된 것을 확인할 수 있습니다.

currencyDisplay와 currencySign

통화 형식 지정 시 options 매개변수에서 자주 사용되는 또 다른 속성으로 currencyDisplay와 currencySign이 있습니다.

currencyDisplay는 symbol, narrowSymbol, code, name 같은 값을 통해 통화를 다양한 형태로 표시합니다.

let money = 85000.50;
 
const symbol = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
}).format(money);
 
const narrowSymbol = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'narrowSymbol'
}).format(money);
 
const code = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'code'
}).format(money);
 
const name = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
}).format(money);
 
console.log(symbol) 
// $85,000.50
console.log(narrowSymbol)
// US$85,000.50이 아닌 $85,000.50으로 출력
console.log(code)
// USD 85,000.50
console.log(name)
// 85,000.50 US dollars

반면 currencySign은 음수를 표현할 때 마이너스(-) 기호를 붙이는 대신 숫자를 괄호로 감쌉니다. 이는 회계 처리 방식에서 주로 사용되며, 기본값이 'standard'로 설정되어 있으므로 해당 옵션을 직접 변경해야 합니다.

let money = -8500.50;
 
const accounting = new Intl.NumberFormat('en-US', {
  style: 'currency', 
  currency: 'USD',
  currencySign: 'accounting' 
}).format(money);
 
console.log(accounting)
// ($8,500.50)

마무리

Intl.NumberFormat() 메서드는 생성자로서, 그중에서도 style 속성을 통해 통화 형식을 지정하는 데 활용됩니다. 여기에 format() 메서드를 함께 사용하면 국가별 통화 기호와 숫자 형식을 손쉽게 원하는 대로 표시할 수 있습니다. 국제화(i18n)가 필요한 웹 애플리케이션을 개발할 때 꼭 기억해 두면 유용한 기능입니다.