[Javascript, ES6] 2. 템플릿 리터럴(Template Literal)

ES6는 템플릿 리터럴(Template Literal)이라고 불리는 새로운 문자열 표기법을 도입하였습니다. 템플릿 리터럴은 일반 문자열과
비슷해 보이지만, ' 또는 " 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 `를 사용합니다.

const template = `템플릿 리터럴은 '작은따옴표(single quetes)'와 "큰따옴표(double quotes)"를 혼용할 수 있다.`;

console.log(template);

일반적인 문자열에서 줄바꿈은 허용되지 않으며 공백을 표현하기 위해서는 백슬래시(\)로 시작하는 Escape Sequence를 사용해야 합니다.
ES6 템플릿 리터를은 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며, 리터럴 내의 모든 공백은 그대로 적용됩니다.

const template = `<ul class="nav-items">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>`;

console.log(template);

템플릿 리터럴은 + 연산자를 사용하지 않아도 간단하게 새로운 문자열을 삽입할 수 있는 기능을 제공합니다.
이것을 String Interpolation이라고도 부릅니다.

const first = 'Ung-mo';
const last = 'Lee';

// ES5: 문자열 연결
console.log('My name is ' + first + ' ' + last + '.');
// "My name is Ung-mo Lee."

// ES6: String Interpolation
console.log(`My name is ${first} ${last}.`);
// "My name is Ung-mo Lee."

String Interpolation은 ${ ... }으로 표현식을 감쌉니다. 이 표현식 내의 값들은 문자열로 강제 타입 변환됩니다.
(JSP에서 Model에 담겨진 값을 가져와서 화면에 동적으로 적용할때 쓰던 표현식과 같군요) - 잡설..

console.log(`1 + 1 = ${1 + 1}`); // "1 + 1 = 2"

 

해당 내용은 제 개인 학습용 혹은 필요할때 참조용 레퍼런스로 간편하게 찾아보기위해  poiema web의 내용을 그대로 배껴온 것으로
중간중간 저의 느낀점만 숟가락 얹듯이 할 것 같습니다. 
https://poiemaweb.com/es6-template-literals

Template Literals | PoiemaWeb

자세한 내용은 해당 링크에 있습니다.