Intl API — 날짜, 숫자, 통화, 상대 시간 포맷팅
날짜를 "2026년 3월 28일 토요일"로, 숫자를 "1,234,567"로, 통화를 "₩10,000"로 표시하려면 Intl API를 사용하면 됩니다. 외부 라이브러리 없이 브라우저 내장 기능으로 국제화 포맷팅을 할 수 있습니다.
Intl.NumberFormat — 숫자 포맷팅
// 기본 — 천 단위 구분자
new Intl.NumberFormat("ko-KR").format(1234567);
// "1,234,567"
// 통화
new Intl.NumberFormat("ko-KR", {
style: "currency",
currency: "KRW",
}).format(10000);
// "₩10,000"
new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
}).format(99.99);
// "$99.99"
// 퍼센트
new Intl.NumberFormat("ko-KR", {
style: "percent",
minimumFractionDigits: 1,
}).format(0.1234);
// "12.3%"
// 단위
new Intl.NumberFormat("ko-KR", {
style: "unit",
unit: "kilometer-per-hour",
}).format(120);
// "120km/h"
// 소수점 자릿수
new Intl.NumberFormat("ko-KR", {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}).format(3.1);
// "3.10"
// 압축 표기
new Intl.NumberFormat("ko-KR", {
notation: "compact",
}).format(1500000);
// "150만"
new Intl.NumberFormat("en-US", {
notation: "compact",
}).format(1500000);
// "1.5M"
Intl.DateTimeFormat — 날짜 포맷팅
const date = new Date("2026-03-28T15:30:00");
// 기본
new Intl.DateTimeFormat("ko-KR").format(date);
// "2026. 3. 28."
// 상세 옵션
new Intl.DateTimeFormat("ko-KR", {
year: "numeric",
month: "long",
day: "numeric",
weekday: "long",
}).format(date);
// "2026년 3월 28일 토요일"
// 시간 포함
new Intl.DateTimeFormat("ko-KR", {
dateStyle: "full",
timeStyle: "short",
}).format(date);
// "2026년 3월 28일 토요일 오후 3:30"
// 타임존 지정
new Intl.DateTimeFormat("ko-KR", {
timeZone: "America/New_York",
dateStyle: "medium",
timeStyle: "long",
}).format(date);
// 뉴욕 시간대로 표시
Intl.RelativeTimeFormat — 상대 시간
const rtf = new Intl.RelativeTimeFormat("ko-KR", {
numeric: "auto", // "1일 전" 대신 "어제" 같은 표현
});
rtf.format(-1, "day"); // "어제"
rtf.format(1, "day"); // "내일"
rtf.format(-3, "hour"); // "3시간 전"
rtf.format(2, "month"); // "2개월 후"
rtf.format(-1, "year"); // "작년"
// 자동 단위 선택 함수
function timeAgo(date) {
const now = new Date();
const diff = (date - now) / 1000; // 초 단위
const rtf = new Intl.RelativeTimeFormat("ko-KR", { numeric: "auto" });
const units = [
{ unit: "year", seconds: 31536000 },
{ unit: "month", seconds: 2592000 },
{ unit: "week", seconds: 604800 },
{ unit: "day", seconds: 86400 },
{ unit: "hour", seconds: 3600 },
{ unit: "minute", seconds: 60 },
{ unit: "second", seconds: 1 },
];
for (const { unit, seconds } of units) {
const value = Math.round(diff / seconds);
if (Math.abs(value) >= 1) {
return rtf.format(value, unit);
}
}
return "방금 전";
}
Intl.ListFormat — 목록 포맷팅
// 나열
new Intl.ListFormat("ko-KR", { type: "conjunction" })
.format(["사과", "바나나", "체리"]);
// "사과, 바나나 및 체리"
// or 형태
new Intl.ListFormat("ko-KR", { type: "disjunction" })
.format(["빨강", "파랑", "초록"]);
// "빨강, 파랑 또는 초록"
// 영어
new Intl.ListFormat("en-US", { type: "conjunction" })
.format(["Apple", "Banana", "Cherry"]);
// "Apple, Banana, and Cherry"
Intl.PluralRules — 복수형 규칙
const pr = new Intl.PluralRules("en-US");
pr.select(0); // "other"
pr.select(1); // "one"
pr.select(2); // "other"
// 영어 복수형 메시지
function pluralize(count, forms) {
const rule = new Intl.PluralRules("en-US").select(count);
return forms[rule] || forms.other;
}
pluralize(1, { one: "1 item", other: `${count} items` });
// "1 item"
Intl.Collator — 문자열 정렬
// 한국어 정렬
const collator = new Intl.Collator("ko-KR");
["바나나", "사과", "가나다", "체리"].sort(collator.compare);
// ["가나다", "바나나", "사과", "체리"]
// 대소문자 무시 정렬
const ci = new Intl.Collator("en-US", { sensitivity: "base" });
["Banana", "apple", "Cherry"].sort(ci.compare);
// ["apple", "Banana", "Cherry"]
// 숫자 자연 정렬
const numeric = new Intl.Collator("ko-KR", { numeric: true });
["파일10", "파일2", "파일1"].sort(numeric.compare);
// ["파일1", "파일2", "파일10"]
Intl.Segmenter — 텍스트 분할
// 단어 분할
const segmenter = new Intl.Segmenter("ko-KR", { granularity: "word" });
const segments = [...segmenter.segment("안녕하세요 자바스크립트")];
segments.filter((s) => s.isWordLike).map((s) => s.segment);
// ["안녕하세요", "자바스크립트"]
// 문장 분할
const sentenceSegmenter = new Intl.Segmenter("ko-KR", { granularity: "sentence" });
실전 유틸리티
// 파일 크기 포맷
function formatFileSize(bytes) {
const units = ["B", "KB", "MB", "GB", "TB"];
let i = 0;
while (bytes >= 1024 && i < units.length - 1) {
bytes /= 1024;
i++;
}
return new Intl.NumberFormat("ko-KR", {
maximumFractionDigits: 1,
}).format(bytes) + " " + units[i];
}
// 가격 포맷
function formatPrice(amount, currency = "KRW") {
return new Intl.NumberFormat("ko-KR", {
style: "currency",
currency,
maximumFractionDigits: 0,
}).format(amount);
}
**기억하기 **: Intl API는 외부 라이브러리 없이 로케일에 맞는 포맷팅을 제공합니다. NumberFormat으로 숫자/통화, DateTimeFormat으로 날짜, RelativeTimeFormat으로 "3시간 전" 같은 상대 시간을 표시할 수 있습니다. moment.js나 numeral.js 대신 Intl을 사용하면 번들 크기를 줄일 수 있습니다.
댓글 로딩 중...