[JavaScript]금액 포맷 방법

금액 포맷 방법

JavaScript에서 숫자를 금액으로 포맷해야 하는 상황은 자주 발생합니다. 숫자를 금액을 포맷하는 방법으로 개발자가 직접 하드 코딩하거나 정규 표현식(Regex), toLocaleString() 메서드를 사용할 수 있지만, Intl.NumberFormat() 메서드를 사용하여 더 쉽게 포맷할 수 있습니다.

이번 포스팅은 Intl.NumberFormat() 메서드를 사용하여 JavaScript에서 금액을 포맷하는 방법을 소개합니다.

---

Intl.NumberFormat() 메서드

Intl.NumberFormat() 메서드는 기본적으로 PC에 설정된 기본 locale 형식으로 숫자를 포맷합니다. 예를 들어, PC에 설정된 locale이 한국인 경우 세 자리마다 콤마를 찍습니다.

var num = 1000000;

console.log(new Intl.NumberFormat().format(num)); // 1,000,000

Intl.NumberFormat() 생성자 함수는 기본적으로 두 개의 매개변수를 가집니다. 첫 번째 매개변수는 locale이며, 두 번째 매개변수는 추가적인 옵션입니다.

첫 번째 매개변수와 두 번째 매개변수를 생략한 경우 위 예제처럼 PC에 설정된 기본 locale 형식으로 숫자를 포맷합니다.

다음 예제는 Intl.NumberFormat() 생성자 함수의 첫 번째 매개변수에 locale을 설정합니다.

const price = 1234567.15;

var dollarUSLocale = Intl.NumberFormat('en-US'); 
var dollarIndianLocale = Intl.NumberFormat('en-IN');
var dollarPolandLocale = Intl.NumberFormat('pl-PL');
var dollarIndianTamilLocale = Intl.NumberFormat('ta-IN');

console.log('en-US: ' + dollarUSLocale.format(price));
// en-US: 1,234,567.15

console.log('en-IN: ' + dollarIndianLocale.format(price));
// en-IN: 12,34,567.15

console.log('pl-PL: ' + dollarPolandLocale.format(price));
// pl-PL: 1 234 567,15

console.log('ta-IN: ' + dollarIndianTamilLocale.format(price));
// ta-IN: 12,34,567.15

첫 번째 매개변수인 locale을 설정함으로써 나라별 표기법에 따라 숫자를 표시할 수 있습니다. Intl.NumberFormat() 메서드는 위 예제처럼 숫자를 나라별 형식에 맞게 표시하며, 포맷 형식에 대해 추가적인 옵션을 설정하고 싶은 경우 두 번째 매개변수를 활용합니다.

참고로 두 번째 매개변수는 객체 형식이며, 네 개의 프로퍼티를 가지고 있습니다.

---

style 프로퍼티

style 프로퍼티에는 나라별 포맷 형식을 설정할 수 있습니다.

값	설명
decimal	10진수
currency	화폐
unit	미터법 또는 영국식 단위

이번 포스팅은 금액을 포맷하는 방법에 대해 설명하므로 currency에 대해서만 다룰 것이며, style 프로퍼티를 currency로 설정한 경우 currency 프로퍼티도 설정해야 합니다.

---

currency 프로퍼티

currency 프로퍼티에는 화폐 표시 방법을 설정합니다.

다음 예제는 숫자를 미국식으로 포맷하며, 포맷 형식을 달러(USD) 화폐(currency)로 설정합니다.

const price = 1234567.15;
var dollarUSLocale = Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'}); 

console.log('en-US: ' + dollarUSLocale.format(price)); 
// en-US: $1,234,567.15

---

useGrouping 프로퍼티

Intl.NumberFormat() 메서드는 숫자의 자릿수를 설정된 나라에 따라 띄어쓰기 또는 콤마(,)로 구분합니다.

다음 예제를 통해 숫자를 띄어쓰기 또는 콤마(,)로 구분하는 것을 확인할 수 있습니다.

const price = 1234567.15;

var dollarUSLocale = Intl.NumberFormat('en-US'); 
var dollarIndianLocale = Intl.NumberFormat('en-IN');
var dollarPolandLocale = Intl.NumberFormat('pl-PL');
var dollarIndianTamilLocale = Intl.NumberFormat('ta-IN');

// 콤마(,)로 구분합니다.
console.log('en-US: ' + dollarUSLocale.format(price));
// en-US: 1,234,567.15

// 콤마(,)로 구분합니다.
console.log('en-IN: ' + dollarIndianLocale.format(price));
// en-IN: 12,34,567.15

// 띄어쓰기로 구분합니다.
console.log('pl-PL: ' + dollarPolandLocale.format(price));
// pl-PL: 1 234 567,15

// 콤마(,)로 구분합니다.
console.log('ta-IN: ' + dollarIndianTamilLocale.format(price));
// ta-IN: 12,34,567.15

useGrouping 프로퍼티를 false로 설정하면, 구분자를 제거합니다.

const price = 1234567.15;

var dollarUSLocale = Intl.NumberFormat('en-US', {useGrouping: false}); 
var dollarIndianLocale = Intl.NumberFormat('en-IN', {useGrouping: false});
var dollarPolandLocale = Intl.NumberFormat('pl-PL', {useGrouping: false});
var dollarIndianTamilLocale = Intl.NumberFormat('ta-IN', {useGrouping: false});

console.log('en-US: ' + dollarUSLocale.format(price));
// en-US: 1234567.15

console.log('en-IN: ' + dollarIndianLocale.format(price));
// en-IN: 1234567.15

console.log('pl-PL: ' + dollarPolandLocale.format(price));
// pl-PL: 1234567,15

console.log('ta-IN: ' + dollarIndianTamilLocale.format(price));
// ta-IN: 1234567.15

즉, useGrouping 프로퍼티는 구분자 표시 여부입니다.

---

maximumSignificantDigits 프로퍼티

maximumSignificantDigits 프로퍼티는 유효한 숫자를 표시하기 위해 설정할 수 있는 프로퍼티입니다. 좀 더 쉽게 설명하자면, "몇 자리까지 반올림할 것인가?"를 설정하는 프로퍼티입니다.

maxiumSignificantDigits 프로퍼티의 값을 다르게 설정하여 동일한 숫자를 다르게 표시합니다.

const price = 123456.15;

console.log(Intl.NumberFormat('en-US', {maximumSignificantDigits:1}).format(price));
// 100,000

console.log(Intl.NumberFormat('en-US', {maximumSignificantDigits:2}).format(price));
// 120,000

console.log(Intl.NumberFormat('en-US', {maximumSignificantDigits:3}).format(price));
// 123,000

console.log(Intl.NumberFormat('en-US', {maximumSignificantDigits:4}).format(price));
// 123,500

console.log(Intl.NumberFormat('en-US', {maximumSignificantDigits:5}).format(price));
// 123,460

console.log(Intl.NumberFormat('en-US', {maximumSignificantDigits:6}).format(price));
// 123,456

console.log(Intl.NumberFormat('en-US', {maximumSignificantDigits:7}).format(price));
// 123,456.2

console.log(Intl.NumberFormat('en-US', {maximumSignificantDigits:8}).format(price));
// 123,456.15