[Javascript] Date() 관련 메소드 정리

1) Date()  생성자

Date 객체를 생성한다. 인수로는 다양한 형태가 올 수 있다. 아래는 MDN에서 제공한 구문 예시다.

new Date()
new Date(value)
new Date(dateString)

new Date(year, monthIndex)
new Date(year, monthIndex, day)
new Date(year, monthIndex, day, hours)
new Date(year, monthIndex, day, hours, minutes)
new Date(year, monthIndex, day, hours, minutes, seconds)
new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds)

실제 연습해보았다.

var date1 = new Date();
var date2 = new Date(2023,2,15,14,50); //(month+1) 주의 
var date3 = new Date('2023-02-28'); 
var date4 = new Date('2023-01-31 11:20:30');

document.write(date1); //Wed Mar 15 2023 21:35:03 GMT+0900 (한국 표준시) //현재 시간
document.write(date2); //Wed Mar 15 2023 14:50:00 GMT+0900 (한국 표준시)
document.write(date3); //Tue Feb 28 2023 09:00:00 GMT+0900 (한국 표준시)
document.write(date4); //Tue Jan 31 2023 11:20:30 GMT+0900 (한국 표준시)

console.log로 할 경우 아래와 같이 시간 쪽이 직관적이지 못했다. T-Z 문구가 섞여있었다. 검색 결과 이는 ISO-8601 형태로 표현된 값이며 이런 형태를 사용하게 된 이유는 서로 다른 타임존을 갖고 있는 클라이언트들을 관리하기 위해서였다. 더 자세한 내용은 참고한 아래 사이트에서 확인해보면 될 듯 하다.  

Console.log 결과

자바스크립트에서 타임존 다루기 (2) : NHN Cloud Meetup

 

2) Date 객체의 기본 함수 (get/set)

get은 반환, set은 대입하는 역할을 한다.

var dt = new Date('2010-11-25')
console.log(dt.getDate());  //25
dt.setDate(13);
console.log(dt.getDate()); //13

(1) get/set 함수

함수명		의미	설명
getFullYear()	setFullYear()	년도
getMonth()	setMonth()	월	0~11 > 1월~12월
getDate()	setDate()	일
getDay()	setDay()	요일	0~6 > 일요일 ~ 토요일
getHours()	setHours()	시간
getMinutes()	setMinutes()	분
getMilliseconds()	setMilliseconds()	밀리초
getSeconds()	setSeconds()	초
getTime()	setTime()	Unix 타임	1970/1/1 12:00 기준 경과한 밀리 초

(2)예시

Date()로 생성된 객체의 Type은 [object Date]이다. 

let a = new Date();
console.log(a); //[object Date] 현재 날짜 (2023-03-15T13:25:27.588Z)
console.log(typeof a); // object
console.log(a.getDate()); //15 
console.log(a.getFullYear()); // 2023
console.log(typeof a.getDate()); //Number

 

3) 날짜 연산 예시

연산 예시
오늘	var dt = new Date();
365일 뒤	dt.setDate(dt.getDate()+365);
1년 전	dt.setFullYear(dt.getFullYear()-1);

 

4) Date 객체의 문자열 변환

(1)함수

 

함수명		설명
toString()		Thu May 17 2018 17:15:11 GMT+0900 (대한민국 표준시)
toDateString()		Thu May 17 2018
toLocaleString()		2018. 5. 17. 오후 5:15:11
toLocaleDateString()		2018. 5. 17.

(2)예시

 

let a = new Date();

console.log(a.toString()); //Wed Mar 15 2023 22:29:56 GMT +0900 (한국 표준시)
console.log(typeof a.toString()); // String

console.log(a.toDateString()); //Wed Mar 15 2023
console.log(typeof a.toDateString()); // String

console.log(a.toLocaleString()); // 2023.3.15 오후 10:29:56
console.log(typeof a.toLocaleString()); // String

console.log(a.toLocaleDateString()); // 2023.3.15
console.log(typeof a.toLocaleDateString()); // String

(3)toLocaleString() - 데이터 현지화

값의 타입인 Number, Date에 따라 달라지며, 지역에 맞춘 표현방식으로 값을 변환하여 리턴한다. Array 및 object 데이터일 때의 toLocaleString은 생략한다.

 

①Number.prototype.toLocaleSting()

지정된 지역에서 사용하는 숫자의 표현방식으로 문자열로 리턴한다. 1,000 단위마다 ,(쉼표)로 구분하는 영미문화권 숫자표기법을 함수 기본값으로 하므로  아래에 따라 쉽게 천 단위마다 ,(쉼표)를 찍어 숫자를 나타낼 수 있다.

var testNumber = 100000000.0235809;
console.log(testNumber.toLocaleString());
//it returns 100,000,000.024

참고로 소수점 아래 숫자를 세 자리 이상 출력하고 싶다면 아래와 같이 하면 된다.

var testNumber = 100000000.0235809;
console.log(testNumber.toLocaleString(undefined, {maximumFractionDigits: 5}));
//it returns 100,000,000.02358

 

②Date.prototype.toLocaleString()

지정된 지역에서 표현하는 방식의 날짜를 문자열로 리턴한다.

 

5)참고 URL

(1)기본 함수 관련

[자바스크립트] Date() 기본 사용 방법

(2)toLocaleString() 관련

[JavaScript/자바스크립트] 숫자 천 단위마다 콤마 찍는 내장 함수(toLocaleString)

 

 

Javascript 내장함수를 이용한 숫자/날짜의 현지화