Template literals

템플릿 리터럴(Template literals)

• ES6부터 새로 도입된 문자열 표기법이다.
• 표현식/문자열 삽입, 여러 줄 문자열 등 다양한 기능을 제공한다.
• 템플릿 리터럴은 런타임 시점(크롬,파이어폭스,익스플로러)에
  일반 자바스크립트 문자열로 처리/변환된다.

// 기존의 따옴표 방식 예제
const name : "철수"
const age: 18

console.log("저의 이름은 " + name + "이고, 나이는 " + age + "입니다.") //'저의 이름은 철수이고, 나이는 18입니다.'

기존의 따옴표 방식에는 줄바꿈이 허용되지 않아. 백슬럿()로 시작하는 이스케이프 시퀀스를 사용해야하며, "+" 연산자로 여러번 이어 붙이게 되는데, 이 과정에서 실수하게 된다면 코드를 다시 살펴보게 되고, 처음 접하시는 비전공자 같은 경우에는 오류로 인해 하나하나 찾는 시간이 늘어나게 된다.

// ``(백틱) 사용 예제
const name : "철수"
const age: 18

console.log(`저의 이름은 ${name}`이고, 나이는 ${age}입니다.) //'저의 이름은 철수이고, 나이는 18입니다.'

다음은 백틱(`) 사용 예제이다.
기존 따옴표 방식에는 +연산자로 여러번 이어 붙여야 한다면 백틱 같은경우 + 연사자를 사용하지 않고 (``) 안에 가지고 오고싶은 변수를 $(변수명)을 가져와 값을 얻을 수 있고, 또 기존 따옴표방식에 비해 가독성이 좋고, 코드가 한결 편안해진 느낌이 든다.![]