[JavaScript] Template literals

Template literals

문자열을 다르게 제작할 수 있는 방법

ES6문법 이전에는 var 문자 = '이름';과 같이 문자열을 만들었는데 backtick / backquote을 사용하여 문자를 만들 수 있다

var 문자 = `이름`;

backquote 문자열 장점

1. 엔터키가 가능하다
2. 중간에 변수 넣기 쉽다

var 변수 = '이름';
var 문자 = `안녕하세요 저는 ${변수}입니다`;

특히 HTML 작성시 유용하다

tagged literal

👉 backquote 문자열 + 함수

var 변수 = '이름';
var 문자 = `안녕하세요 저는 ${변수}입니다`;

function 함수(){
  return 10
}

함수``

함수( )처럼 소괄호 대신 ` `을 붙여도 함수가 실행된다

tagged literal의 장점

var 변수 = '이름';
var 문자 = `안녕하세요 저는 ${변수}입니다`;

function 함수(문자들, 변수들){
  console.log(문자들);
  console.log(변수들);
}

함수`안녕하세요 ${변수} 입니다`

👉 문자와 변수를 나눠서 저장할 수 있다 ``를 해체분석할 수 있음

단어 순서 변경, 단어 제거, ${변수}위치 옮기기 등을 쉽게 할 수 있다

tagged literal 함수의 파라미터 역할

1. 첫번째 파라미터는 ${} 양옆 문자들을 Array화 해준다
2. 두번째 파라미터는 ${변수}를 뜻한다
3. 세번째 파라미터를 추가하면 두번째 ${변수}를 뜻한다

   변수 갯수가 많으면 spread operator를 활용하여 함수(문자들, ...변수들)처럼 사용하면 된다

tagged literal 사용 예시

💡 글자의 순서 변경

var 변수 = '이름';
var 문자 = `안녕하세요 저는 ${변수}입니다`;

function 함수(문자들, 변수들){
  console.log(문자들[1] + 변수들 + 문자들[0]);
}

함수`안녕하세요 ${변수} 입니다`