[Javascript] 현재날짜 yyyy-MM-dd 형태로 0채워서 출력하기(feat. padStart)

프로젝트를 진행하다보면 현재 날짜(오늘 날짜)를 yyyy-MM-dd 형태로 표현하는 것이 종종 요구되곤 한다.

DB에서 날짜를 받아오는 것도 Date 타입 timestamp 타입 등의 사용으로 간혹 문제가 생기곤 하는데,

자바스크립트에서도 날짜를 따로 처리해야할 때가 있다보니 그냥 쉽게 정리해두려고 한다.

 

 

- 요구 사항 -

1. 자릿수 형태를 맞출 것
2. 요일을 표시해줄 것

 

기존에는 따로 코드를 더 작성해서 0을 처리하곤 했었는데, 이번에는 Javascript에서 제공하는 padStart 를 이용해보기로 했다.

padStart는 고정 자릿수와 채울 문자열을 파라미터로 받는 아주 간편한 내장함수다.

이를 이용해서 우선 코드를 작성해보겠다.

 

<!-- Javascript -->
initDate();

const initDate = () => {
    const test = $('#test');
    
    const today = new Date();
    const day = ["일", "월", "화", "수", "목", "금", "토"];
    
    const year = today.getFullYear();
    const month = today.getMonth() + 1;
    const date = today.getDate();
    const dayNum = today.getDay();
    
    test.text(`${ year.toString().padStart(4, "0") }-${ month.toString().padStart(2, "0") }-${ date.toString().padStart(2, "0") }(${ day[dayNum] })`);
}

<!-- JSP -->
<table>
    <thead>
    </thead>
    <tbody>
    	<tr>
            <td id="test"></td>
        </tr>
    </tbody>
</table>

 

위와 같이 코드를 작성하게 되면

ID 속성값이 test인 td에 다음과 같이 날짜가 들어가게 된다.

 

2022-02-16(수) 

 

반응형

 

 

[ 코드 설명 ]

 

코드에 대해서 설명하면,

우선 padStart는 문자열에 대한 내장함수이다.

 

그렇기 때문에 new Date()로 현재 Datetime을 받고,

getFullYear()나 getMonth()+1 등으로 년도나 월 등의 값을 형태에 맞게 받은 후,

String 형태로 형변환을 해줄 필요가 있다.

String 형변환은 'String(값)' 이나 '값.toString()' 등으로 할 수 있으며, 여기서는 toString()을 사용하였다.

 

year.toString().padStart(4, "0")
month.toString().padStart(2, "0")

 

년도는 4자릿수, 월/일은 2자릿수를 유지해야하므로

padStart의 첫번째 인자값으로 4와 2를 각각 넣어주었고, 빈 공간은 "0"으로 채워주기 위해 2번째 인자값으로 넣었다.

이렇게 코드를 작성하면 1월은 01 로 0이 채워져 표시가 된다!

 

🤞 도움이 되셨기를 바랍니다. 한 번의 클릭과 댓글은 어딘가의 누군가에게 진실로 큰 힘이 됩니다. 🐱‍🏍