JavaScript

[JavaScript] 백틱(``)으로 값을 작성하는 것에 대하여

출근침대 2021. 6. 4. 18:48

백틱(``)을 배웠다..!

근데 쓰임새가 조금 어려운듯 하다.

편하라고 쓰는데 말이다.

오히려 그냥 문자열끼리, 변수끼리 단일 따옴표로 감싸고 +로 이어주기만 하면 되는 방식이

단순하게 생각해도 되서 더 편한 것 같기도 하다.

 

하지만 백틱을 쓰는 것이 번거러워도 꽤 코드를 단순화시킬 수 있을 때가 있는데

그것은 바로 삼항연산자를 쓸 때이다.

삼항 연산자는 어떠한 조건의 값이 true냐 false냐에 따라 원하는 값을 달리 작성하고자 할 때 요긴하게 쓰인다.

 

우선 백틱은 문자열과 변수를 함께 사용하고 싶을 때 변수이름은 ${}안에 넣어주고

그렇게 감싸준 변수명과 문자열을 다시 한 번 감싸줄 때 사용된다.

 

그리고 값을 작은 따옴표에 써줘야 할 때 백틱을 사용해서 써주고 싶다면 어떻게 해야 하나?

그것은 이렇게 써주면 된다.

  timerContainer.innerHTML = `${eveDay}d 
  ${eveHour < 10 ? `0${eveHour}` : eveHour}h 
  ${eveMin < 10 ? `0${eveMin}` : eveMin}m 
  ${eveSec < 10 ? `0${eveSec}` : eveSec}s`;

우선 전체 값을 백틱 안에 감싸고

삼항 연산자에서 true와 false에 해당되는 값에서 백틱이 필요할 때만

추가적으로 다시 백틱을 써주면 된다

(여기선 전부 true에 해당되는 값만 백틱을 써야해서 붙여주었다)

 

이것이 헷갈려서 기록해두려고 왔다. 후후 나도 이제 백틱 마슷허!!