Template literals는 ` 백틱으로 이루어진 문자열이다.

아래와 같은 기능들을 사용할 수 있는데 차례대로 알아보자

여러줄 문자열문자열 보간Tagged Templates

• 여러줄 문자열
• 문자열 보간
• Tagged Templates

`string text`

// 여러 줄
`string text line 1
 string text line 2`

// 문자열 보간
`string text ${expression} string text`

// Tag
tagFunction`string text ${expression} string text`

그냥 따옴표로 여러줄을 출력하려먼 \n 을 사용해야 한다. Template literals를 사용하면 그냥 여러줄로 출력할 수 있다.

(+tmi - Kotiln, Swift, python은 “”” 을 사용한다.)

console.log(`
#include <stdio.h>int main() {
    printf("Hello World");
    return 0;
}
`);

문자열 보간을 사용하여 문자열 내에 변수를 넣을 수 있다. 코드 가독성이 늘어나고 개발자의 실수를 막을 수 있다.

• 연산자를 사용하는 것과는 동작 방식이 약간 다르다. + 연산자는 원시 타입으로 변환을 먼저 하는 반면. Template literals는 string으로 바로 변환된다.

const age = 10;
const name = 'WOW';

const SQL = `SELECT * FROM USER WHERE name = ${name} AND age = ${age} ORDER BY name`;

Tag가 붙은 Template에 대해서는 MDN문서에서 아래와 같이 설명하고 있다.

태그를 사용하면 함수로 Template literals의 구문을 분석할 수 있다.태그 함수의 첫 번째 인수(strings)에는 문자열 값의 배열이 포함됩니다.나머지 인수(personExp, ageExp)는 표현식과 관련된다.그런 다음 태그 함수는 이러한 인수에 대해 원하는 작업을 수행하고 조작된 문자열을 반환할 수 있다.

• 태그를 사용하면 함수로 Template literals의 구문을 분석할 수 있다.
• 태그 함수의 첫 번째 인수(strings)에는 문자열 값의 배열이 포함됩니다.
• 나머지 인수(personExp, ageExp)는 표현식과 관련된다.
• 그런 다음 태그 함수는 이러한 인수에 대해 원하는 작업을 수행하고 조작된 문자열을 반환할 수 있다.