JavaScript - 문자열을 날짜(Date)로 변환하는 방법

자바스크립트에서 문자열을 Date 객체로 변환하는 방법을 소개합니다.

1. 날짜 정보만 있는 문자열을 Date로 변환

new Date(string)은 인자로 전달된 문자열을 파싱하여 Date 객체로 만듭니다. 여기서 문자열은 YYYY-MM-DD와 같은 ISO 8601 형식이어야 합니다.

예를 들어, '2019-12-11' 문자열을 인자로 전달하여 Date 객체를 만들고 출력하면 아래와 같이 출력됩니다. 시스템의 지역 설정이 대한민국이라서 Korean Standard Time으로 출력됩니다.

console.log('date: ' + new Date('2019-12-11'));
// date: Wed Dec 11 2019 09:00:00 GMT+0900 (Korean Standard Time)

UTC 시간으로 출력하고 싶다면 Date.toUTCString()을 사용하시면 됩니다. 참고 : JavaScript - 현재 날짜, 시간 가져오기

YYYY/MM/DD 또는 YYYY.MM.DD 같은 형식의 문자열도 허용되어 Date 객체가 생성됩니다.

console.log('date: ' + new Date('2020/01/02'));
// date: Thu Jan 02 2020 00:00:00 GMT+0900 (Korean Standard Time)
console.log('date: ' + new Date('2020.01.02'));
// date: Thu Jan 02 2020 00:00:00 GMT+0900 (Korean Standard Time)

이런 형식의 문자열도 변환됩니다.

console.log('date: ' + new Date('04 Mar 2022 12:20:30'));
// date: Fri Mar 04 2022 12:20:30 GMT+0900 (Korean Standard Time)

하지만 형식이 맞지 않거나 날짜와 관련이 없는 문자가 포함되어있다면 Invalid Date가 출력됩니다.

console.log('date: ' + new Date('2022-04-25A'));
// date: Invalid Date

2. 날짜, 시간 정보가 있는 문자열을 Date로 변환

날짜 외에 시, 분, 초 정보가 포함되어있는 문자열도 Date 객체로 변환할 수 있습니다. YYYY-MM-DD hh:mm:ss또는 YYYY-MM-DDThh:mm:ss와 같은 형식의 문자열을 인자로 전달하면 됩니다. 이 포맷에서 T를 기준으로 날짜와 시간이 구분됩니다.

console.log('date: ' + new Date('2019-12-11 12:20:30'));
console.log('date: ' + new Date('2019-12-11T12:20:30'));

Output:

date: Wed Dec 11 2019 12:20:30 GMT+0900 (Korean Standard Time)
date: Wed Dec 11 2019 12:20:30 GMT+0900 (Korean Standard Time)

3. 날짜, 시간, Timezone 정보가 있는 문자열을 Date로 변환

'2019-12-11T12:20:30'라는 시간 정보는 사실 어느 지역의 시간인지 알 수 없습니다. 예를 들어, 영국에서 12시는, 한국에서는 19시가 됩니다. 이런 것을 정확히 표현하려면 Timezone을 명시해줘야합니다.

Timezone은 GMT/UTC를 기준으로 표시하는데, '2019-12-11T12:20:30+00:00는 영국 그리니치의 시간을 의미하고 '2019-12-11T12:20:30+09:00는 영국에서 9시간 시차가 나는 한국의 Timezone을 표시한 것입니다.

타임존은 +00:00처럼 시간차를 표시합니다. 타임존을 표시하지 않으면 시스템에 설정된 지역의 타임존으로 처리됩니다.

console.log('date: ' + new Date('2019-12-11T12:20:30'));
console.log('date: ' + new Date('2019-12-11T12:20:30+09:00'));
console.log('date: ' + new Date('2019-12-11T12:20:30+00:00'));

위 코드를 출력해보면, 한국 시간으로 출력되기 때문에 GMT+0900으로 변환되어 출력됩니다. 즉, 인자로 전달한 문자열 '12:20:30+00:00'GMT+0900 시간대로 변환되어, 9시간이 더해진 시간 21:20:30 GMT+0900으로 계산되었습니다.

date: Wed Dec 11 2019 12:20:30 GMT+0900 (Korean Standard Time)
date: Wed Dec 11 2019 12:20:30 GMT+0900 (Korean Standard Time)
date: Wed Dec 11 2019 21:20:30 GMT+0900 (Korean Standard Time)

아래와 같이 UTC로 출력해서, GMT+00:00 기준으로 시간을 출력할 수도 있습니다.

console.log('date: ' + new Date('2019-12-11T12:20:30').toUTCString());
console.log('date: ' + new Date('2019-12-11T12:20:30+09:00').toUTCString());
console.log('date: ' + new Date('2019-12-11T12:20:30+00:00').toUTCString());

Output:

date: Wed, 11 Dec 2019 03:20:30 GMT
date: Wed, 11 Dec 2019 03:20:30 GMT
date: Wed, 11 Dec 2019 12:20:30 GMT

4. 문자열로 된 날짜를 UTC의 millisecond로 변환

Date.parse()는 문자열의 날짜를 파싱하고 1970-01-01부터 그 날짜까지의 시간을 millisecond로 리턴합니다. Server <-> Client 간에 시간 정보를 전달할 때, 문자열로 전달하는 것보다 이렇게 millisecond로 전달하는 것이 정확하고 변환할 때 장점이 될 수 있습니다. 시스템마다 사용하는 형식이 다르기 때문에 millisecond로 시간을 계산하고 원하는 포맷으로 출력할 수도 있기 때문입니다.

아래 예제의 결과는 1970-01-01에서 1576022400000 millisecond가 흐르면 '2019-12-11'가 된다는 것을 의미합니다.

console.log(`millis: ${Date.parse('2019-12-11')}`);
// millis: 1576022400000

만약 문자열의 형식이 잘못되거나 날짜와 관련없는 문자가 포함된다면 NaN을 리턴합니다.

console.log(`millis: ${Date.parse('2019-12-11A')}`);
// millis: NaN

5. UTC millisecond를 Date 객체로 변환

위에서 계산된 millisecond는 쉽게 Date 객체로 만들 수 있습니다. 생성자의 인자로 전달하면 됩니다.

const millis = Date.parse('2019-12-11');
const date = new Date(millis);

console.log(`date: ${date}`);
//date: Wed Dec 11 2019 09:00:00 GMT+0900 (Korean Standard Time)

String -> millisecond -> Date로 변환하는 과정에서, isNaN()을 이용하면 잘못된 날짜 형식의 문자열을 필터링할 수 있습니다.

const strings = ['2019-12-11', '2022-04-25A', '2019-12-11 12:20:30', '04 Mar 2022 12:20:30'];

strings.forEach((str) => {
  millis = Date.parse(str);
  if (!isNaN(millis)) {
    const date = new Date(millis);
    console.log(`${str}: ${date}`);
  }
});

결과를 보시면, '2022-04-25A'isNaN()이 true를 리턴하여 Date로 변환하지 않았습니다.

2019-12-11: Wed Dec 11 2019 09:00:00 GMT+0900 (Korean Standard Time)
2019-12-11 12:20:30: Wed Dec 11 2019 12:20:30 GMT+0900 (Korean Standard Time)
04 Mar 2022 12:20:30: Fri Mar 04 2022 12:20:30 GMT+0900 (Korean Standard Time)
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha