템플릿리터럴 / tagged literal / backtick(backquote)

템플릿 리터럴

문자열을 백틱  ``  으로 표현하는 거.

(backtick = backquote) 같은말.

ES6에서 바뀌면서 생김.

 

기능 : 1. 엔터키를 사용해도 문자열이 깨지지 않는다.

기능 : 2. 중간에 변수 넣기가 좋다. ${변수명} 백틱 안에서만 가능.   + 기호를 사용할 필요 없음

기능 : 3. append 템플릿 하거나 할때 유용.

기능 : 4. tagged literal.

함수를 실행시킬 때 소괄호가 아니라 문자를 이용해서 함수를 실행시킬 수 있다. 

함수(안녕) 이걸    함수`안녕`   이렇게.

 

4번 기능은 좀 생소하니 자세히 살펴보자. 

 

 4. tagged literal

단어의 순서를 변경하거나, 단어를 제거하거나,

${변수} 위치를 옮기거나, 중괄호를 기준으로 `문자`를 해체 분석 할 수 있다.

 

var 변수 = '손흥민'

var latter = `안녕하세요 ${변수} 입니다`;

function 해체분석기(문자들, 변수들){

     console.log(문자들);

     console.log(변수들);

     console.log(문자들[1] + 변수들 + 문자들[0]) //해체분석기 를 이용해서 글자 순서를 바꾼다.

};

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

 

tagged literal을 사용할 때에 함수의 파라미터

 

첫번째 파라미터 ___ 백틱 내의 순수 문자를 해체해 배열에 담아준다. 

두번째 파라미터 ___ 첫 변수가 담아진다. 

다른 변수가 또 있다면, 변수의 개수만큼 뒤에 파라미터를 추가해 줘야 한다.

 

 

//템플릿리터럴 _ tagged literal 연습

var pants = 0;

var socks = 100;

`바지${pants} 양말${socks}`

 

function disassembly (latter, variable1, variable2){

     if(variable1 ===0){

          latter.shift();   //첫번째 요소 지워줘

          latter.unshift('바지안팔아요');   //첫번째 요소 괄호 안에 있는거로 넣어줘.

          // 이렇게 했을때 나는 잘 작동 할 줄 알았는데 에러메세지

          // Cannot assign to read only property '0' of object '[object Array]'

          // 읽기 전용 데이터를 바꾸려고 해서 에러발생. 해결하려면 깊은 복사 해야함. (Spread Operator 사용.

          console.log(`바지다팔렸어요 양말` + variable2)      //이렇게 해야함.

     }

}

 

 

 

spread operator는 다음 게시글에