[JavaScript] 템플릿 리터럴이란?

📌 템플릿 리터럴(Template literals)이란?

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있다. 템플릿 리터럴은 따옴표 대신 백틱(` `) (grave accent) 을 이용한다.

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

 

📌 표현식 삽입법(Expression interpolation)

ES6 이전에는 (표현식)의 방법으로 일반 문자열에 삽입했다.

var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");

하지만 템플릿 리터럴을 이용하면 `사이에 ${표현식}을 넣으면 된다.

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);

 

📌 Tagged templates

태그를 사용하여 템플릿 리터럴을 함수로 파싱할 수 있다.

let person = 'Lee';
let age = 28;

let tag = function(strings, personExp, ageExp) {    //함수 이름은 원하는 대로 가능!
    let str0 = strings[0];
    let str1 = strings[1];
    console.log("str0 : " + str0);  //strings는 
    console.log("str1 : " + str1);

    let ageStr;
    if(ageExp > 99) ageStr = 'centenaian';
    else ageStr = 'youngster';

    return str0 + personExp + str1 + ageStr;    //이 함수 내에서 template literal 반환 가능
};
let output = tag`that ${person} is a ${age}`;
console.log(output);    //that Lee is a youngster

 

📌 Multi-line strings

소스의 \n는 템플릿 리터럴에 포함이 된다. 일반적으로는 여러줄을 쓰기 위해서 아래 예제처럼 \n를 이용하여 나눠쓰지만,

console.log("string text line 1\n"+
"string text line 2");
// "string text line 1
// string text line 2"

템플릿 리터럴에서는 그럴 필요가 없다.

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

---

개인 학습 기록용이기 때문에 오류가 있을 수 있습니다.

양해 부탁드립니다🙂

 

📚 참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals