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

Javascriptdatetime

자바스크립트에서 문자열을 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