날짜를 "2026년 3월 28일 토요일"로, 숫자를 "1,234,567"로, 통화를 "₩10,000"로 표시하려면 Intl API를 사용하면 됩니다. 외부 라이브러리 없이 브라우저 내장 기능으로 국제화 포맷팅을 할 수 있습니다.

Intl.NumberFormat — 숫자 포맷팅

JS
// 기본 — 천 단위 구분자
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 — 날짜 포맷팅

JS
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 — 상대 시간

JS
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 — 목록 포맷팅

JS
// 나열
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 — 복수형 규칙

JS
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 — 문자열 정렬

JS
// 한국어 정렬
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 — 텍스트 분할

JS
// 단어 분할
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" });

실전 유틸리티

JS
// 파일 크기 포맷
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을 사용하면 번들 크기를 줄일 수 있습니다.

댓글 로딩 중...