시계를 만들었는데 시계의 초 부분을 보면 한자리 숫자로 출력되는 게 보이는데 이것을 01, 03, 05처럼 두 자리 숫자가 출력되도록 만들어보자.
📌 PadStart()
padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다.
const abc = '15';
abc.padStart(2, '0'); // '15'
abc.padStart(3, '0'); // '015'
abc.padStart(4, '0'); // '0015'◎ 문법
string.padStart(<maxLength>, <padString>)📌 PadEnd()
padEnd() 메서드는 현재 문자열에 다른 문자열을 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 끝(우측)부터 적용됩니다.
const pade = '1';
pade.padEnd(2, '0'); // '10'
pade.padEnd(3, '0'); // '100'
pade.padEnd(4, '0'); // '1000'◎ 문법
string.padEnd(<maxLength>, <padString>)📌 매개변수
padStart() 메소드와 padEnd() 메소드는 같은 매개변수를 받는다.
◎ maxLength
이 매개변수는 같이 입력받는 padString의 반복횟수가 아닌 결과 문자열의 최대 길이 입니다.
const result = string.padStart(5);
result.length; // 5◎ PadString
이것은 옵션 값으로 원래 문자열에 덧붙일 문자열입니다. 만일 이 값을 입력하지 않으면 padString은 기본 값으로 공백을 가지게 됩니다.
'hi'.padStart(5);
// Same as
'hi'.padStart(5, ' ');여기서 빈 문자열을 전달하면 아무 패딩이 추가되지 않습니다.
const result = 'hi'.padStart(5, '');
result; // 'hi'
result.length; // 2📌 문자열의 길이가 maxLength 보다 길 경우
첫 번째 매개변수 maxLength 값이 padString을 넣을 만큼 길지 않은 경우 padString 값은 무시됩니다.
'hi'.padEnd(2, 'TOM'); // 'hi'또는 남는 문자열은 잘립니다. maxLength가 결과 문자열의 최대 길이를 의미하므로 원래 문자열에 padString을 추가하다가 최대 길이에 도달하면 나머지는 잘라버립니다.
'hi'.padEnd(7, 'SAMANTHA'); // 'hiSAMAN'
'hi'.padStart(7, 'SAMANTHA'); // 'SAMANhi'그리고 첫 번째 매개변수 maxLength가 원래 문자열 길이 보다 작은 경우 그냥 단순하게 원래 문자열을 리턴합니다.
'hello'.padEnd(1, 'TOM'); // 'hello'📌 Date() 메서드
| 메서드 | 설명 | 값의 범위 |
|---|---|---|
| getDate() | 현지 시각으로 현재 일자에 해당하는 숫자를 반환한다. | 1 ~ 31 |
| getDay() | 현지 시각으로 현재 요일에 해당하는 숫자를 반환한다. | 0 ~ 6 (월요일 1 ~ 일요일 0) |
| getMonth() | 현지 시각으로 현재 월에 해당하는 숫자를 반환한다. | 0 ~ 11 (0부터 시작 0 = 1월) |
| getFullYear() | 현지 시각으로 현재 연도를 4비트의 숫자(YYYY)로 반환한다. | YYYY |
| getHours() | 현지 시각으로 현재 시각에 해당하는 숫자를 반환한다. | 0 ~ 23 |
| getMilliseconds() | 현지 시각으로 현재 시각의 밀리초에 해당하는 숫자를 반환한다. | 0 ~ 999 |
| getMinutes() | 현지 시각으로 현재 시각의 분에 해당하는 숫자를 반환한다. | 0 ~ 59 |
| getSeconds() | 현지 시각으로 현재 시각의 초에 해당하는 숫자를 반환한다. | 0 ~ 59 |
Date() 메서드를 각각의 변수로 선언한다. 코드를 변경했지만 작동하지 않는다.
function getClock() {
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
padStart(), padEnd()를 사용하려면 기존에 작성했던 코드를 변경해 줘야 한다. date.getHours()엔 padStart()를 사용할 수 없다. getHours()는 Number이기 때문이다. 그래서 Number(숫자)에서 String(자료형)으로 변경해 줘야 할 필요가 있다. padStart()의 두 번째 매개변수 padString의 타입은 String이라서 다른 자료형을 입력하려면 toString()을 사용해 문자열 형태로 바꿔서 사용해야 한다.
const clock = document.querySelector("#clock");
function getClock() {
const date = new Date();
// 현재 날짜와 시간을 나타내는 new Date()를 date라는 변수로 선언한다.
// 인수를 전달하지 않으면 현재 날짜와 시간을 가지는 인스턴스를 반환한다.
const hours = date.getHours().toString().padStart(2, "0");
// padStart(2, "0") - string이 가져야 하는 길이를 2로 설정
// 그렇지 않다면 string의 앞쪽에 0을 추가하도록 한다.
const minutes = date.getMinutes().toString().padStart(2, "0");
const seconds = date.getSeconds().toString().padStart(2, "0");
// Date() 매서드가 padStart()를 사용할 수 있도록 toString()메서드를 사용해 Number에서 String로 변경해준다.
clock.innerText = `${hours}:${minutes}:${seconds}`;
// 변수로 선언한 Date() 메서드를 이용해서 시, 분, 초를 clock의 innerText로 넣어준다
}
getClock();
// 웹사이트가 로드되면 getClock()을 바로 호출한다.
setInterval(getClock, 1000);
// setInterval() 함수는 주기적으로 인자를 실행하는 함수이다. / 1초 뒤에 getClock()함수를 실행
// 첫번째 인자로 실행할 함수의 이름을 적는다. 두번째 인자로 반복 주기를 밀리초(ms) 단위로 받는다.
// setTimeout(sayHello, 3000);
// setTimeout() 함수는 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행하는 함수이다.
// 첫번째 인자로 실행할 함수의 이름을 적는다. 두번째 인자로 반복 주기를 밀리초(ms) 단위로 받는다.