JavaScript에서 문자열을 날짜로 변환

데이터베이스나 API에서 받은 날짜 문자열은 여전히 문자열이므로, 날짜 선택기나 계산에 JavaScript Date 객체가 필요할 수 있습니다. 적절한 변환 방법은 입력 형식과 시간대가 명시되어 있는지에 따라 달라집니다. 지원되는 표준 문자열을 파싱하려면 문자열을 new Date(dateString)의 인수로 전달하세요. 인수 없이 new Date()를 호출하면 현재 시각을 나타내는 Date가 만들어집니다. 밀리초 값이 필요하면 Date.parse()를 사용하고, 형식을 알고 있는 사용자 지정 문자열이라면 구성 요소를 직접 파싱할 수 있습니다.

이 가이드에서는 다음 세 가지 방법을 살펴봅니다.

• 지원되는 날짜 문자열을 new Date(dateString)에 전달해 Date 객체를 만듭니다.
• 밀리초 숫자 값이 필요할 때 Date.parse()를 호출합니다.
• 알고 있는 사용자 지정 형식의 문자열을 구성 요소로 나눈 뒤 Date를 만듭니다.

JavaScript에서 new Date()로 문자열을 Date로 변환하기

new Date(dateString) 생성자는 지원되는 날짜 문자열을 받아 Date 객체를 반환합니다. 이 ISO 8601 타임스탬프에는 UTC를 나타내는 Z가 포함되어 있습니다. toISOString()을 호출하면 컴퓨터의 현지 시간대와 관계없이 해당 UTC 시각이 반환됩니다.

const dateString = '2024-05-23T14:30:00Z';
const date = new Date(dateString);

console.log(date instanceof Date);
console.log(date.toISOString());

2024-05-23처럼 날짜만 있는 문자열은 UTC로 해석되지만, 오프셋이 없는 날짜·시간 문자열은 현지 시간으로 해석됩니다. 원본이 특정 시점을 나타낸다면, 컴퓨터의 현지 시간대에 따라 해석이 달라지지 않도록 명시적 오프셋이 포함된 표준 문자열을 사용하세요.

표준 날짜·시간 형식이 아닌 문자열의 파싱 방식은 JavaScript 구현마다 일관되게 정의되어 있지 않습니다. 한 브라우저나 런타임에서 받아들인 문자열도 다른 환경에서는 다르게 해석될 수 있습니다. 사용하기 전에 Number.isNaN(date.getTime())으로 결과 객체가 유효한지 확인하세요. 파싱에 성공했다고 해서 문자열이 애플리케이션에서 요구하는 형식이나 달력 규칙을 따른다는 뜻은 아닙니다. 그런 요구 사항은 별도로 검증해야 합니다.

JavaScript에서 Date.parse()로 날짜 문자열 파싱하기

Date.parse()는 날짜 문자열을 파싱하면 Unix 에포크 이후 경과한 밀리초 수를 반환하고, 입력을 파싱할 수 없으면 NaN을 반환합니다. 반환값은 Date 객체가 아니라 숫자입니다. API 값을 파싱한 뒤 객체가 필요하다면 숫자 결과로 날짜를 만드세요.

const apiValue = '2019-01-01T12:30:00.000Z';
const milliseconds = Date.parse(apiValue);

console.log(typeof milliseconds);
console.log(Number.isNaN(milliseconds) ? 'not parsed' : new Date(milliseconds).toISOString());

Number.isNaN()은 파싱 실패를 나타내지만, 애플리케이션별 형식을 완전히 검증하지는 않습니다. 런타임이 받아들이더라도 애플리케이션에서는 거부해야 하는 값일 수 있습니다. 입력이 특정 패턴을 따라야 한다면 파싱 결과를 사용하기 전에 그 패턴과 달력상의 날짜 값을 확인하세요.

문자열을 분할해 JavaScript에서 Date로 변환하기

