[ES6] 템플릿 문자열

JS : ES6 템플릿 문자열

 

 

* 위 식을 자바스크립트를 이용해서 표현합니다.

* 기존 식은 따옴표(", ')을 활용하여 문자열과 표현식을 나눠서 작성합니다. (아래 스크립트와 동일)

console.log('1 더하기 1은 '+ (1+1) + '입니다.')

 

 

* 위 식은 한번정도까진 괜찮지만 문자열 사이 표현식이 많아질 수록 코드가 복잡해지기 때문에 작성과 수정이 점점 어려워지게 됩니다.

* 위 예시에서 1더하기 1의 숫자 1을 표현식으로 작성한다고 생각하면(아래)

console.log(1 + '더하기' + 1 + '은' + (1+1) + '입니다.')

위와 같이 코드를 작성하면서 점점 복잡해지게 되죠~

 

 

그래서 ES6 이후 만들어진 템플릿 문자열을 이용하면 편하게 문자열과 표현식을 연결할 수 있습니다.

따옴표(")가 아닌 => 밴틱(`) 기호 활용법

 

 

* 크게 밴틱(`)에 묶어주고 표현식에 해당하는 부분은 ${ } 에 묶어서 중괄호안에 원하는 표현식을 작성합니다.(아래)

console.log(`1 더하기 1은 ${1+1}입니다.`)

console.log(`${1} 더하기 ${1}은 ${1+1} 입니다.`)