template literals

template literals에 대해 알아보자. 템플릿 리터럴은 문자열을 다르게 표현하는 ES6 문법이다.

기존에는 문자열을 ' / " 홑/겹 따옴표를 이용해서 사용했다.

하지만 템플릿 리터럴은 ` 라는 기호를 이용하여 문자열을 표현한다. backtick(백틱) 혹은 backquote(백쿼트) 라고 부른다.

( ` ) 백틱 문자열의 장점

1. 문자열 사이에 Enter키를 칠 수 있다.

그래서 자바스크립트 변수에 HTML템플릿을 저장할때에도 유용하다.

예시코드

var 문자열 = `
백틱을 이용하면
이렇게 여러 줄의 문자열도
입력할 수 있습니다.
`;
console.log(문자열);

실행결과

2. 문자열 중간에 변수를 집어넣을 수 있다.

   문자열 중간에 변수를 넣고 싶을 때 기존의 방식은 문자를 분해하여 + 기호로 붙여서 썼다. 하지만 백틱을 이용한 문자열은 중간에 ${변수}를 넣으면 쉽게 변수를 넣을 수 있다.

   예시코드

   var year = "2024";
   
   var a = "올해는 " + year + "년 입니다."; // 기존방식
   var b = `올해는 ${year}년 입니다.`; // 백틱을 이용한 방식
   
   console.log(a);
   console.log(b);

   실행결과

   

tagged literal

tagged literal 문법을 이용하면 funtion()을 괄호가 아닌 function`` 백틱을 이용하여 함수를 실행시킬 수 있다. 백틱을 이용하여 함수를 실행시키면 문자를 쉽게 해체할 수 있다. 문자 중간중간에 있는 단어 순서를 바꾸거나 변수를 제거하는 등의 작업에 유용하다.

var year = "2024";

function 해체함수(str, val) {
  console.log(str);
  console.log(val);
}

      해체함수`올해는 ${year}년 입니다.`; // ()대신 ``사용

해체함수() 의 첫 번째 파라미터 문자는 ${}를 기준으로 양 옆에 있는 문자열 덩어리들을 Array에 저장한 파라미터이다. 그래서 위 함수를 실행시키면 ${year}의 양 옆에 있는 올해는 과 년 입니다. 가 콘솔창에 출력된다.

( str\[1] + str\[0] 이런식으로 문자열의 순서를 쉽게 바꿀 수 있다. )

두 번째 파라미터 변수는 ${}내의 변수를 담는 파라미터이다. 변수가 여러개면 그만큼 함수 파라미터를 더 추가하거나 ... spread 연산자를 이용하면 array형태로 변수들이 들어간다. 그래서 위 함수를 실행시키면 ${year} 값인 2024가 콘솔창에 출력된다.