본문으로 건너뛰기
AZ Tools

숫자 포매터 (Intl.NumberFormat)

각 로케일이 기대하는 방식으로 숫자 형식 — 1,234,567.89·1.234.567,89·$1.23M·12 345 ₽ — 일치하는 JavaScript 스니펫 획득.

포맷됨

1,234,567.891

JavaScript
new Intl.NumberFormat('en-US', {
  "style": "decimal",
  "notation": "standard",
  "useGrouping": true,
  "minimumFractionDigits": 0,
  "maximumFractionDigits": 3
}).format(1234567.891)

모든 포맷은 브라우저 내장 Intl.NumberFormat 사용 — 프로덕션 코드가 사용할 동일 엔진.

사용법

  1. 숫자 입력·로케일 선택.
  2. 스타일 선택(decimal/currency/percent/unit)·정밀도 조정.
  3. 1.2M 스타일 요약은 compact 표기·1.234E6은 scientific 시도.
  4. 포맷 결과 또는 일치 JavaScript 스니펫 복사.

자세한 설명

펼치기

Intl.NumberFormat의 시각적 앞단입니다. 로케일(en-US, de-DE, ja-JP 등), 스타일(십진, 통화, 백분율, 단위), 표기법(표준, 과학, 공학, 축약), 자릿수 정밀도를 고릅니다. 툴은 서식이 적용된 출력과 그것을 만든 자바스크립트 호출을 정확히 보여 주므로 코드베이스에 그대로 붙여 넣을 수 있습니다. 가격이나 개수, 백분율, 단위 값이 다른 시장에서 어떻게 보일지 미리 볼 때 좋습니다.

사람들이 가장 먼저 알아차리는 변화이자 조용히 파싱을 깨뜨리는 것이 구분자 교체입니다. 영어가 1,234.56이라고 쓰는 자리에 독일어는 1.234,56이라고 씁니다. 그래서 한 로케일로 서식한 숫자를 다른 쪽을 기대하는 코드가 읽으면 세 자릿수만큼 어긋나거나 아예 실패합니다. 서식은 한 방향입니다. Intl에는 파서가 없고, 지역화된 문자열에서 숫자를 되찾으려면 그 로케일의 구분자를 직접 걷어 내야 합니다.

자리 묶음이 늘 세 자리씩인 것도 아닙니다. 인도 로케일은 아래 세 자리를 묶은 뒤 두 자리씩 묶어서 천만이 1,00,00,000으로 읽히고, 어떤 로케일은 특정 크기 이상에서만 묶거나 아예 묶지 않습니다. 쉼표 개수를 세어 자리를 잡아 둔 레이아웃은 표준이 약속하지 않은 것을 전제한 것입니다.

통화 서식은 위치와 기호와 소수 자릿수를 함께 담는데 셋 다 다릅니다. 유로는 독일어에서 금액 뒤에 오고 아일랜드 영어에서는 앞에 옵니다. 엔은 보조 단위가 없어 소수점 없이 서식되고, 디나르는 세 자리입니다. 소수 두 자리를 박아 넣는 것이 그 목록 양 끝에서 깨지는 전제입니다.

축약 표기는 나중에 지역화할 수 있는 약어가 아니라 로케일마다 다른 텍스트입니다. 영어는 1.2M, 독일어는 1,2 Mio., 일본어는 아예 다른 묶음으로 120万을 주는데, 그 언어가 만 단위로 세기 때문입니다. 축약 숫자에 네 글자를 잡아 둔 디자인은 영어에만 맞춘 것입니다.

데이터는 브라우저가 제공하므로 CLDR이 갱신되면서 엔진과 버전에 따라 출력이 조금씩 달라질 수 있습니다. 중요한 것은 스크린샷이 아니라 테스트로 고정하십시오.

자주 묻는 질문

왜 독일어는 1.234,56을 쉼표 소수로 포맷?

로케일 관례. 독일어(de-DE)는 .을 천 단위 구분자·,을 소수로 — 미국 영어와 반대. Intl.NumberFormat은 모든 로케일에 대해 이를 알고 있어서 toFixed()와 자체 쉼표를 하드코딩하는 것은 국제 앱에 취약함.

compact 표기는 무엇 용?

짧은 라벨 — 1.2K·3.4M·일본어 5億. 공간이 중요하고 정확한 자릿수가 그렇지 않은 대시보드나 차트 축에 사용. 일반 UI 크기는 maximumFractionDigits: 1과 페어.

percent가 왜 입력의 100배?

percent 스타일은 100 곱셈. 0.42를 42%로 포맷하려면 예상 동작; 이미 42로 미리 곱했고 42% 원하면 percent 스타일 대신 리터럴 % 추가.

어떤 통화·단위 지원?

currency 스타일은 모든 ISO 4217 통화 코드. units는 브라우저가 정의된 승인 부분집합(meter·kilometer·mile·byte/megabyte 등) 지원 — 이 도구는 일반적인 것 노출. 전체 목록은 MDN Intl.NumberFormat 옵션 참조.

이 주제의 가이드

관련 도구