Learn Template Literal

Template Literal 은 ES6(ES2015) 에서 새롭게 추가된 문자열 표기법 이다.
기존의 문자열 표기법 : 작은 따옴표(') 나 큰 따옴표(") 사용해 문자열 표기
Template Literal : 백틱을 사용해 문자열 표현(`).

특징

• 멀티 라인 문자열 지원
  기존에는 escape 문자인 \n을 사용해 줄바꿈,
  하지만 템플릿 리터럴에서는 멀티 라인 문자열 지원해 줄바꿈을 별도의 문자 없이 간편하게 할 수 있다.

• 표현식 삽입
  템플릿리터럴 내부에 ${} 사용해 변수나 표현식 삽입이 가능. 이를 통해 문자열 내부의 변수나 연산 결과 등을 동적으로 표현할 수 있다.

 const name = "Alice";
const age = 20;

// 기존 문자열 표기법
const str1 = "My name is " + name + " and my age is " + age;

// 템플릿 리터럴
const str2 = `My name is ${name} and my age is ${age}`;

위의 예시에서 str1 은 기존의 문자열 표기법, str2는 템플릿 리터럴
str2의 경우 ${} 안에 변수가 담겨 있어 동적으로 문자열 생성 + 간결하고 가독성이 더 좋다.