Template Literals
ES6부터 도입된 새로운 문자열 표기법인 템플릿 리터럴
-
멀티라인 문자열, 표현식 삽입, 태크그 템플릿 등 편리한 문자열 처리 기능을 제공하며 런타임에 일반 문자열로 변환되어 처리된다.
-
`` 백틱 이라는 기호를 사용하여 정의한다
- 문자와 변수를 함께 쓸 수 있는 도구이며 ${변수명}으로 String과 변수를 연산자로 더해주지 않아도 가독성이 좋게 코드를 작성할 수 있다
const str = `Hello ES6`- 문자열은 문자열 연산자 + 를 사용해서 아래와 같이 연결할 수 있는데
const first = 'Sohyeon'
const last = 'Kim'
// 문자열 연결
console.log('My name is ' + first + ' ' + last + '.');
//My name ist Sohyeon Kim.- 템플릿 리터럴을 사용하면 표현식 삽입을 통해 간단히 문자열 연산자 보다 가독성 좋고 간편하게 문자열을 연결할 수 있다.
const first = 'Sohyeon'
const last = 'Kim'
// 문자열 연결
console.log(`My name is ${first} ${last}.`);
//My name ist Sohyeon Kim.-
표현식을 넣으려면 ${}으로 표현식을 감싼다. 이때 표현식의 평가 결과가 문자열이 아니더라도 문자열로 타입이 강제로 변환되어 삽입된다.
-
또한 JS 문자열은 문자 중간에 enter를 치면 안되지만 템플릿 리터널 내에서는 줄바꿈이 허용되며, 모든 공백도 있는 그대로 적용된다.
const template =`<ul>
<li>${fruit}</li>
</ul>`
console.log(template)
// 출력결과
<ul>
<li>${fruit}</li>
</ul>- 공백도 입력한 만큼 출력이 된다.
var fruit = "apple";
var test3 = `배고파 뭐 먹냐 그건 바로 ${fruit}이다`
console.log(test3)
//'배고파 뭐 먹냐 그건 바로 apple이다'참고및 출처
모던 자바스크립트 Deep Dive
slow but sure