Template 리터럴

Template 리터럴은 문자열 처리를 위한 템플릿을 제공합니다. Template 리터럴은 역따옴표(` `) 안에 문자열과 표현식을 작성할 수 있습니다 예를 들어 `안녕하세요${표현식}` 과 같이 되어 있다면 해당 코드는 자바스크립트 내에서

 => 안녕하세요 (문자로 인식)  + ${표현식}은 표현식의 결과를 문자열로 출력이 됩니다. 따라서 표현식에 따라 출력되는 결과가 다르며 문자열과 표현식의 결과를 묶어 하나의 문자열로 표현하는 방식이 바로 Template 리터럴 입니다.

Template 리터럴 기본 예제

console.log("1:", `1234ABC가나다라`); 
// expression 조합이 없기 때문에 template literal 이라고 볼 수는 없음
console.log("2:", `라인1 \n 라인2`);
console.log("3:", `첫 번쨰 줄 
두 번째 줄`);
let one = 1, two = 2; 
console.log("4", `1+2는 ${one + two}입니다` ); /*표현식 조합*/ 

 위 코드는 template 리터럴의 기본 예제 입니다 제일 위  `1234AB가나다라` 와 간은 경우 숫자와 문자열의 조합이지만 template 리터럴에 의해 문자열로 인식을 하기 떄문에 문자열로 1234AB가나다라를 출력합니다 

 두번째 백스페이이스 n 과  엔터를 통해 줄을 바꾼경우 두 문장 모두 문장 줄바꿈이 가능합니다 

 마지막으로 세번째 문장의 경우 표현식과 문자열의 조합입니다 위와 같은 경우는 표현식의 결과에 따라 4:1+2는 3입니다 라는 문장을 콘솔에 출력하게 됩니다.

tagged Template 리터럴

Template 리터럴에서 테그를 작성한 리터럴을 tagged Template 이라고 합니다. 여기서 Template 리터럴 앞 작성한 테그는 함수를 의미하며 태그함수는 Template 리터럴의 문자열과 표현식을 분리하여  함수의 파라미터가 됩니다. 예제를 보게 살펴보겠습니다.

let one = 1, two = 2;
function tagFunction(text, value){ 
    // text = template literal 문자열 , value = 결과
    console.log("1 :", text[0]); // expression을 제외한 문자열
    console.log("2 :", value); // tag function  의 결과
    console.log("3 :", text[1]);
    // template literal 에서 다음 문자열이 없을때 빈 문자열이 추가됨 
    console.log("4 :", typeof text[1]);
    //빈 문자열이 추가 됐기 떄문에 type은 String  
}

tagFunction `1+2=${one + two}입니다`; 

 이런 코드를 작성했다면 테그 함수는 뒤어 붙은 Template 리터럴을 문자열과 표현식을 분리하여 파라미터로 받아드립니다. 먼저 이 코드의 결과부터 살펴 보자면

 위와 같은 결과를 출력하는 것을 볼 수 있습니다. 해당 코드에거 문자열은 표현식을 전후로 분리가 됩니다 따라서 테그 함수의 결과에서 text[0] 과 text[1]이  콘솔에 문자열이 분리되어 출력이 됩니다. 또한 표현식의 결과는 두번 째 파라미터가 되어 표현식의 결과가 할당이 됩니다 만약 표현식이 여러개라면 표현식의 개수가 하나씩 추가 될때마다 파라미터도 하나씩 증가 됩니다.