[Javascript] 디지털 날짜, 시간 표기할 때 2자리 숫자로 표현하기

저번 주에 프로그래머스 과제 테스트 연습을 멋 모르고 도전해봤다가 처참하게 털리고 나왔다 😭

라이브러리, 프레임워크, 구글링에 너무 의존한 나머지 스스로의 힘으로 바닐라 자바스크립트 코딩을 해본 적이 없다는 사실을 깨닫고 크게 좌절했었다 😔

그래서 요즘 노마드 코더의 바닐라 JS 강의를 듣고 있다.

그 중 시계 만들기를 오늘 수강했는데

시계든 날짜든 디지털로 표현되면 무조건 2자리가 되지 않는가?

포트폴리오 프로젝트를 진행할 때 나도 날짜를 2자리로 만들기 위해 애썼던 기억이 있다.

그리고 당시에는 문자열 데이터 앞에 0이나 00을 붙이고 slice를 활용해서 2자리로 잘라내는 방법을 사용했었다.

여기서도 같은 방법이겠거니~ 아니면 조건문을 사용하려나~ 했는데

웬 걸.......이미 문자열 객체에 메소드가 있는 게 아닌가!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

나는 무엇을 위해 헛된 시간을........🤣

그래서 기억해두려고 포스트를 작성하게 되었다.

 

padStart()

 

padStart() 메소드는 현재 문자열의 시작(좌측)을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다.

사용 방법 :
padStart(목표하는 문자열 길이)
padStart(목표하는 문자열 길이, 채워넣을 문자열)

반환 값 : 좌측부터 문자열을 채워, 목표 길이를 충족하는 새로운 문자열 객체

 

1. 목표하는 길이가 현재 문자열보다 짧을 경우, 따로 문자열을 채워넣지 않고 그대로 반환한다.

2. 채워넣을 문자열을 따로 지정하지 않는 경우, 기본값은 공백 하나가 들어있는 문자열(" ")이 된다.

3. 현재 문자열 + 채워넣을 문자열의 길이가 목표 길이보다 길어지는 경우, 채워넣을 문자열의 뒷부분을 잘라낸다.

 

아래는 공식 문서에서 제공하는 예시.

// 목표 길이가 될 때까지 반복해서 넣는다.
'abc'.padStart(10, "foo"); // "foofoofabc"

// 목표 길이보다 길어지는 경우 잘라내어 시작점(좌측)부터 넣는다.
'abc'.padStart(6,"123465"); // "123abc"