템플릿 리터럴

ES6에서 템플릿 리터럴이라고 불리는 새로운 문자열 표기법이 생겼다. 이전에는 문자열을 표현하기 위해선 ' 또는 "를 사용했는데, 템플릿 리터럴은 백틱을 사용한다. 템플릿 리터럴은 ' 와"를 혼용해서 사용할 수 있다. 그리고 이전에는 줄바꿈을 표현하기 위해선 \n을 넣어줘야 인식을 했지만 템플릿 리터럴은 있는 그대로 인식한다.

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

const template = `<div class="container">
	<span>백슬래시 없이 줄바꿈 인식</span>
</div>`;
console.log(template);

또한, 변수를 선언하고 그것을 문장으로 표현하기 위해선 +연산자를 이용해야만 했다. 템플릿 리터럴은 +연산자를 사용하지 않아도 문자열을 삽입할 수 있는 기능이 있다. 그것을 문자열 인터폴레이션(String Interpolation)이라 한다.

const firstName = 'Gildong';
const lastName = 'Hong';

// ES5: + 연산자 이용
console.log('My name is ' + firstName + ' ' + lastName + '.');
// My name is Gildong Hong.

// ES6: 문자열 인터폴레이션
console.log(`My name is ${firstName} ${lastName}.`);
// My name is Gildong Hong.

문자열 인터폴레이션은 제이쿼리를 다루어보신 분이라면 한번쯤 보셨을것이다.

문자열 인터폴레이션 내의 표현식은 강제로 문자열로 타입 변환이 된다는 속성이 있다.

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

• Reference
  https://poiemaweb.com/es6-template-literals