[Javascript] : 국제화 지원 API Intl - RelativeTimeFormat

RelativeTimeFormat는 언어별로 지정된 규칙에 따라 상대적인 시간을 서식화 할 때 사용할 수 있다. 이 함수를 사용하면 초, 분, 시간, 일, 주, 개월, 년 등의 상대적인 시간을 해당 언어와 지역에 맞게 표시할 수 있다.

언제 사용하면 좋을까?

알림 기능이나 메시지 기능을 구현할 때, 정확한 시간을 표시하면서도 상대적인 시간도 같이 표시하여 해당 알림이나 메시지 발생일을 오늘/ 3일 전/ 7주일 전 과 같이 표시하고 싶을 때 사용하면 유용할 것 같다. 실제로 유튜브 알림에 보면 이와 같이 알림 발생 시기를 표시하고 있다.

 

기본 사용법

RelativeTimeFormat의 첫번재 인자로는 locale을, 두번째 인자로는 옵션을 넣어준다. RelativeTimeFormat의 format함수의 첫번째 인자로는 숫자를, 두번째 인자로는 숫자를 표시할 단위를 넣어준다. 자세한 내용은 하나씩 다뤄보도록 하겠다.

// format함수의 첫번째 인자로는 숫자, 두번째 인자로는 표시할 단위를 넣어준다.

// 두번째 인자로 들어갈 수 있는 값은 아래와 같다.
// "year", "years"  연도
// "quarter", "quarters" : 분기
// "month", "months" : 월
// "week", "weeks" : 주
// "day", "days" : 일
// "hour", "hours" : 시간
// "minute", "minutes" : 분
// "second", "seconds" : 초

const formatter = new Intl.RelativeTimeFormat('en-US', { style: 'long' });
console.log(formatter.format(-3, 'day')); // "3 days ago"
console.log(formatter.format(1, 'week')); // "in 1 week"

const formatter2 = new Intl.RelativeTimeFormat('ko-KR', { style: 'long' });
console.log(formatter2.format(-3, 'day')); // "3 일 전"
console.log(formatter2.format(1, 'week')); // "1주 후"

 

RelativeTimeFormat 두번째 인자인 옵션으로 줄 수 있는 값들

• style
  • style에 넣을 수 있는 값은 long, short, narrow 세 가지가 있는데 차이는 다음과 같다.
  • long : "in 1 week" 와 같은 완전한 문장을 만들기 위해 사용된다. 상세한 내용을 나타낸다.
  • short : "in 1 wk." 와 같이 간략한 문장을 만들기 위해 사용된다. 요약된 내용을 나타낸다.
  • narrow :  "in 1w" 와 같이 매우 간결한 문장을 만들기 위해 사용된다. 가장 짧고 한정적인 내용을 나타낸다.

// style 예시
const longStyle = new Intl.RelativeTimeFormat('en-US', { style: 'long' });
console.log(longStyle.format(-3, 'day')); // "3 days ago"
console.log(longStyle.format(1, 'week')); // "in 1 week"

const shortStyle = new Intl.RelativeTimeFormat('en-US', { style: 'short' });
console.log(shortStyle.format(-3, 'day')); // "3 days ago"
console.log(shortStyle.format(1, 'week')); // "in 1 wk."

const narrowStyle = new Intl.RelativeTimeFormat('en-US', { style: 'narrow' });
console.log(narrowStyle.format(-3, 'day')); // "3d ago"
console.log(narrowStyle.format(1, 'week')); // "in 1w"

 

• numeric
  • numeric에 넣을 수 있는 값은 always, auto가 있는데 차이는 다음과 같다.
  • auto : "모레", "그저께" 와 같이 적절한 형식으로 자동으로 포맷팅 한다.
  • always : "2일 후", "2일 전" 과 같이 항상 숫자를 포함하는 형식으로 포매팅 해준다. 디폴트값.

// numeric 예시
const rtf2 = new Intl.RelativeTimeFormat('ko-KR', { numeric: 'auto' });

console.log(rtf2.format(2, 'day')); // 모레
console.log(rtf2.format(-2, 'day')); // 그저께
console.log(rtf2.format(-2, 'week')); // 2주 전

 

• localeMatcher
  • localeMatcher에 넣을 수 있는 값은 lookup, best fit이 있는데 차이는 다음과 같다.
  • lookup : 지정된 로케일과 정확히 일치하는 로케일 데이터를 사용.
  • best fit : 가능한 가장 가까운 매치를 찾아서 사용. 디폴트값.

• numberingSystem
  • 사용할 숫자 체계를 지정할 수 있다. 예를 들어, 중국의 경우  기본적으로 "hanidec" 숫자 체계를 사용하지만 이것을 "arab" 으로 바꾸는 등 다른 숫자 체계를 사용하도록 바꿀 수 있다.
  • numberingSystem의 값으로 넣을 수 있는 값은 console.log(Intl.supportedValuesOf('numberingSystem') 으로 조회하면 볼 수 있다.

// numberingSystem 사용 예시

// 아랍 숫자로 표시 됨
const rtf = new Intl.RelativeTimeFormat("ko-KR", { numberingSystem: "arab" });
console.log(rtf.format(2, 'days')); // ٢일 후

// 중국 숫자로 표시 됨
const hanidec = new Intl.RelativeTimeFormat("ko-KR", { numberingSystem: "hanidec" });
console.log(hanidec.format(2, 'days')); // "二일 후"