1. 템플릿 리터럴이란?

ES6에서 추가된 문법에서 가장 편리한 것 중 하나가 ' Template Literals ' 입니다.
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다.
여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다.
템플릿 리터럴은 런타임 시점에 일반 자바스크립트 문자열로 처리/변환됩니다.
프론트엔드에서는 HTML을 데이터와 결합해서 DOM을 다시 그려야 하는 일이 빈번하기 때문에, 템플릿을 좀 더 쉽게 편집하고 작성해야 할 필요가 있어서, 이러한 기능이 추가되었습니다.
(자바스크립트 자체적으로 지원하기 전에도 라이브러리로 존재했습니다.)

2. 표현법

└ 2-1 기본 사용법

const a = 20;
const b = 10;
const c = "자바스크립트";
const str = "저는 " + (a + b) + "살이고 " + c + "를 좋아합니다.";

//저는 30살이고 자바스크립트를 좋아합니다.

ES6 이전엔 표현식을 다음과 같이 + 표현식을 문자열과 변수 사이사이 번거롭게 사용해 왔습니다.

const a = 20;
const b = 10;
const c = "자바스크립트";
const str = `저는 ${a+b}살이고 ${c}를 좋아합니다.`;

//저는 30살이고 자바스크립트를 좋아합니다.

템플릿 리터럴은 작은따옴표( ' )나 큰따옴표( " ) 대신 백틱( ` )(키보드 숫자 1 옆에 있음)로 감싸주고.
위와 같이 $와 중괄호{ } 안에 변수를 사용하여 표현식을 표기할 수 있습니다.
+연산자로 문자열을 연결해주는 것보다 가독성이 더 좋습니다.

└ 2-2 추가 사용법

• Multi-Line String

const a = 20;
const b = 8;
const c = "자바스크립트";
const str1 = "저는 " + (a + b) + "살이고 " + c + "를 좋아합니다.\nC++ 또한 좋아합니다";
const str2 = `저는 ${a+b}살이고 ${c}를 좋아합니다.
C++ 또한 좋아합니다.`;

// - 결과값 같음
//저는 28살이고 자바스크립트를 좋아합니다.
//C++ 또한 좋아합니다.

====================================================================

• Array

const test = ["안녕", "하세요", "저는", "김땡떙", "입니다."];
const str = `${test}`;

//안녕,하세요,저는,김땡땡,입니다.

배열은 모든 인덱스를 표현해주며 콤마( , )까지 같이 나옵니다.

템플릿 리터럴에 대한 더 자세한 내용은 MDN을 참조하시면 됩니다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals