Date와 Intl을 사용해 날짜와 시간 데이터를 다루는 방법에 대해 알아보겠습니다. 또한, Intl로 날짜와 시간만이 아닌 다른 것도 다뤄보겠습니다.
Date
Date 객체는 1970년 1월 1일 UTC 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const date = new Date();
new Date(); // 2023-08-07T22:02:01.114Z
date.getFullYear(); // 2023
date.getMonth(); // 7 (0~11)
date.getDate(); // 8 (1~31)
date.getHours(); // 7
date.getMinutes(); // 2
date.getSeconds(); // 1
date.getDay(); // 2 (0~6)
date.getTime(); // 1691445721119
// new Date().getTime()과 거의 동일하지만, 함수로 호출하기 때문에 Date 객체를 새롭게 만들지 않아 더 빠르고 가비지 컬렉터의 일을 줄여줌
Date.now(); // 1691445721119
Date.parse("2023-08-07T07:36:41"); // 1691361401000
date.toISOString(); // 2023-08-07T22:20:39.218Z
date.toJSON(); // 2023-08-07T22:21:32.422Z
date.toLocaleString("ko"); // 2023. 8. 8. 오전 7:12:08
date.toLocaleString("en"); // 8/8/2023, 7:12:43 AM
date.toLocaleDateString("ko"); // 2023. 8. 8.
date.toLocaleString("ko", { year: "2-digit", month: "2-digit" }); // 23. 8.
Intl
Intl 객체는 각 언어에 맞는 문자비교, 숫자, 시간, 날짜비교를 제공하는 API입니다.
Intl.DateTimeFormat: 각 언어에 맞는 시간과 날짜 서식을 적용할 수 있는 객체의 생성자입니다.Intl.ListFormat: 각 언어에 맞는 목록 서식을 적용할 수 있는 객체의 생성자입니다.Intl.NumberFormat: 각 언어에 맞는 숫자 서식을 적용할 수 있는 객체의 생성자입니다.Intl.PluralRules: 각 언어에 맞는 복수형 규칙 및 단수 복수 구분 서식을 적용할 수 있는 객체의 생성자입니다.Intl.RelativeTimeFormat: 각 언어에 맞는 상대 시간 서식을 적용할 수 있는 객체의 생성자입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// DateTimeFormat
const intl = new Intl.DateTimeFormat("ko");
intl.format(new Date()); // 2023. 8. 8.
Intl.DateTimeFormat("ko", {
year: "2-digit",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
hourCycle: "h24",
minute: "2-digit",
second: "2-digit"
}).format(new Date()); // 23. 08. 08.
// RelativeTimeFormat
new Intl.RelativeTimeFormat().format(-1, "day"); // 1일 전
new Intl.RelativeTimeFormat().format(1, "day"); // 1일 후
new Intl.RelativeTimeFormat("ko", { numeric: "auto" }).format(-2, "day"); // 그저께
new Intl.RelativeTimeFormat("ko", { numeric: "auto" }).format(2, "day"); // 모레
new Intl.RelativeTimeFormat().format(2, "week"); // 2주 후
new Intl.RelativeTimeFormat().format(3, "month"); // 3개월 후
// ListFormat
new Intl.ListFormat("ko").format(["치킨", "피자", "햄버거"]); // 치킨, 피자 및 햄버거
new Intl.ListFormat("ko", { type: "disjunction" }).format([
"치킨",
"피자",
"햄버거"
]); // 치킨, 피자 또는 햄버거
// NumberFormat
new Intl.NumberFormat("ko", { style: "currency", currency: "KRW" }).format(
42000
); // ₩42,000
new Intl.NumberFormat("en", { style: "currency", currency: "USD" }).format(
75.2468
); // $75.25
new Intl.NumberFormat("ko", { style: "percent" }).format(0.24); // 24%
new Intl.NumberFormat("ko", { style: "percent" }).format(5 / 9); // 56%
// PluralRules
new Intl.PluralRules("en").select(1); // one
new Intl.PluralRules("en").select(0); // other
new Intl.PluralRules("en").select(3); // other