템플릿 리터럴(Template Literal)

Template Literal

템플릿 리터럴은 ES6에서 등장한 내장된 문자열 표현식입니다.
템플릿 리터럴에서 중요한 점은 "큰따옴표나 '작은 따옴표 대신 `백틱으로 감싸주는게 중요합니다

console.log("철수는 사과를 " + apple + '개, '+ '바나나를 ' + banana + "개 가지고 있습니다.")
//철수는 사과를 3개, 바나나를 2개 가지고 있습니다.

ES6 이전엔 표현식을 다음과 같이 일반 문자열 안에 집어넣었습니다.

console.log(`철수는 사과를 ${apple}개, 바나나를 ${banana}개 가지고 있습니다.`)

//철수는 사과를 3개, 바나나를 2개 가지고 있습니다.

`백틱을 이용해 감싸주면 +를 쓰지않고 편하게 ${}을 이용해 변수를 받아올 수 있다. +를 이용하는 것 보다 가독성이 좋습니다.
또 백틱이용시에는 줄바꿈(Multi- line template)가능하다.
shift+enter

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"

Taged Template사용가능하다.

ex)

중첩 템플릿
백틱() 문자열 내부에 백틱()을 넣어 중첩된 구조로 사용할 수 있습니다.

템플릿 리터럴 MDN문서
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals