ES6의 템플릿 리터럴

자바스크립트가 ES6로 넘어오며, '템플릿 리터럴'이라는 내장 표현식을 허용하는, 새로운 문자열 표기법을 도입하였다.

템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘(Quotes) 또는 “pair
Quotes" 같은 문자 대신 ` 그레이브 액센트 (grave accent)라는 문자를 사용한다.
이는 코드 작성환경에서 바라보는 코드 입력값의 형태와, 실제 렌더 적용되어지는 그 결과 값을 최대한 시각적으로 같게끔 도와준다.(이전 버전보다 상대적으로)

구문  : 
`string text` // 백틱으로 시작해서 백틱으로 닫기

`string text line 1
 string text line 2`  // 템플릿 리터럴로 시작으로 코드작성을 한다면, 동일하게 줄바꿈이 마크업에서 적용된다.

`string text ${expression} string text` // 템플릿 리터럴내에서는 ${variable..}(중괄호)로 변수를 표기할 수 있으며, 내부 자체적으로 값을 지닌다. (String Interpolation , 문자열 인터폴레이션 , 이 값은 문자열로 변환된다.)

tag `string text ${expression} string text` // 태그 함수를 이용하여, 템플릿 리터럴의 논리값을 파싱해올 수 있다. 여기선 다루지 않겠다.

템플릿 리터럴이 아닌경우, 공백을 표현하거나 (\ , 이스케이프 시퀀서 ) ,줄바꿈을 표현하는 경우 (\n)의 방식과 개념이 다르다. 앞서 말한것처럼 직관적인 코드 에딧 환경과 렌더 작업물에서의 값을 최대한 닮아있는 형태이다. 따라서 줄바꿈을 템플릿 리터럴 내부에서 진행할 경우, 멀티라인으로 코드를 작성해주면 된다.

console.log("World war 1\n"+
"World war 2");

=>

 `World war 1
  World war 2`

const compLists = `<ul class="new-list">
  <li><a href="#class-1">1</a></li>
  <li><a href="#class-2">2</a></li>
  <li><a href="#class-3">3</a></li>
  <li><a href="#class-4">4</a></li>
</ul>`; 

// 직관적인 마크업 제공

console.log(compLists);