What is Template literals?

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이라고한다

템플릿 리터럴은 표현식/문자열 삽입, 여러줄 문자열, 문자열 형식화, 문자열 태깅 등

다양한 기능을 제공한다.

그리고 또한 런타임 시점에 일반 자바스크립트 문자열로 처리/변환되는 특징이있다

프론트엔드에서 HTML 을 데이터와 결합해서 DOM 을 다시 그려야 하는 일이 빈번했기 땜문에 템플릿을 좀 더 쉽게 편집하고 작성하기위해 이러한 기능이 탄생했다고 한다.
ps . 자바스크립트 자체적 지원전에도 라이브러리에서 존재하긴했었다고한다.

자 이제 가장 대표적인 사용법 세개를 알아보도록 하자

1. Stntax

`string text`
`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

템플릿 리터럴은 작은따옴표(')나 큰따옴표(") 대신 백틱(`)(grave accent)로 감싸줍니다.

Expression interpolation (표현식 삽입법)

let a = 20;
let b = 9;
let c = "자바스크립트";
let str = `저는 ${a+b}살이고 ${c}를 좋아합니다.`;
console.log(str);   //저는 29살이고 자바스크립트를 좋아합니다.

템플릿 리터럴에서는 아래와 같이 $와 중괄호{}를 사용하여 표현식을 표기할 수 있습니다.

위 처럼 + 연산자로 문자열을 연결해주는 것보다 가독성이 더 좋습니다.

Tagged templates

let myTag = function(strings, a, b, c) {
    console.log(`문자열 배열 길이 : ${strings.length}`);    //4, 마지막 템플릿 뒤에 빈 문자열
    for(let i = 0; i < strings.length; i+=1) {
        console.log(`문자열 요소 [${i}]: ${strings[i]}`);
    }
    console.log(a);
    console.log(b);
    console.log(c);
}
let html = 5;
let css = 3;
let js = 'es10';
let string = myTag`HTML${html}, CSS${css}, JavaScript ${js}`;

태그 함수의 첫 번째 인수는 문자열 값의 배열을 포함합니다. 나머지 인수는 표현식과 관련됩니다.
이 첫 번째 인수, 즉 문자열 값의 배열은 표현식을 기준으로 split됩니다.

위와같이 복잡한 코드를 조금 더 간결하게 만들어주는 효과가 있다
템플릿 리터럴의 종류는 이보다 더 많지만 내가 지금까지 경험했던건 아직 여기까지기 때문에 여기까지만 서술하도록 하겠다

앞으로 문법등 여러기능들이 추가되면서 어떤 더 편리한게 나올지 더 기대가 되는 바이다.