로케일별 기호로 통화를 형식화하는 방법

소개

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

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

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

로케일에 따라 다른 통화 기호

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

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

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

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

Intl.NumberFormat으로 통화 형식 지정하기

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

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

console.log(formatter.format(1234.56));
// 출력: "$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));
// 출력: "$100.00"

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

console.log(gbpFormatter.format(100));
// 출력: "£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));
// 출력: "€1,234.56"

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

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

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

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

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

통화 포맷터는 통화에 따라 적절한 소수점 자리수를 자동으로 결정합니다. 대부분의 통화는 센트 또는 이와 동등한 분수에 두 개의 소수점 자리를 사용합니다.

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

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

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

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

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

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

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

console.log(formatter.format(1234.56));
// 출력: "¥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));
// 출력은 사용자의 로케일에 따라 다릅니다
// en-US의 경우: "$1,234.56"
// de-DE의 경우: "1.234,56 $"
// 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));
});
// 출력:
// "$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));

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