# Template literals & Tagged literals

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

1. Template literals(backquote,backtick) : ``

장점

1. 문자 중간 엔터키 입력 가능
2. 문자 중간에 변수 집어넣을 때 편리함 : ${변수명}
   HTML 템플릿 작성할 때도 유용함.

2. Tagged literals : 문자 해체분석기능

장점

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

특징

함수를 실행시킬 때 소괄호가 아니라 문자를 이용해서 함수 실행.
소괄호 대신 백틱 문자 사용.

ex)

var 변수1 = '손흥민'
var 변수2 = 'hi'

function 해체분석기(문자들, 변수1, 변수2){
console.log(문자들) // array : [안녕하세요, 입니다]
cosole.log(변수1) // 손흥민
cosole.log(변수2) // hi 
}
해체분석기`안녕하세요 ${변수1} 입니다. ${변수2}`

• 문자들 : 백틱 내의 문자만 골라서 array로 만든 파라미터
• 변수 : 백틱 내의 변수를 담는 파라미터
  백틱 내의 변수가 여러개면 파라미터를 뒤에 더 추가.

연습문제 1

바지와 양말의 순서를 바꾸어 출력하기

• 문자들[1] <-> 문자들[0] 바꾸어주면 됨

var pants = 20;
var socks = 100;

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

해체분석기`바지${pants} 양말 ${socks}` // 양말 20 바지 100

연습문제 2

바지의 갯수가 0이면 바지가 다 팔렸다는 문구 출력하기

var pants = 20;
var socks = 100;

function 해체분석기(문자들, 변수들1, 변수들2){
if(변수들1 === 0){
console.log("바지다팔렸어요" + 문자들[1] + 변수들2 )
}else{
console.log(문자들[1] + 변수들1 + 문자들[0] + 변수들2)
}
}

pants = 0;
해체분석기`바지${pants} 양말 ${socks}` // 바지다팔렸어요 양말 100