Intl 완전 정복 – Date/Number/RelativeTime 현지화 포맷 가이드

 

 

안녕하세요 😊
다국어·다지역 서비스를 만들 때는 날짜/숫자/통화 표기가 국가마다 다릅니다.
Intl 네임스페이스는 이를 손쉽게 처리하는 표준 국제화 API입니다.

1) 날짜/시간 – Intl.DateTimeFormat

 

const d = new Date("2025-09-04T14:30:00Z");

const ko = new Intl.DateTimeFormat("ko-KR", {
  dateStyle: "long", timeStyle: "short", timeZone: "Asia/Seoul"
}).format(d);
// 예: 2025년 9월 04일 오후 11:30

const us = new Intl.DateTimeFormat("en-US", {
  weekday: "long", year: "numeric", month: "long", day: "numeric"
}).format(d);
// 예: Tuesday, September 04, 2025

2) 숫자/통화 – Intl.NumberFormat

 

new Intl.NumberFormat("ko-KR").format(1234567.89);     // 1,234,567.89
new Intl.NumberFormat("ko-KR", { style: "currency", currency: "KRW" }).format(19900); // ₩19,900
new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(19.9);  // $19.90

3) 상대 시간 – Intl.RelativeTimeFormat

 

const rtf = new Intl.RelativeTimeFormat("ko", { numeric: "auto" });
rtf.format(-3, "day");  // 3일 전
rtf.format(1, "hour");  // 1시간 후

4) 목록 포맷 – Intl.ListFormat

 

const lf = new Intl.ListFormat("en", { style: "long", type: "conjunction" });
lf.format(["HTML", "CSS", "JavaScript"]); // HTML, CSS, and JavaScript

5) 복수형 규칙 – Intl.PluralRules

 

const pr = new Intl.PluralRules("en-US");
pr.select(1); // "one"
pr.select(2); // "other"

6) 실무 팁

• timeZone을 명시해 서버/클라이언트 시차 문제를 예방하세요.
• 통화는 금액의 통화 단위를 정확히 지정해야 합니다(currency).
• 사용자 환경에 따라 로케일을 자동 감지하려면 navigator.language/languages를 활용하세요.