🌱Intro
- 자바스크립트를 이용해서 숫자, 시간, 날짜 형식을 간결하게 나타내고 싶은 경우가 많습니다.
- 이때 자바스크립트 내장 객체(Intl)을 사용하면 좋습니다.
- Intl 객체는 문자열 비교, 숫자 형식, 날짜 및 시간 형식을 제공하는 ECMAScript 국제화 API의 네임스페이스 입니다.
- 국제화(Internalization)란 여러가지 언어로 서비스를 할 수 있도록 웹 앱을 설계하고 구현하는 과정을 말합니다.
- Intl 객체를 이용하면 동일한 데이터를 언어나 지역별로 다른 형식을 보여줄 수 있습니다.
- 외부 라이브러리를 사용해서도 다국어 지원 서비스를 이용할 수 있습니다.
- 이제 숫자, 시간, 날짜 형식을 쉽고 간편하게 포맷팅 해보겠습니다.
🌱1. 숫자 형식
- 숫자를 간결하게 나타내 보겠습니다.
- Intl.NumberFormat은 언어에 맞는 숫자 서식을 지원하는 객체 생성자 입니다.
const views = 30593195
const formatter = new Intl.NumberFormat('ko')
formatter.format(views) // 30,583,195
const formatter2 = new Intl.NumberFormat('ko', { notation: 'compact' })
formatter2.format(views) // 3059만
const formatter3 = new Intl.NumberFormat('en', {
notation: 'compact',
compactDisplay: 'long',
})
formatter3.format(views) // 31million
const formatter4 = new Intl.NumberFormat(navigator.language, {
notation: 'compact',
compactDisplay: 'long',
})
formatter4.format(views) // 31 million🌱2. 가격 형식
- 가격을 간결하게 설정해 보겠습니다.
- NumberFormat 함수의 두번째 인자 자리에 options 매개변수를 지정해서 결과를 원하는 형태로 바꿀 수 있습니다.
const price = 10000
const formatter5 = new Intl.NumberFormat('ko', {
style: 'currency',
currency: 'krw',
})
formatter5.format(price) // ₩10,000
const formatter6 = new Intl.NumberFormat('ko', {
style: 'currency',
currency: 'krw',
notation: 'compact',
})
formatter.format(price) // 10,000
const formatter7 = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'usd',
})
formatter7.format(price) // $10,000.00
const formatter8 = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'usd',
notation: 'compact',
})
formatter8.format(price) // $10K🌱3. 시간 형식
- 상대시간을 나타내 보겠습니다.
- Intl.RelativeTimeFormat 객체를 사용하면 언어에 따라서 상대 시간 서식을 지정할 수 있습니다.
const formatter9 = new Intl.RelativeTimeFormat('en')
formatter9.format(1, 'day') // in 1 day
formatter9.format(2, 'day') // in 2 days
formatter9.format(-1, 'day') // 1 day ago
formatter9.format(-2, 'day') // 2 days ago
const formatter10 = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
formatter10.format(1, 'day') // tomorrow
formatter10.format(2, 'day') // in 2 days
formatter10.format(-1, 'day') // yesterday
formatter10.format(-2, 'day') // 2 days ago
const formatter11 = new Intl.RelativeTimeFormat('ko')
formatter11.format(1, 'day') // 1일 후
formatter11.format(2, 'day') // 2일 후
formatter11.format(-1, 'day') // 1일 전
formatter11.format(-2, 'day') // 2일 전
const formatter12 = new Intl.RelativeTimeFormat('ko', { numeric: 'auto' })
formatter12.format(1, 'day') // 내일
formatter12.format(2, 'day') // 모레
formatter12.format(-1, 'day') // 어제
formatter12.format(-2, 'day') // 그러께
const formatter13 = new Intl.RelativeTimeFormat('ko', { numeric: 'auto' })
formatter13.format(1, 'years') // 내년
formatter13.format(1, 'quarters') // 다음 분기
formatter13.format(1, 'months') // 다음 달
formatter13.format(1, 'weeks') // 다음 주
formatter13.format(1, 'days') // 내일
formatter13.format(1, 'hours') // 1시간 후
formatter13.format(2, 'minutes') // 2분 후
formatter13.format(2, 'second') // 2초 후
const formatter14 = new Intl.RelativeTimeFormat('ko', { numeric: 'auto' })
const christmasD_Day = () => {
const today = new Date() // Tue Nov 29 2022 17:42:47 GMT+0900 (대한민국 표준시)
const started = new Date(2022, 12, 25) // Wed Jan 2023 00:00:00 GMT+0900
const daysPassed = Math.ceil((today - started) / (1000 * 60 * 60 * 24)) // -56
return `크리스마스 까지 남은 날: ${formatter14.format(daysPassed, 'day')}`
}
christmasD_Day() // 크리스마스 까지 남은 날: 56일 전🌱4. 날짜/시간 형식
- 날짜/시간을 포맷팅해 보겠습니다.
- Intl.DateTimeFormat은 언어에 맞는 날짜 및 시간 서식을 적용하기 위한 객체입니다.
const date = new Date(2022, 12, 25) // Wed Jan 25 2023 00:00:00 GMT+0900 (대한민국 표준시)
date.toString() // Wed Jan 25 2023 00:00:00 GMT+0900 (대한민국 표준시)
new Intl.DateTimeFormat('en-US').format(date) // 1/25/2023
new Intl.DateTimeFormat('ko').format(date) // 2023. 1. 25.
new Intl.DateTimeFormat('zh').format(date) // 2023/1/25
date.toLocaleDateString() // 2023. 1. 25.
date.toLocaleDateString('ko') // 2023. 1. 25.
date.toLocaleDateString('en-US') // 1/25/2023
date.toLocaleDateString('zh') // 2023/1/25
date.toLocaleDateString('ko', {
dateStyle: 'full',
}) // 2023년 1월 25일 수요일
date.toLocaleDateString('en', {
dateStyle: 'full',
}) // Wednesday, January 25, 2023
date.toLocaleDateString('ko', {
minute: 'numeric',
}) // 2023. 1. 25. 0
date.toLocaleDateString('ko', {
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
}) // 2023. 1. 25. 오전 12:00
date.toLocaleDateString('ko', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
weekday: 'long',
}) // 2023년 1월 25일 수요일 오전 12:00
date.toLocaleDateString('ko', {
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
weekday: 'short',
}) // 2023. 1. 25. (수) 오전 12:00🌱나가면서
- 지금까지 숫자, 가격, 시간, 날짜 서식을 간결하게 적용하는 방법에 대해서 알아보았습니다.
- 형식을 일일이 조정하려면 번거로운 작업을 해야하는 경우가 많습니다. 하지만, 자바스크립트 내장객체를 이용해서 쉽고 간편한 방법으로 특정 형식 지정을 할 수 있습니다.
- 국가별 서식 지정이나, 옵션별로 서식을 다르게 설정하는 방법은 아래 참고중에 공식문서를 확인해 보시면 좋습니다.
🌱참고
'새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 7주차 블로그 포스팅'
Here and Now. 🧗♂️