입력이 알고 있는 사용자 지정 형식이라면 그 형식에 맞춰 문자열을 분할하고, 구성 요소를 여러 인수를 받는 Date 생성자에 전달하세요. 이 예제는 DD-MM-YYYYTHH:mm:ss 형식을 예상하며, 생성자는 구성 요소를 현지 시간으로 해석합니다. 구성 요소가 실제 달력 날짜를 이루지 않으면 null을 반환합니다.

function parseKnownDate(value) {
  if (typeof value !== 'string') {
    return null;
  }

  const dateTimeParts = value.split('T');
  if (dateTimeParts.length !== 2) {
    return null;
  }

  const [datePart, timePart] = dateTimeParts;
  if (
    !/^\d{2}-\d{2}-\d{4}$/.test(datePart) ||
    !/^\d{2}:\d{2}:\d{2}$/.test(timePart)
  ) {
    return null;
  }

  const dateParts = datePart.split('-');
  const timeParts = timePart.split(':');
  if (dateParts.length !== 3 || timeParts.length !== 3) {
    return null;
  }

  const [day, month, year] = dateParts.map(Number);
  const [hours, minutes, seconds] = timeParts.map(Number);

  if (![day, month, year, hours, minutes, seconds].every(Number.isInteger)) {
    return null;
  }

  // The multi-argument constructor treats years 0–99 as 1900–1999.
  // setFullYear preserves the supplied year, including values in that range.
  const date = new Date(0);
  date.setFullYear(year, month - 1, day);
  date.setHours(hours, minutes, seconds, 0);

  if (
    date.getFullYear() !== year ||
    date.getMonth() !== month - 1 ||
    date.getDate() !== day ||
    date.getHours() !== hours ||
    date.getMinutes() !== minutes ||
    date.getSeconds() !== seconds
  ) {
    return null;
  }

  return date;
}

const date = parseKnownDate('21-03-2020T11:20:30');
console.log(date === null ? 'not a valid date' : date.toString());

문자열 분할은 명시한 구성 요소 순서를 전제로 합니다. 원본의 순서나 구분자가 다르면 분할 방식을 조정하세요. 월 인수는 0부터 시작하므로 코드에서 사람이 읽는 월 값에서 1을 뺍니다. 설정 메서드는 현지 시간을 사용하며 범위를 벗어난 값을 정규화할 수 있습니다. 결과 구성 요소를 파싱한 값과 비교하면 이런 정규화가 발생했는지 확인할 수 있습니다. 초기 날짜도 현지 시간대를 기준으로 하므로 이 방법은 UTC 타임스탬프가 아닌 현지 시간 값을 만듭니다. 0부터 99까지의 연도가 나올 수 있다면 setFullYear()를 사용해 여러 인수를 받는 생성자가 해당 연도를 특별하게 처리하는 일을 피할 수 있습니다. 이 예제는 정수 구성 요소와 달력상의 날짜 넘김을 확인합니다. 더 엄격한 입력 규칙이 필요한 애플리케이션에서는 정확한 문자열 패턴과 각 필드에 허용되는 범위도 확인해야 합니다.

결론

지원되는 날짜 문자열로 Date 객체를 만들려면 new Date(dateString)을 사용하세요. 특정 시점을 나타내는 문자열이라면 명시적 오프셋이 있는 형식이 좋습니다. 인수 없이 new Date()를 호출하면 현재 시각의 Date가 만들어지며 문자열을 파싱하지 않습니다. Unix 에포크 이후의 밀리초나 파싱 실패를 나타내는 NaN이 필요하면 Date.parse()를 사용하세요. 파싱에 성공해 숫자를 얻었고 Date 객체가 필요하다면 그 값을 new Date(milliseconds)에 전달하면 됩니다. 알고 있는 사용자 지정 형식에는 구성 요소를 파싱하고 검증한 뒤 현지 시간 날짜를 만드세요. ISO 8601 개요에서는 여러 API에서 사용하는 날짜 및 시간 표기 방식을 설명합니다.