ES6 자바스크립트 템플릿 리터럴(Template literal)에 관하여

템플릿 리터럴(Template literal)이란?

자바스크립트 ES6에 새로 등장한 문자열 표기법이다.

'과 " 같은 문자로 표기했던 이전 문법을 대신하여 백틱(backtick)`을 사용한다.

 

일반적인 줄바꿈을 표현하기 위해서는 백슬래시(\)인 이스케이프 시퀀스를 사용했어야 한다.

하지만 템플릿 리터럴을 활용하면 사용하지 않고 자유롭게 작성이 가능하다.

 

예시

white-space가 작성한 그대로 적용이 된다.

const list = `<ul class="list-box">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>`

 

템플릿 리터럴의 또다른 장점은 연산자를 사용하지 않고 ${} 로 문자열 삽입이 가능하다.

//ES5 
const firstName = "Hong";
const lastName = "gildong";

console.log("Hello my name is" + ' ' + firstName + lastName);


//ES6
console.log(`Hello my name is ${firstName}${lastName}`);

 

 

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals