로케일별 통화 기호로 금액을 형식화하는 방법

소개

통화 기호는 가격이 어떤 통화를 나타내는지 식별합니다. 달러 기호는 미국 달러를, 유로 기호는 유로를, 파운드 기호는 영국 파운드를 나타냅니다. 이러한 기호는 사용자가 어떤 통화를 보거나 사용하고 있는지 알아야 하기 때문에 국제 애플리케이션에 필수적입니다.

국가마다 통화 금액을 다르게 표시합니다. 미국인은 $1,234.56처럼 기호를 금액 앞에 씁니다. 독일인은 1.234,56 €처럼 기호를 금액 뒤에 쓰고 다른 구분 기호를 사용합니다. 프랑스 형식은 1 234,56 €처럼 숫자 그룹 사이에 공백을 사용합니다. "$" + amount처럼 통화 형식을 하드코딩하면 모든 사용자가 동일한 규칙을 따른다고 가정하게 됩니다.

JavaScript는 Intl.NumberFormat API를 제공하여 로케일에 적합한 기호와 규칙으로 통화 금액을 형식화합니다. 이 레슨에서는 통화 형식이 로케일에 따라 어떻게 달라지는지, 그리고 모든 언어나 지역에 맞게 가격을 올바르게 형식화하는 방법을 설명합니다.

통화 기호는 로케일에 따라 다릅니다

통화마다 다른 기호를 사용합니다. 미국 달러는 $를, 유로는 €를, 영국 파운드는 £를, 일본 엔은 ¥를, 스위스 프랑은 상황에 따라 Fr. 또는 CHF를 사용합니다. 각 기호는 사용자가 어떤 통화를 보고 있는지 빠르게 식별하는 데 도움을 줍니다.

일부 기호는 여러 통화를 나타냅니다. 달러 기호 $는 미국 달러, 캐나다 달러, 호주 달러, 멕시코 페소 및 기타 여러 통화에 사용됩니다. 추가 컨텍스트 없이는 사용자가 가격이 어떤 달러 통화를 나타내는지 알 수 없습니다.

통화 기호 위치는 로케일에 따라 다릅니다. 영어권 국가는 일반적으로 $100처럼 기호를 금액 앞에 배치합니다. 많은 유럽 국가는 100 €처럼 기호를 금액 뒤에 배치합니다. 일부 국가는 금액과 기호 사이에 공백을 포함하고 다른 국가는 그렇지 않습니다.

이러한 차이점은 기호와 숫자를 단순히 연결할 수 없음을 의미합니다. 표시되는 통화와 이를 보는 사용자의 로케일을 모두 이해하는 포맷팅 로직이 필요합니다.

Intl.NumberFormat으로 통화 포맷하기

Intl.NumberFormat 생성자는 옵션에 style: 'currency'를 전달하면 통화 포맷터를 생성합니다. 또한 ISO 4217 통화 코드와 함께 currency 옵션을 사용하여 형식화할 통화를 지정해야 합니다.

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

console.log(formatter.format(1234.56));
// Output: "$1,234.56"

이것은 미국 달러로 금액을 표시하는 미국 영어용 포맷터를 생성합니다. format() 메서드는 숫자를 달러 기호, 천 단위 구분 기호, 소수점 이하 두 자리가 포함된 문자열로 변환합니다.

currency 옵션에는 세 글자 ISO 4217 코드가 필요합니다. 일반적인 코드로는 미국 달러의 USD, 유로의 EUR, 영국 파운드의 GBP, 일본 엔의 JPY, 캐나다 달러의 CAD가 있습니다.

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

const eurFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'EUR'
});

const gbpFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'GBP'
});

console.log(usdFormatter.format(100));
// Output: "$100.00"

console.log(eurFormatter.format(100));
// Output: "€100.00"

console.log(gbpFormatter.format(100));
// Output: "£100.00"

각 포맷터는 적절한 통화 기호를 자동으로 삽입합니다. 각 통화 코드에 해당하는 기호를 알 필요가 없습니다.

로케일이 기호 위치와 포맷팅을 결정합니다

로케일 매개변수는 기호 위치, 숫자 그룹화 및 소수점 구분 기호를 포함하여 통화 금액이 포맷되는 방식을 제어합니다. 동일한 통화 코드라도 로케일에 따라 다른 출력을 생성합니다.

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'EUR'
});

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR'
});

const frFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'currency',
  currency: 'EUR'
});

console.log(usFormatter.format(1234.56));
// Output: "€1,234.56"

console.log(deFormatter.format(1234.56));
// Output: "1.234,56 €"

console.log(frFormatter.format(1234.56));
// Output: "1 234,56 €"

세 포맷터 모두 유로를 표시하지만 각각 다른 규칙을 사용합니다. 미국 영어 포맷터는 금액 앞에 기호를 배치하고 마침표를 소수점 구분 기호로 사용합니다. 독일어 포맷터는 금액 뒤에 공백과 함께 기호를 배치하고, 천 단위 구분 기호로 마침표를 사용하며, 소수점 구분 기호로 쉼표를 사용합니다. 프랑스어 포맷터는 천 단위 구분 기호로 공백을 사용합니다.

Intl API는 지정한 로케일에 따라 이러한 차이를 자동으로 처리합니다. 각 로케일의 형식 규칙을 알 필요가 없습니다.

