[JavaScript] Intl.NumberFormat 객체

Intl.NumberFormat 객체

들어가며

• 자바스크립트(JavaScript)의 @Intl.NumberFormat@ 객체에 대해 알아보자.
• @Intl.NumberFormat@ 객체를 사용하면 숫자를 특정 로케일과 옵션에 맞춰 포맷팅(Formatting) 할 수 있다.

 

Intl.NumberFormat 객체

개념

• 에크마스크립트(ECMAScript) 국제화 API의 일부로, 숫자의 형식을 지정하는 데 사용된다.
• 로케일(Locale)과 옵션(Option)을 사용하여 숫자의 형식을 세부적으로 지정할 수 있다.
• 주로 통화, 소수점 자리수, 숫자 그룹화 등의 형식을 지정하는데 사용된다.

 

사용 방법

new Intl.NumberFormat(locales, options)

 

• @locales@
  • 로케일 지정
    • 로케일(Locale)
      • 컴퓨터 프로그램에서 언어, 국가, 그리고 이와 관련된 사용자 인터페이스의 다양한 요소들을 정의하는 설정
      • 주로 텍스트를 표시하는 형식, 숫자와 날짜의 형식, 화폐 단위 등을 정의하는데 사용
  •  예) "en-US" : 미국 영어, "de-DE" : 독일어(독일)
  • 기본값은 실행 환경에 따라 달라짐.
• @options@
  • 숫자 형식을 지정하기 위한 옵션 객체
  • 여러 가지 옵션을 설정할 수 있음.

 

주요 옵션

• @style@ : 숫자의 형식 지정 (기본값 : @decimal@)
  • @decimal@: 일반 숫자 형식
  • @currency@: 통화 형식
  • @percent@: 백분율 형식
  • @unit@: 단위 형식 (ECMAScript 2020부터 지원)
• @currency@: 통화 형식일 때 사용할 통화 단위 (예: @USD@, @EUR@, @KRW@)
• @currencyDisplay@: 통화 표시 방식 (기본값: @symbol@)
  • @symbol@: 통화 기호 (예: @$@)
  • @narrowSymbol@: 좁은 통화 기호
  • @code@: 통화 코드 (예: @USD@)
  • @name@: 통화 이름 (예: @US dollar@)
• @minimumFractionDigits@: 표시할 최소 소수점 자릿수
• @maximumFractionDigits@: 표시할 최대 소수점 자릿수
• @minimumIntegerDigits@: 표시할 최소 정수 자릿수
• @useGrouping@: 숫자 그룹화를 사용할지 여부 (기본값: @true@)

 

사용 예

• 사용할 때는 @formatter.format(적용시킬_변수)@와 같이 사용한다.

 

예제 1

const number = 1234567.89;
const formatter = new Intl.NumberFormat("en-US");

console.log(formatter.format(number)); // "1,234,567.89"

 

예제 2

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

console.log(currencyFormatter.format(1234567.89)); // "$1,234,567.89"

 

예제 3

const percentFormatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  minimumFractionDigits: 2,
});

console.log(percentFormatter.format(0.1234)); // "12.34%"

 

예제 4

const unitFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer-per-hour",
});

console.log(unitFormatter.format(123)); // "123 km/h"

 

예제 5

const number = 1234567.89;

const usFormatter = new Intl.NumberFormat("en-US");
const deFormatter = new Intl.NumberFormat("de-DE");
const krFormatter = new Intl.NumberFormat("ko-KR");

console.log(usFormatter.format(number)); // "1,234,567.89"
console.log(deFormatter.format(number)); // "1.234.567,89"
console.log(krFormatter.format(number)); // "1,234,567.89"

 

> @en-US@ (미국 영어) - 숫자: 1,234,567.89 - 천 단위 구분자: 콤마 (,) - 소수점 구분자: 점 (.) > @de-DE@ (독일어 - 독일) - 숫자: 1.234.567,89 - 천 단위 구분자: 점 (.) - 소수점 구분자: 콤마 (,) > @ko-KR@ (한국어 - 대한민국) - 숫자: 1,234,567.89 - 천 단위 구분자: 콤마 (,) - 소수점 구분자: 점 (.)

 

예제 6 : 리액트에서의 사용 예

// ./util/formatting.js
export const currencyFormatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
});


// ./components/MealItem.jsx
import { currencyFormatter } from "../util/formatting";

export default function MealItem({ meal }) {
  const backendHref = "http://localhost:3000/";

  return (
    <li className="meal-item">
      <article>
        <img src={`${backendHref}${meal.image}`} alt={meal.name} />
        <div>
          <h3>{meal.name}</h3>
          <p className="meal-item-price">
            {currencyFormatter.format(meal.price)}
          </p>
          <p className="meal-item-description">{meal.description}</p>
          <p className="meal-item-actions">
            <button>Add to Cart</button>
          </p>
        </div>
      </article>
    </li>
  );
}

 

 

참고

Intl.NumberFormat - JavaScript | MDN