화폐 값을 JavaScript로 포맷팅하는 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 애플리케이션에서 화폐 값을 포맷팅하는 개발자 (중간 난이도)

핵심 요약

• toLocaleString() 메서드를 사용하여 지역 설정과 통화 코드를 기반으로 화폐 값을 포맷팅 가능
• 예: value.toLocaleString('en-GB', {style: 'currency', currency: 'GBP'}) → £123.45
• Intl.NumberFormat 객체를 사용하여 다중 값을 재사용 가능한 포맷터로 처리 가능
• 예: new Intl.NumberFormat('en-GB', {style: 'currency', currency: 'GBP'})
• minimumFractionDigits 및 maximumFractionDigits 옵션으로 소수점 자릿수 조절 가능
• 예: minimumFractionDigits: 0, maximumFractionDigits: 2 → £123.46

섹션별 세부 요약

1. toLocaleString() 메서드 사용

• toLocaleString() 메서드는 지역(locale)과 옵션(style, currency)을 기반으로 숫자를 포맷팅
• 예: en-GB 지역에서 GBP 통화로 123.45 → £123.45
• fr-FR 지역에서 EUR 통화로 포맷팅 시 123,45 €
• minimumFractionDigits와 maximumFractionDigits 옵션으로 소수점 자릿수 조절 가능
• 예: 123.456 → £123.46

2. Intl.NumberFormat 객체 사용

• Intl.NumberFormat은 다중 값을 처리하는 재사용 가능한 포맷터 생성 가능
• 예:

```javascript

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

formatter.format(123.45); // '£123.45'

```

• minimumFractionDigits와 maximumFractionDigits 옵션을 통해 소수점 자릿수를 동일하게 설정 가능
• 예: formatter.format(123.456) → £123.46

3. 포맷팅 옵션 및 예시

• style: 'currency'로 화폐 포맷팅, currency: 'GBP'로 통화 코드 지정
• minimumFractionDigits: 0, maximumFractionDigits: 2로 소수점 자릿수 제한
• 예: 123 → £123, 1000 → £1,000

결론

• Intl.NumberFormat을 사용하여 다중 값을 효율적으로 포맷팅하고, toLocaleString()은 단일 값 처리에 적합
• locale과 currency 옵션을 통해 지역 및 통화 설정을 명확히 지정해야 하며, minimumFractionDigits와 maximumFractionDigits로 소수점 자릿수를 조절 가능
• 실제 구현 시 재사용 가능한 포맷터를 사용하여 코드 중복을 줄이고 유지보수성을 향상시키는 것이 좋음