JavaScript에서 숫자를 통화 형식으로 지정하는 방법

숫자를 통화 형식으로 지정하는 프로세스는 지루한 작업이 될 수 있습니다. 작은 작업처럼 느껴지지만 국제화 및 다양한 서식 표준과 같은 요소를 고려할 때 줄 수와 엣지 케이스가 계속 증가할 수 있습니다. 운 좋게도 ES2015는 숫자를 통화 형식으로 지정하는 프로세스를 매우 쉽게 만들 수 있는 국제화 API를 도입했습니다.

우리만의 포매팅 함수 작성하기

이를 위해 해키 기능을 확실히 구성할 수 있습니다. 그렇죠?

let formatCurrency = (val, currency) => {
    let val;    
    switch (currency) {
        case 'USD':
            val = `$ ${val}`;
            break;
        case 'EUR':
            val = `€ ${val}`;
            break;
        default:
            throw new Error('Unknown currency format');
    }
    return val;
}

하지만 100달러와 같은 서식을 처리하고 싶은데 1000은 1,000달러로 표시되어야 한다면 어떻게 될까요? Regex 마법을 사용해 볼까요?

let formatCurrency = (val, currency) => {
  let currencyVal = val.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'); 
  switch (currency) {
        case 'USD':
            val = `$ ${currencyVal}`;
            break;
        case 'EUR':
            val = `€ ${currencyVal}`;
            break;
        default:
            throw new Error('Unknown currency format');
    }
    return val;
}


console.log(formatCurrency(1000,'USD'));
// "$ 1,000.00"

이 접근 방식의 과제는 다음과 같습니다.

많은 통화가 있습니다(~300)

.

일부 통화는 천 단위 구분 기호로 ',' 대신 '.'을 사용합니다

.

이러한 통화는 단계 구분 기호로 ','를 사용합니다.
"$ 1000.05"는 독일 유로로 "€ 1.000,05"가 됩니다

.

일부 통화에는 사용자 정의 위치에 천 단위 구분 기호가 있습니다.
1000000은 $1,000,000.00″ 대신 ₹10,00,000.00″입니다

.

등등. 우리는 모든 통화와 모든 브라우저에서 테스트하고 싶지 않습니다.

로케일 문자열을 사용하여 서식 지정(더 나은 방법)

ES2015 및 국제화 API 이전에는 로케일 및 문자열 형식을 사용하여 숫자를 통화 형식으로 지정할 수 있었습니다. 로케일은 개발자가 다음과 같은 지역별 속성을 지정할 수 있도록 하는 매개변수 모음입니다.

통화 형식

날짜-시간 형식

평일형식

숫자 형식

측정 단위

    const cashBalance = 10000; // 🤑

    console.log(
      cashBalance.toLocaleString('en-US',
        {style: 'currency', currency: 'USD'}
      )
    ); // '$10,000.00'

이것은 잘 작동하며 ECMAScript 국제화 API가 등장하기 전에 권장되는 방법이었습니다. 그러나 일부(오래된) 브라우저는 매개변수로 지정된 로케일 대신 시스템 로케일을 사용합니다. 또한 toLocaleString은 일반적으로 문자열 조작을 위한 방법이므로 성능이 좋은 옵션이 아닙니다. 따라서 Intl.NumberFormat 사양이 도입되었으며 JavaScript에서 숫자를 통화 형식으로 지정하는 데 선호되는 방법입니다.

Intl.NumberFormat을 사용하여 숫자를 통화 형식으로 지정

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

첫 번째 매개변수는 언어 및 지역 설정을 나타내는 로케일 문자열입니다. 언어 코드와 국가 코드로 구성됩니다.

en-US: 영어 +미국
de-DE: 독일어 + 독일
en-IN: 영어 + 인도

options 매개변수에는 수많은 옵션이 있습니다. 하지만 이 게시물에서는 스타일, 통화 및 최소 분수 숫자를 고수할 것입니다.

이 게시물은 통화에 관한 것이므로 스타일을 통화로 사용합니다. 다른 가능한 값에는 십진수와 백분율이 포함됩니다.

language codes , country codes 및 list of currencies 에 대한 자세한 내용은 이 링크를 확인하십시오.

최소 분수 자릿수는 서식을 지정하는 동안 포함할 최소 소수 자릿수를 나타냅니다.

함께 모아서:

const usDollar = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2
})

const rupeeIndian = Intl.NumberFormat("en-IN", {
    style: "currency",
    currency: "INR",
    minimumFractionDigits: 2
});

const euroGerman = Intl.NumberFormat("de-DE", {
    style: "currency",
    currency: "EUR",
    minimumFractionDigits: 2
});

const price = 1000000.0535;

console.log(usDollar.format(price)); // $1,000,000.05

console.log(rupeeIndian.format(price)); // ₹10,00,000.05

console.log(euroGerman.format(price)); // 1.000.000,05 €

다음은 국제화 API를 사용해야 하는지 여부를 직접 확인하려는 경우 브라우저 호환성입니다.



이것이 ECMAScript를 사용하여 숫자를 통화 형식으로 지정하는 방법에 대해 알아야 할 전부입니다. 질문이 있으시면 아래에 의견을 남겨주십시오.

2021년 3월 5일 https://www.wisdomgeek.com에 처음 게시되었습니다.