자바스크립트 문법정리 2 [template-literals]

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

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

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

 

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

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

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

 그래서 자바스크립트를 문자로 HTML을 작성하실 때도 유용합니다. 

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

HTML 템플릿 같은걸 보기쉽게 만들 수 있음!

Tagged Literals

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

뭘 어떻게 쓰는지는 같이 살펴보도록 합시다. 

var 변수 = '손흥민';

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

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

맨 마지막줄에서 함수를 실행시킬 때 소괄호가 아니라 문자를 이용해서 함수를 실행시킬 수 있습니다. 
실행할 함수이름을 쓰시고 소괄호 대신 `백틱` 문자를 붙여주시면 됩니다.

그럼 함수가 실행됩니다. 위의 예제코드에선 해체분석기()라는 함수가 실행되고 있습니다.

var 변수 = '손흥민';

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

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

 ▲ 함수의 파라미터 두개를 추가해줍니다. 

 이제 이 함수는 막줄처럼 `문자열`을 이용해서 실행시키면 그 `문자열` 해체분석역할을 할 수 있습니다.

첫째 파라미터 문자들은 `백틱` 내의 순수 문자만 골라서 Array로 만들어놓은 파라미터이고, 

 둘째 파라미터 변수들은 `백틱` 내의 ${} 변수를 담는 파라미터입니다. (백틱 내에 변수가 2개 3개다 그러면 파라미터를 뒤에 더 추가해주시면 됩니다)

이제 이 파라미터들로 `문자열`을 재조합하거나 분석하거나 하실 수 있겠군요. 

예제

var pants = 0;
var socks = 100;
`바지${pants} 양말${socks}`;

function 해체분석기(글자들, 변수들1, 변수들2){
    if(변수들1 == 0){
      console.log(`바지다팔렸어요 양말` + 변수들2);
    }
}
  
  해체분석기`바지${pants} 양말${socks}`;​

  해체분석기`바지${pants} 양말${socks}`; 이렇게 코드를 실행하면 pants가 0인 경우 콘솔창에 `바지다팔렸어요 양말100`이라는 문장이 떠야합니다