본문 바로가기

Javascript/Javascript중급

날짜 표시와 변환

반응형

자바스크립트에서 날짜는 날짜 객체를 생성해서 얻습니다.

생성한 날짜 객체의 메서드를 이용해 현재 시간에 대한 다양한 타입의 정보를 얻을 수 있습니다.


날짜 객체를 생성할 때 파라메터로 날짜 정보를 넘기면 파라메터로 넘긴 날짜 정보값으로 객체가 생성됩니다.

날짜 객체는 1970년 1월 1일 UTC(국제표준시) 00:00 부터 경과한 시간을 밀리세컨드로 나타내는 유닉스 타임스템프를 사용합니다.

날짜 객체에 들어있는 실제 값은 정수값이며, 메서드를 이용해 다양하게 변형된 날짜 포맷을 얻게됩니다.


파라메터 없이 객체를 생성하면 현재 시각을 가져옵니다.


날짜 객체 생성은


let today = new Date();


let date1 = new Date('2020-05-21T09:27:15');

let date2 = new Date('2020-05-21 11:15:10');

let date3 = new Date('May 23, 2020-05-21');

let date4 = new Date('20,05,22');

let date5 = new Date('20,05,21,09,00,00');


처럼 다양한 날짜 형식으로 파라메터를 넘겨서 생성할 수 있습니다.




날짜를 문자열로 표시하기


날짜 객체는 날짜 정보를 간편하게 문자열로 표시할 수 있는 메서드들을 여러개 제공합니다.

그중 가장 많이 사용하는 것은 toISOString() 입니다.

기본 문자열 변환 메서드인 toString() 은 영어권 환경에 맞춰져 있기 때문에 한글 환경에는 사용이 적합하지 않습니다.


let today = new Date();

console.log(today.toISOString());
console.log(today.toString());





날짜 부분 정보를 얻는 메서드


정보 

메서드 

설명 

getFullYear()

4자리 년도 숫자를 반환. 

오른쪽 2자리만 사용하려면 dt.getFullYear().toString().slice(-2) 처럼 오른쪽 2자리만 가져오는 과정이 필요함.

getMonth()

월 숫자 반환. 

0부터 시작하기 때문에 실제 월이 되려면 1을 더해야 함.

앞에 0이 붙은 2자리수로 변경하려면 '0'+(dt.getMonth()+1)).slice(-2) 와 같이 '0' 을 붙이는 과정이 필요함.

getDate()

날짜 숫자 반환. 

앞에 0이 붙은 2자리수로 변경하려면 ('0'+dt.getDate()).slice(-2) 와 같이 '0' 을 붙이는 과정이 필요함.

요일

getDay()

0 ~ 6 까지의 요일 인덱스를 반환. 

0은 일요일. 순차적으로 월화수목금토 가 됨.

getHours()

24시간 표시 시간값 반환

getUTCHours() 는 로케일별 지역 시간, getHours()는 표준시 시간을 표시함.

getMinutes()

60분 표시 시간값 반환(0~59)

getSeconds()

60초 표시 시간값 반환(0~59)


* 지역 시간이 아닌 표준시간 기준으로 정보를 얻으려면 getUTCFullYear(), getUTCMonth(), getUTCDate(), getUTCDay(), getUTCHours(), getUTCMinutes(), getUTCSeconds() 와 같이 UTC가 붙은 메서드를 사용해야 합니다.



YYYY-MM-DD 10자리 날짜 구하기


let now = new Date();
//YYYY-MM-DD 포맷으로 날짜 얻기
console.log(now.getFullYear()+'-'+('0'+(now.getMonth()+1)).slice(-2)+'-'+('0'+now.getDate()).slice(-2));




코드 실행 시간을 밀리세컨드로 얻기


let start = Date.now(); // 시작시간
//코드 실행 부분
let end = Date.now(); //종료 시간
let elapsedTime = end - start// 경과한 밀리세컨드.
console.log(elapsedTime);



날짜 부분 정보 변경하기


날짜 객체는 날짜 정보를 변경할 수 있는 다양한 메서드들이 있습니다.

일부를 제외하고, 날짜 부분정보를 얻는 메서드와 쌍으로 매칭되는 메서드들이 있습니다.


그중 setFullYear(), setHours() 두 메서드는 파라메터를 3개까지 넘길 수 있는 특별한 메서드입니다.

년월일시분초를 각각의 메서드로 변경하는 번거로움을 피할 수 있게 대표 사용 메서드로 년월일 과 시분초를 한번에 설정할 수 있도록 제공합니다.


정보 

메서드 

설명 

setFullYear()

4자리 년도 숫자를 파라메터로 전달해 년도를 변경. 

년, 월, 일 파라메터 3개를 넘겨 년, 월, 일을 한꺼번에 설정할 수 있음. (예: dt.setFullYear(2020, 05, 22);)

setMonth()

월 숫자를 파라메터로 넘겨 현재 월 설정

0~11까지 입력 가능하며, 1월이 0이 됨.

setDate()

날짜 숫자를 파라메터로 넘겨 날짜 설정.

설정된 월을 기준으로 날짜 범위가 정해지며, 0이면 전월 말일, 현재 월 말일보다 클 경우 초과되는 날짜 수만큼 다음날 날짜로 설정됨. 이 경우 월 또한 다음달로 맞춰서 변경됨.

setHours()

24시간 표시 시간(0~23) 값을 파라메터로 전달해 시간 설정.

시, 분, 초 파라메터 3개를 전달해 시간 설정을 한번에 할 수 있음. (예 : dt.setHours(11, 15, 00);)

setMinutes()

60분 표시 시간값(0~59) 을 파라메터로 넘겨 분 설정

setSeconds()

60초 표시 시간값(0~59)을 파라메터로 넘겨 초 설정


* 지역 시간이 아닌 표준시간 기준으로 정보를 변경하려면 setUTCFullYear(), setUTCMonth(), setUTCDate(), setUTCDay(), setUTCHours(), setUTCMinutes(), setUTCSeconds() 와 같이 UTC가 붙은 메서드를 사용해야 합니다.


반응형

닫기