template literal 예시
여러 변수와 문자열들을 합쳐서 하나의 문자열을 만들 때를 떠올려보자.
따옴표가 많아서 경계를 알기가 헷갈리는 경우가 있었다.
이런 경우 template literal로 훨씬 파악하기 좋게 사용할 수 있다.
eslint도 template literal을 권장한다.
변수 값 참조, 연산은 어떻게?
이런 경우는
${변수명} ${수식} 으로 가능하다.
주의사항
백틱 안에 있는 모든 것을 하나의 문자열로 처리한다.
공백과 줄바꿈 까지 포함한다는 점만 주의하여 사용하면 된다.
자동으로 toString 처리
console.log(`${[0, 1, 2]}`) // 0,1,2 console.log(`${{a:1, b:2}}`) // [object Object] console.log(`${function(){return 1;}}`) // function(){return 1;} console.log(`${(()=>3)()+5}`) // 8
api response 받아서 console.log 찍으면 [object Object]로 출력되는 경우를 많이 보게된다.
중첩 백틱 처리
문자열 예쁘게 처리하는 팁
``백틱 경계는 원래 인덴트로 해놓고,문자열에 해당하는 부분은 들여쓰기 다 지우고 작성한 후 최종 문자열에서
.trim() 함수를 통해서 맨앞과 맨뒤에 쓸데없는 공백, 줄바꿈을 지워주도록 하면 작성했던 모습과 동일하게 깔끔하게 나옴.function test(){ return ` hi hi hi hi hi hi hi ` } console.log(test()) hi hi hi hi hi hi hi
function test(){ return ` hi hi hi hi hi hi hi `.trim() } console.log(test()) hi hi hi hi hi hi hi