통화 형식에는 소수 자릿수가 포함됩니다

통화 포맷터는 통화에 따라 적절한 소수 자릿수를 자동으로 결정합니다. 대부분의 통화는 센트 또는 이에 상응하는 분수 단위에 대해 소수점 이하 두 자리를 사용합니다.

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

console.log(formatter.format(100));
// Output: "$100.00"

console.log(formatter.format(100.5));
// Output: "$100.50"

console.log(formatter.format(100.567));
// Output: "$100.57"

포맷터는 미국 달러에 대해 항상 소수점 이하 두 자리를 표시하며, 필요한 경우 0으로 채우고 입력값의 정밀도가 더 높은 경우 반올림합니다.

일부 통화는 소수 자릿수가 0입니다. 일본 엔화는 분수 단위가 없으므로 금액이 소수점 없이 표시됩니다.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'JPY'
});

console.log(formatter.format(1234.56));
// Output: "¥1,235"

포맷터는 엔화 금액에 분수 단위가 포함되지 않기 때문에 가장 가까운 정수로 반올림합니다. Intl API는 각 통화의 소수점 정밀도를 알고 있으며 자동으로 적용합니다.

사용자의 로케일에 맞게 통화 형식 지정

특정 로케일을 하드코딩하는 대신 사용자의 브라우저 언어 기본 설정을 사용할 수 있습니다. navigator.language 속성은 사용자가 선호하는 로케일을 반환합니다.

const userLocale = navigator.language;

const formatter = new Intl.NumberFormat(userLocale, {
  style: 'currency',
  currency: 'USD'
});

console.log(formatter.format(1234.56));
// Output varies by user's locale
// For en-US: "$1,234.56"
// For de-DE: "1.234,56 $"
// For fr-FR: "1 234,56 $US"

이 접근 방식은 각 사용자의 형식 기대에 따라 통화 금액을 표시합니다. 독일 사용자는 독일식 구분 기호와 함께 금액 뒤에 기호를 보는 반면, 미국 사용자는 미국식 구분 기호와 함께 금액 앞에 기호를 봅니다.

또한 전체 navigator.languages 배열을 전달하여 사용자의 최우선 기본 설정을 사용할 수 없을 때 대체 동작을 활성화할 수 있습니다.

const formatter = new Intl.NumberFormat(navigator.languages, {
  style: 'currency',
  currency: 'USD'
});

console.log(formatter.format(1234.56));

API는 배열에서 지원하는 첫 번째 로케일을 사용하여 자동 대체 처리를 제공합니다.

통화 포맷터 재사용

새로운 Intl.NumberFormat 인스턴스를 생성하는 것은 로케일 데이터를 로드하고 옵션을 처리하는 작업을 포함합니다. 동일한 로케일과 통화로 여러 가격을 포맷할 때는 포매터를 한 번 생성하여 재사용하세요.

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

const prices = [19.99, 29.99, 49.99, 99.99];

prices.forEach(price => {
  console.log(formatter.format(price));
});
// Output:
// "$19.99"
// "$29.99"
// "$49.99"
// "$99.99"

이 패턴은 각 가격마다 새로운 포매터를 생성하는 것보다 효율적입니다. 성능 차이는 많은 값을 가진 배열이나 목록을 포맷할 때 더욱 두드러집니다.

애플리케이션에서 가격 표시하기

사용자에게 가격을 표시하는 모든 곳에서 통화 포매터를 사용할 수 있습니다. 여기에는 제품 목록, 장바구니, 결제 페이지, 송장 및 재무 대시보드가 포함됩니다.

const formatter = new Intl.NumberFormat(navigator.language, {
  style: 'currency',
  currency: 'USD'
});

const productPrice = 29.99;
const taxAmount = 2.40;
const totalPrice = productPrice + taxAmount;

document.getElementById('product-price').textContent = formatter.format(productPrice);
document.getElementById('tax-amount').textContent = formatter.format(taxAmount);
document.getElementById('total-price').textContent = formatter.format(totalPrice);

포맷된 문자열은 다른 문자열 값과 동일하게 작동합니다. 텍스트 콘텐츠, 속성 또는 사용자에게 정보를 표시하는 모든 컨텍스트에 삽입할 수 있습니다.

여러 통화 처리하기

여러 통화를 지원하는 애플리케이션은 각 통화에 대해 별도의 포매터를 생성해야 합니다. 통화 코드는 표시되는 기호를 결정하고, 로케일은 금액이 포맷되는 방식을 결정합니다.

const locale = navigator.language;

const usdFormatter = new Intl.NumberFormat(locale, {
  style: 'currency',
  currency: 'USD'
});

const eurFormatter = new Intl.NumberFormat(locale, {
  style: 'currency',
  currency: 'EUR'
});

const gbpFormatter = new Intl.NumberFormat(locale, {
  style: 'currency',
  currency: 'GBP'
});

console.log(usdFormatter.format(100));
console.log(eurFormatter.format(100));
console.log(gbpFormatter.format(100));

각 포매터는 적절한 기호를 표시하고 해당 통화에 대한 사용자의 로케일 규칙을 따릅니다. 이를 통해 사용되는 통화 또는 로케일 조합에 관계없이 가격이 정확하고 읽기 쉽게 표시됩니다.