[JavaScript] 템플릿 리터럴(Template literals), 태그드 리터럴(tagged literals)

 

 

 

 

1. 템플릿 리터럴(template literals)

 

- 자바스크립트에서 문자를 다룰 때 어려웠던 점을 해결하기 위해 나온 문법

- 따옴표 대신 backquote, backtick 이라는 `백틱` 기호를 사용해서 문자를 만드는 형태

 

 

2. 템플릿 리터럴의 장점

 

1) 문자 중간 엔터키 입력 가능

- 자바스크립트 문자열은 문자 중간에 엔터키치면 안되는데 백틱으로 문자를 만들면 엔터키 자유롭게 가능

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

 

 

 

2)문자 중간에 변수를 집어넣을 때 편리함

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

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

 

그래서 자바스크립틑 문자로 HTML을 작성할 때 유용함(HTML 템플릿 같은걸 보기쉽게 만들 수 있음)

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

 

 

 

3. 태그드 리터럴(Tagged Literals)

 

1) 실행 방법

var 변수 = '김하늘';

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

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

▲ 함수를 실행시킬 때 소괄호가 아니라 `백틱` 문자를 이용해서 함수를 실행시킬 수 있음

 

 

2) 함수로 문자 해체분석 기능을 만들어줄 수 있음

var 변수 = '김하늘';

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

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

 

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

둘째 파라미터 '변수들': `백틱` 내의 ${} 변수를 담는 파라미터(백틱 내에 변수가 2개 이상이면 파라미터를 뒤에 더 추가해주면 됨)

 

 

- 문자 중간중간에 있는 단어 순서를 바꾸거나 변수를 제거하거나 할 때 유용함