자바스크립트에서 문자를 다룰 때 어려웠던 점을 해결하기 위해 나온 문법이다.
따옴표 대신 backquote, backtick 이라는 `` 기호를 사용해서 문자를 만들면된다.

1. 문자 중간 엔터키 입력이 가능하다.

자바스크립트 문자열은 문자 중간에 엔터키치면 안된다.
하지만 백틱으로 문자를 만들면 엔터키가 자유롭게 가능하다.

var 문자 = `안녕
하세요`;

2. 문자 중간에 변수를 집어넣을 때 편리하다.

자바스크립트 문자열은 문자 중간에 변수를 넣고 싶은 경우 문자를 쪼개서 + 기호로 넣어야한다.
하지만 백틱으로 문자를 만들면 문자 중간에 ${변수명} 이렇게 쉽게 넣을 수 있다.

var 이름 = '손흥민';
var 문자 = `안녕하세요 ${이름} 입니다`;

그래서 자바스크립트 문자로 HTML을 작성할때에도 유용하다.

var 문자 = `
<div>
  <div>
    ${변수명}
  </div>
</div>`;

Tagged Literals

ES6는 tagged literals라고 해서 함수로 문자 해체분석기능을 만들어줄 수도이 있다.
문자 중간중간에 있는 단어 순서를 바꾸거나 변수를 제거하거나 할 때 유용하다.

var 변수 = '손흥민';

function 해체분석기(){
  return 10
}

해체분석기`안녕하세요 ${변수} 입니다`;

▲ 맨 마직막줄에서 함수를 실행시킬 때 소괄호가 아니라 문자를 이용해서 함수를 실행시킬 수 있다.
실행할 함수이름을 쓰고 소괄호 대신 백틱 문자를 붙여주면 된다.
그럼 함수가 실행된다.위의 에제코드에선 해체분석기()라는 함수가 실행되고 있다.

함수뒤에 `문자 `를 붙여서 실행하면 문자열을 해체분석할 수 있기 때문이다.

해체분석용 함수

var 변수 = '손흥민';

function 해체분석기(문자들, 변수들){
  console.log(문자들);
  console.log(변수들);
}

해체분석기`안녕하세요 ${변수} 입니다`;

▲ 함수의 파라미터 두개를 추가해준다.
이제 이 함수는 막줄처럼 문자열을 이용해서 실행시키면 그 문자열 해체분석역할을 할 수 있다.
첫째 파라미터 문자들은 백틱 내의 순수 문자만 골라서 Array로 만들어놓은 파라미터이고,
둘째 파라미터 변수들은 백틱 내의 ${} 변수를 담는 파라미터이다. (백틱 내에 변수가 2개 3개다 그러면 파라미터를 뒤에 더 추가해주면 된다)

이제 이 파라미터들로 문자열을 재조합하거나 분석하거나 할 수 있다.

Q. 첫째파라미터가 Array라는데 뭘 어떻게 만든 Array인지 이해가 안된다.

${} 기호를 기준으로 양옆에 있는 모든 문자 덩어리를 Array안에 집어 넣어준다는 이야기다.

var 변수 = '손흥민';

function 해체분석기(문자들, 변수들){
  console.log(문자들[1] + 변수들);
}

해체분석기`안녕하세요 ${변수} 입니다`;

▲ 그럼 이 코드는 실행하면 콘솔창에 뭐가 출력될까?
문자들을 모아놓은 Array중 1번째 문자 + 변수를 출력해준다.
그래서 '입니다손흥민'이라는 문자가 출력된다.
이렇게 백틱내의 문자들을 해체해서 내 마음대로 다시 나열할 수 있게 도와주는 함수를 제작한 것이다.