JavascriptES6

템플릿 리터럴

js, javascript, es6, template literal

템플릿 리터럴

일반 문자열과 비슷해 보이는 템플릿 리터럴이지만 ES6에서는 백틱 문자를 도입했다.

const template = `템플릿 리터럴은 백틱안에서 '작은 따옴표', "큰 따옴표"를 사용할 수 있어요.!`
console.log(template);

백틱문자는 키보드의 물결표시와 함께 있다.

또한 일반 문자열에서 줄바꿈이 안되어 사용하던 white-space나 백슬래쉬(\)를 사용할 필요 없이 여러줄에 걸쳐서 사용이 가능하다.

const soccerplayers = `<ul class="player">
  <li><a href="#">램파드</a></li>
  <li><a href="#">제라드</a></li>
</ul>`;
console.log(soccerplayers);

+를 사용하지 않고 새로운 문자열을 삽입할 수도 있다.

const first = 'Frank';
const second = 'Lampard';

console.log('I like ' + first + ' ' + second + '.');

console.log(`I like ${first} ${second}.`);

${expression}을 템플릿 대입문이라고 한다. 문자열말고도 자바스크립트 표현식에서 사용할 수 있다.

Share