[javascript] 자바스크립트 화폐 단위(통화) 표시 (Intl.NumberFormat)

참고: https://www.freecodecamp.org/news/how-to-format-number-as-currency-in-javascript-one-line-of-code/

API나 외부 리소스의 데이터를 받아 쓸 때 일정한 포멧으로 받을 것 입니다. 예를 들어 쇼핑몰을 만들고 있다면 가격에 대한 데이터는 일정한 포멧으로 전달해 줄 것 입니다. 이러한 가격 데이터는 "14340" 이나 다음 배열과 같은 일반적인 숫자일 것 입니다:

const books = [
    {
        "id": 001,
        "name": "Clean Code",
        "price": 10.99,
    },
    {
        "id": 002,
        "name": "Introduction to Algorithms",
        "price": 1199,
    },
    {
        "id": 003,
        "name": "Programming Pearls",
        "price": 1.05,
    },
    {
        "id": 004,
        "name": "Program or Be Programmed",
        "price": 14340,
    }
]

이 숫자를 그대로 애플리케이션에 전달하면 사용자가 숫자의 의미를 이해하기 어렵기 때문에 그냥 넘기지는 않습니다. 하지만 단순히 $같은 통화 표시를 추가하더라도 올바른 위치에 쉼표와 소수점을 추가해야하므로 문제가 해결되지는 않습니다. 가격은 적절한 통화 표시와 함께 올바른 형식으로 출력되기를 원할 것 입니다.

예를 들어 "14340"은 정의된 통화 표시, 로케일, 스타일에 따라 "$14,340.00"(미국 달러), "₹14,340.00"(루피), "€14,340.00"(유로) 등이 됩니다. 이는 JavaScript의 Intl.NumberFormat() 메소드를 사용하여 숫자를 통화로 변환할 수 있습니다.

다음은 간단한 예제입니다:

const price = 14340;

let USDollar = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
});

console.log(`The formated version of ${price} is ${USDollar.format(price)}`);

이 포스트에서는 위의 각 옵션, 기능 및 이 방법을 적절히 사용하여 숫자를 통화형식으로 지정하는 방법을 알아보겠습니다.

Intl.NumberFormat()을 사용하여 숫자를 통화로 변환하는 방법

Intl.NumberFormat() 생성자를 사용하여 통화 포멧팅 같이 로케일에 알맞은 서식을 가지는 Intl.NumberFormat 객체를 만들 수 있습니다. 이 생성자는 매개변수로 locales, options을 받습니다. 둘 다 옵셔널 값 입니다.

new Intl.NumberFormat(locales, options);

// Or

Intl.NumberFormat(locales, options);

Intl.NumberFormat()은 new를 사용하지 않고도 호출할 수 있습니다. 위의 코드 둘 다 새로운 Intl.NumberFormat 인스턴스를 생성합니다. Intl.NumberFormat() 사용 시 로케일이나 옵션을 전달하지 않으면 포멧팅 결과에 쉼표만 지정해줍니다.

const price = 14340;
console.log(new Intl.NumberFormat().format(price));

위의 예제에서는 통화 형식을 지정하지 않았습니다. 이러한 숫자를 통화 형식으로 지정하면 수동으로 화폐 기호를 추가해주지 않아도 적절히 변환해 줍니다.

이제 매개변수 각각에 대해 알아보겠습니다.

첫 번째 매개변수: Locales

locales는 옵셔널 매개변수로 문자열을 받습니다. 이는 특정 지리적, 정치적,  문화적 지역을 나타냅니다. 로케일은 숫자의 형식을 지정할 뿐 통화 형식을 지정하지는 않습니다.

const price = 143450;

console.log(new Intl.NumberFormat('en-US').format(price));
console.log(new Intl.NumberFormat('en-IN').format(price));
console.log(new Intl.NumberFormat('en-DE').format(price));
console.log(new Intl.NumberFormat('ko-KR').format(price));

이제 단순 숫자가 로케일에 따라 지역에 맞게 포멧팅되었습니다. 이제 options 매개변수를 알아보겠습니다.

두 번째 매개변수: Options (style, currency, ...)

이 매개변수가 메인 매개변수이며 이를 사용하여 통화 표시같은 포멧을 적용할 수 있습니다. 이 객체가 가지는 속성은 다음과 같습니다:

• style: 이 속성을 사용하여 원하는 포멧팅 타입을 지정합니다. 타입에는 decimal, currency, percent, unit과 같은 값을 넣을 수 있습니다. 여기서는 currency를 넣겠습니다.
• currency: 이는 "USD", "CAD", "GBP", "KRW" 등의 통화 포멧을 지정합니다. 또한 로케일에 따라 적절한 위치에 통화 기호를 넣어줍니다.

let USDollar = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
});

let pounds = Intl.NumberFormat('en-GB', {
    style: 'currency',
    currency: 'GBP',
});

let euro = Intl.NumberFormat('en-DE', {
    style: 'currency',
    currency: 'EUR',
});

let won = Intl.NumberFormat('ko-KR', {
    style: 'currency',
    currency: 'KRW',
});

console.log('Dollars:', USDollar.format(price));
console.log('Pounds:', pounds.format(price));
console.log('Euro:', euro.format(price));
console.log('Won:', won.format(price));

options의 속성에는 useGrouping 같이 거의 건드리지도 않을 것 같은 속성도 있습니다. 이는 숫자 중간에 콤마 같은 것으로 구분짓는 옵션으로 기본 값은 true 입니다. 이 옵션에 따라 $143,450.00과 같은 결과를 내게 됩니다. 이 옵션을 false로 설정하면 다음과 같은 결과를 얻을 수 있습니다:

const price = 143450;

const euro = Intl.NumberFormat('en-DE', {
    style: 'currency',
    currency: 'EUR',
    useGrouping: false,
});

console.log('Euro:', euro.format(price));

다른 옵션으로 maximumSignificantDigits가 있습니다. 이 속성을 통해 설정한 유효 자릿수를 기준으로 price 변수를 반올림한 결과를 얻을 수 있습니다. 예를 들어 이 속성을 3으로 설정하면 "143,450.00"은 "143,000"이 됩니다:

const pounds = Intl.NumberFormat('en-GB', {
    style: 'currency',
    currency: 'GBP',
    maximumSignificantDigits: 3,
});

console.log('Pounds:', pounds.format(143450));
console.log('Pounds:', pounds.format(143550));

정리

이 포스트에서는 JavaScript를 사용하여 숫자를 통화 형식으로 변환하는 방법을 알아봤습니다. 이제 외부 라이브러리에 의존하지 않고 Intl.NumberFormat을 사용하여 화폐 단위를 지정할 수 있습니다.

관련 글

자바스크립트 console.log() 사용 방법