JavaScript(Template literals / Tagged literals)

template literals (backquote, backtick)

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

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

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

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

Tagged Literals

• ES6는 tagged literals라는 함수로 문자 해체분석기능이 가능.
• 문자 중간중간에 있는 단어 순서를 바꾸거나 변수를 제거하거나 할 때 유용.
• ``백틱 내의 문자들을 해체해서 원하는대로 다시 나열할 수 있게 도와주는 함수를 제작한 것.

var 변수 = '손흥민';
function 해체분석기(문자들, 변수들){
  console.log(문자들); //["안녕하세요", "입니다"]
  console.log(변수들); // 손흥민
}
해체분석기`안녕하세요 ${변수} 입니다`;

• 맨 마지막줄에는 소괄호가 아닌 `문자`를 붙여서 실행한다.
• 첫째 파라미터 문자들은 `` 내의 순수 문자만 골라서 배열로 만들어놓은 파라미터.(${}를 기준으로 양옆 문자를 배열에 추가.)
• 둘째 파라미터 변수들은 `` 내의 ${} 변수를 담는 파라미터. (백틱 내에 변수가 2개 3개다 그러면 파라미터를 뒤에 더 추가.)

다음과 같은 코드에서는 문자들이 담긴 배열의 1번째 인덱스값과 변수가 차례로 출력된다.

var 변수 = '손흥민';
function 해체분석기(문자들, 변수들){
  console.log(문자들[1] + 변수들); //(입니다손흥민)
}
해체분석기`안녕하세요 ${변수} 입니다`;

응용

만약 바지와 양말의 값을 바꾸고 싶다면? (단어 순서 바꾸기)

var pants = 20;
var socks = 100;
function 해체분석기(a,b,c){
    console.log(`${a[1]} : ${b} , ${a[0]}: ${c}`); // a[1],a[0] 차례로 출력 
}
해체분석기`바지${pants} 양말${socks}`

만약 바지가 0일때 문자출력

var pants = 0;
var socks = 100;
function 해체분석기2(글자들, 변수1, 변수2){
    if(변수1 === 0){ //pants 0일때
    console.log(`${글자들[0]}다팔렸어요`) // 바지다팔렸어요 출력
   	}    
}
해체분석기2`바지${pants} 양말${socks}`