탬플릿 리터럴
간단히 말하면 일반적인 문자열과 유사하나 따옴표 대신 벡틱 "`" 을 사용하는것을 말한다.
일반적인 문자열에서는 줄바꿈은 허용되지 않고, 공백(white-space)을 표현하려면 벡슬레시() 로 시작하는 이스케이프 시퀀스 라는것을 사용해야한다. 그러나 템플릿 리터럴에서는 일반적인 문자열과는 달리 여러줄에 걸쳐 문자열을 작성가능, 그 안의 모든 white-space는 있는 그대로 적용된다. 심지어는 '+' 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능을 제공한다
console.log("string text line 1\n"+ "string text line 2"); // "string text line 1 // string text line 2"console.log(`string text line 1 string text line 2`); // "string text line 1 // string text line 2"
let a = 5; let b = 10; console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + "."); // "Fifteen is 15 and // not 20."
해당 부분을 template literals를 이용하면 더욱 쉽고 간편히 작성할 수 있다.
console.log(`Fifeen is ${a+b} and not ${ 2 * a + b} .`); // "Fifteen is 15 and // not 20.""+" 연산자 없이 심지어는 줄바꿈 기호인 \n(newline characters) 도 없어도 같은 결과가 나온다.
이것을 문자열 인터폴레이션이라고한다.(String Interpolation)
문자열 인터폴레이션은 ${ … }으로 표현식을 감싼다. 문자열 인터폴레이션 내의 표현식은 문자열로 강제 타입 변환된다.
console.log(`1 + 1 = ${1 + 1}`); // "1 + 1 = 2"템플릿 리터럴 앞에 어떠한 표현식이 있다면(여기에서는 태그), 템플릿 리터럴은 "태그가 지정된 템플릿"이라고 불리게 됩니다. 이 때, 태그 표현식 (주로 함수)이 처리된 템플릿 리터럴과 함께 호출되면, 출력하기 전에 조작할 수 있습니다. 템플릿 리터럴 안에서 백틱 문자를 사용하려면 백틱 앞에 백슬러쉬()를 넣으십시오. -- MDN
\`` === "" // --> true
출처:https://poiemaweb.com/es6-template-literals & https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
