(Javascript) Date () 관련 메소드의 정리

  • by

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로 했을 경우, 아래와 같이 시간 쪽이 직관적이지 않았다.

TZ의 문구가 섞여 있었다.

검색 결과는 ISO-8601 형식으로 표현된 값이며, 이 형식을 사용한 이유는 다른 시간대를 가진 클라이언트를 관리하기 위한 것이었다.

자세한 내용은 참고한 아래 사이트에서 확인해 보면 좋을 것이다.


Console.log 결과

자바스크립트에서 시간대 처리(2): NHN Cloud Meetup

자바스크립트에서 시간대 처리(2)

meetup.nhncloud.com

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() 유닉스 타임 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 = 새로운 날짜();
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

덧붙여서 소수점 아래의 숫자를 3자리 이상 출력하고 싶은 경우는, 이하와 같이 하면 된다.

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

②Date.prototype.toLocaleString()

지정된 지역에서 표현하는 방법의 일자를 캐릭터 라인으로 돌려줍니다.

5) 참고 URL

(1) 기본 함수 관련

(JavaScript) Date () 기본 사용법

Date() 기본 사용법 Date 객체 만들기 1 2 3 4 var date1 = new Date(); // 현재 날짜와 시간 var date2 = new Date(1991, 11, 25, 3, 50); // 1991 년 12월 25일 3:50:00 (월 +1 주) var date3 = new Date(‘2014-6-4’); // 2002년 1월 1일 09:00:00

dororongju.

(2) toLocaleString () 관련

(JavaScript / JavaScript) 수천 단위마다 쉼표를 사용하는 내장 함수 (toLocaleString)

(JavaScript / JavaScript) 수천 단위마다 쉼표로 찍는 내장 함수 (toLocaleString) 나는 이전에 이러한 문장을 쓴 적이있다.

(JavaScript / JavaScript) 수천 단위마다 쉼표로 취하는 함수 정규식을 통해 세 문자

this-programmer.

Javascript 내장 함수를 사용하여 숫자 / 날짜 현지화

Javascript의 toLocaleString을 이용하여 각국의 표기 방법에 맞는 수치/날짜를 표기하는 방법과 toLocaleSting의 부모 객체인 Intl의 간단한 설명입니다.

blog.munilive.com