JavaScript에서 문자열을 날짜로 변환
-
new Date()함수를 사용하여 JavaScript에서 문자열을 날짜로 변환 -
Date.parse()함수를 사용하여 JavaScript에서 문자열을 날짜로 변환 - 문자열을 분할하고 JavaScript에서 날짜로 변환
- 결론
때때로 문자열을 날짜 형식으로 변환해야합니다. 문자열은 데이터베이스에 문자열로 저장된 날짜 값이거나 API에서 반환 된 값일 수 있습니다. 두 경우 모두이 문자열 값은 날짜 선택기 또는 입력 유형 날짜에서 직접 사용할 수 없습니다. 따라서 HTML UI에 표시하려면 문자열을 날짜 개체로 변환해야합니다. 문자열 형식이므로 날짜 별 작업을 수행 할 수 없습니다. 따라서 문자열을 날짜 객체로 변환해야합니다. 다음은 문자열을 날짜로 변환하는 몇 가지 방법을 나열합니다.
new Date()Date.parse()- 분할 및 날짜로 변환
new Date()함수를 사용하여 JavaScript에서 문자열을 날짜로 변환
문자열을 날짜로 변환하는 가장 일반적으로 사용되는 방법은new Date()함수를 사용하는 것입니다. new Date()는 아래에 설명 된 다양한 형식의 인수를 사용하지만 날짜 객체를 반환합니다.
- 인수로 매개 변수가 없습니다.
new Date()함수에 매개 변수가 전달되지 않으면new Date()는 로컬 시스템 시간의 시간대 정보를 포함하여 현재 시스템 날짜 및 시간을 리턴합니다. - 날짜 개체를 인수로 전달합니다.
new Date()는 인수로 전달 된 날짜 문자열로 표시되는 날짜 객체를 반환합니다. - 문자열 날짜 전달.
new Date('2018-12-3')함수의 가장 흥미로운 부분은 인수로 문자열 형식으로 전달 된 날짜를 날짜 형식으로 변환 할 수 있다는 것입니다. 이에 대해 자세히 설명하겠습니다.
인수로 문자열 날짜 전달
문자열 형식의 날짜를new Date()에 전달하면 날짜 객체로 변환됩니다. 문자열 형식이 작동하려면 ISO 8601 형식 인YYYY-MM-DD여야합니다. 다른 날짜 형식은이 방법으로 날짜 개체로 변환 할 수 없습니다. 예를 들어 다음과 같이 코드를 참조하십시오.
new Date('2021-05-23');
new Date('2020/2/29');
new Date('2020-14-03');
new Date('14-02-2021');
출력:
Sun May 23 2021 05:30:00 GMT+0530 (India Standard Time)
Sat Feb 29 2020 00:00:00 GMT+0530 (India Standard Time)
Invalid Date
Invalid Date
위의 예에서 볼 수 있듯이 날짜에 허용되는 유일한 문자열 형식은2021-05-23및2020/2/29입니다. new Date()함수는YYYY-MM-DD또는YYYY-MM-DD형식의 문자열을 처리 할 수 있습니다. ISO 8601 표준을 따르지 않는 다른 문자열 형식이있는 경우new Date()는 날짜를 구문 분석 할 수 없으며Invalid date로 반환됩니다.
비고
new Date()는 ISO 8601 형식YYYY-MM-DD hh:mm:ss를 충족하는 경우에만 문자열을 날짜로 변환하는 데 사용할 수 있습니다.new Date()로 이해할 수없는 다른 형식의 경우이 기사의 뒷부분에서 소개하는 것처럼 문자열을 분할하여new Date()에 인수로 전달하는 것이 좋습니다.new Date()는01 Mar 2020 12:30또는MM DD YYYY HH:mm형식의 문자열도 변환 할 수 있습니다. 변환을 위해 API를 통해 백엔드에서 전달 된 값을 사용하는 경우 전달 된 형식이new Date()함수에서 이해하는 것과 같은지 확인해야하며new Date()를 확인하는 것이 좋습니다. )는 유효한 날짜 개체를 반환합니다. 그렇지 않으면 코드가 깨질 수 있습니다.
Date.parse()함수를 사용하여 JavaScript에서 문자열을 날짜로 변환
Date.parse()는 문자열 날짜를 변환하는 대체 옵션입니다. 날짜 개체 대신 숫자 값을 반환합니다. 따라서 날짜 개체를 예상하는 경우 추가 처리가 필요합니다. 파싱 된 날짜를 1970 년 1 월 1 일 자정 이후 경과 한 밀리 초를 나타내는 숫자로 변환합니다. 타임 스탬프 형식과 비슷하지만 초 대신 Date.parse()가 밀리 초 값을 반환한다는 차이점이 있습니다.
Date.parse('2020-11-21')
Date.parse('2019-01-01T12:30:00.000Z')
Date.parse('20-11-2021')
Date.parse('11-20-2021')
출력:
1605916800000
1546345800000
NaN
1637346600000
Date.parse()가 허용 할 수있는 입력 값 유형에 관해서는new Date()와 동일하지만 날짜가 유효한 형식인지 더 나은 직접 확인을 제공한다는 점에 유의할 가치가 있습니다. 이러한 방법은 특히 API 응답 값을 다룰 때 유용합니다. 이러한 경우 백엔드에서 반환 된 값이Date.parse()또는new Date()함수에서 허용하는 날짜 형식을 따르는 지 확인해야 할 수 있습니다. isNaN()확인만으로 날짜 변환 방법을 식별하고 안전하게 사용할 수 있습니다.
let stringsFromAPI = ['2020-11-21', '20-11-2021'];
stringsFromAPI.forEach((d) => {
if (!isNaN(Date.parse(d))) {
console.log(new Date(d));
}
})
출력:
Sat Nov 21 2020 05:30:00 GMT+0530 (India Standard Time)
여기서20-11-2021날짜는DD-MM-YYYY형식입니다. 따라서Date.parse()함수 나new Date()함수에서 이해하지 못합니다. 따라서stringsFromAPI가 백엔드에서 오는 값인 경우 위 함수는 허용되는 형식을 준수하는 날짜 만 변환합니다. !isNaN(Date.parse(d))는 부적절한 날짜 값을 자동으로 거부하고 변환에 성공한 값을 기록합니다.
비고
Date.parse()는 날짜 값이 정확한 형식인지 확인하는 데 적합하고dateObj.setTime(Date.parse(DateString))를 사용하여 날짜를 할당하는 데 사용할 수 있는 반환 형식을 제외한 새로운 date()와 유사합니다.- Unix 타임 스탬프와 비교하여
Date.parse()는new Date()를 사용하여 날짜를 실제 날짜 객체로 변환하지 않고도 정확한 날짜 비교에 사용할 수있는 밀리 초를 반환합니다. Date.parse()는 날짜 구문 분석을 위해 내부적으로new Date()를 사용하므로new Date()함수에서 허용되는 형식도Date.parse()함수에서 지원됩니다.
문자열을 분할하고 JavaScript에서 날짜로 변환
Date.parse()및new Date()함수는 모두 ISO 8601 확장 날짜 형식을 기반으로 설계되었습니다. 경우에 따라 날짜가 예상 형식과 일치하지 않으면 날짜 문자열을 분할하고 값을 추출한 다음 날짜 개체로 변환하여 수동으로 계산해야합니다. 놀랍게도new Date()는 또한 인수로 전달되는 날짜 매개 변수를 지원하며 날짜 객체를 출력으로 얻습니다.
인수에서 날짜를 만드는 구문 :
new Date(yearValue, IndexOfMonth, dayValue, hours, minutes, seconds)
어디,
yearValue: ISO 8061 YYYY 형식을 준수해야합니다. 예 : 2021.YY형식으로 값을 지정하면 잘못 사용됩니다. 예를 들어2021에 대해 21을 언급하면 2021이 아닌 1921로 간주됩니다.IndexOfMonth: 인덱스 0으로 시작합니다. 따라서 월 값에서 1을 뺍니다. 예를 들어 3 월의 경우 값은 3이지만monthIndex는 2가됩니다 (예 : 3-1 = 2). 해당 월의 지수는 일반적으로0-11범위에 있어야합니다.dayValue: 날짜를 나타냅니다. 한 달의 일 수에 따라 1-31 범위에 있어야합니다. 예 : 21-05-2021의 경우 날짜 값은 21입니다.hours: 하루 중 시간. 예를 들어 10시.minutes: 지난 1 시간 분.seconds: 1 분 지난 초 값을 유지합니다.
다음은 사용자 정의 날짜 형식 인DD-MM-YYYYTHH:mm:SS를 갖는 문자열을 가져 와서 날짜 객체를 반환하는 함수입니다.
function convertFromStringToDate(responseDate) {
let dateComponents = responseDate.split('T');
let datePieces = dateComponents[0].split('-');
let timePieces = dateComponents[1].split(':');
return (new Date(
datePieces[2], (datePieces[1] - 1), datePieces[0], timePieces[0],
timePieces[1], timePieces[2]))
}
convertFromStringToDate('21-03-2020T11:20:30')
출력:
Sat Mar 21 2020 11:20:30 GMT+0530 (India Standard Time)
결론
가장 일반적으로 사용되는new Date()함수는 문자열이 ISO 8601 형식을 준수하는 경우 문자열 날짜를 날짜 객체로 변환하는 데 매우 유용합니다. new Date()와 비교할 때Date.parse()함수는 문자열 인수로 전달 된 날짜까지 경과 한 1970 년 1 월 1 일 이후의 밀리 초를 포함하는 숫자 값을 반환하는 방식이 다릅니다. 날짜 문자열을 분할하고 날짜 구성 요소를new Date()함수에 인수로 전달하여 다른 날짜 형식을 변환 할 수 있습니다.