[자바스크립트] 시계 10 이하 숫자 두자리수로 만들기(if문 단축형/축약형)

Date() 함수로 시간을 불러오면 01 02 03 이런식으로 출력되는 게 아니라 1 2 3 이런식으로 출력되는데

시각적으로 예쁘지 않으니까 10 이하의 숫자는 앞에 0이 붙도록 만들어보자!

 

 

 

function getTime(){
    const date = new Date();
    const min = date.getMinutes();
    const hour = date.getHours();
    const sec = date.getSeconds();
    clockTitle.innerText=`${hour}:${min}:${sec}`;
}

 

 

반응형

 

 

2. 두자리수로 사용하고 싶은 부분에 ${x<10?`0${x}`:x} 이런식으로 붙여준다.

 

간단히 해석해보자면

 

${ } 이 안에

x<10?  //x가 10보다 작을때에

`0${x}`  //true면 `0${x}` 출력하고

x        //false이면 x를 출력한다

function getTime(){
    const date = new Date();
    const min = date.getMinutes();
    const hour = date.getHours();
    const sec = date.getSeconds();
    
    
    clockTitle.innerText=`${hour<10?`0${hour}:hour`}:${min<10?`0{min}`:min}:${sec<10?`0${sec}`:sec}`;
    
    
}

 

결과

 

 

[참고]

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

삼항 조건 연산자 - JavaScript | MDN