1.Template Literals 이란?

str1 = "오늘 하루"
str2 = "좋다"
result = str1 +" " + "너무" + " " + str2

console.log(result)
// "오늘 하루너무좋다"

//템플릿 리터럴 사용하기!!
str1 = "오늘 하루"
str2 = "좋다"
result = `${str1} 너무 ${str2}`

console.log(result)
// '오늘 하루 너무 좋다'

• 위와 같이 템플릿 리터럴을 사용하지 않으면 +나 공백을 주기 위해 " "을 사용해야 하는데 이같은 불편함을 줄이기 위해 이용한다.

• (``) 로 감싼뒤 변수에는 ${} 이용한뒤 편하게 타이핑 치면 완성된다.

2. Multi-line strings

• 템플릿 리터럴을 사용하면 여러 줄의 문자열도 나눠서 작성할 필요가 없습니다. 비교를 위해 먼저 일반 string 리터럴을 사용하여 문자열을 여러 줄 작성해보겠다.

//일반 String 리터럴 사용하기
str1 = "오늘 하루\n"
str2 = "좋다"
result = str1 + str2

console.log(result)
//'오늘 하루
//좋다'

// 템플릿 리터럴을 사용하기
str1 = "오늘 하루"
str2 = "좋다"
result = `${str1} 너무 
${str2}`

console.log(result)
// 오늘 하루 너무 
//좋다'

3. Tagged templates

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

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}`;