ES6 - Template Literals 사용하기

1. Template Literals란?

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공합니다.

 

2. Template Literals 주요 특징

1) Syntax

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

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

 

2) Expression interpolation

ES6 이전에는 표현식을 다음과 같이 일반 문자열 안에 넣었습니다.

var a = 20;
var b = 8;
var c = "자바스크립트";
var str = "저는 " + (a + b) + "살이고 " + c + "를 좋아합니다.";
console.log(str);   //저는 28살이고 자바스크립트를 좋아합니다.

 

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

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

 

3) 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

 

4) Multi-line strings

템플릿 리터럴을 사용하면 여러 줄의 문자열을 나눠서 작성할 필요가 없습니다. 

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

 

 

출처

Template literals - JavaScript | MDN