template literals는 ES6에서 새로 추가 된 문법 중 하나입니다. 템플릿 리터럴은 이중 따옴표 ("")나 작은 따옴표('') 대신 백틱( )을 이용하여 문자열을 표현합니다.
변수 표현
ES5까지는 문자열과 함께 변수를 표현 할 때에는 아래와 같은 방식으로 표현 했습니다.
const name = '이예린'
const hi = '안녕하세요. 저는 ' + name + ' 입니다.';template literals를 사용하면 다음과 같이 표현 할 수 있습니다.
const name = '이예린'
const hi = `안녕하세요. 저는 ${name} 입니다.`;더욱 간결하고 직관적으로 표현할 수 있게됐습니다.
개행표현
ES5까지는 문자열 엔터 처리(개행, break line)를 할 때에는 아래와 같은 방식으로 표현 했습니다.
let satorSquare = '개똥아\n똥쌌니\n아니오';
console.log(satorSquare);
// 개똥아
// 똥쌌니
// 아니오template literals를 사용하면 다음과 같이 표현 할 수 있습니다.
let satorSquare = `개똥아
똥쌌니
아니오`
console.log(satorSquare);
// 개똥아
// 똥쌌니
// 아니오