[JavaScript] 템플릿 리터럴(Template Literal)

템플릿 리터럴(Template Literal)은 내장된 표현식을 허용하는 문자열 리터럴입니다. ES6부터 새로 도입되었으며, 따옴표가 아닌 백틱(`)을 사용합니다. 이번 글에서는 템플릿 리터럴의 특징과 기능에 대해서 설명하겠습니다.

 

① 여러 줄 문자열

일반 문자열과 직관적으로 다르게 느껴지는 특징 중 하나는 여러 줄인 문자열을 작성할 때의 편리함입니다. 일반적인 문자열에서 여러 줄인 문자열을 작성한다면, 백슬래쉬를 통해 줄 바꿈을 뜻하는 \n을 사용해야 합니다.

console.log("Line number 1\n" + "Line number 2"); // Without template literal

 

하지만 템플릿 리터럴을 사용한다면, 작성된 코드에서의 줄바꿈이 그대로 결과로 표시됩니다. 앞서 나온 코드는 다음과 같이 수정할 수 있습니다.

console.log(`Line number 1
Line number 2`); // With template literal

 

② 문자열 보간(String Interpolation)

기존의 문자열의 경우는 다음의 예시처럼 문자열과 수식을 합칠 때 덧셈 연산자(+)를 사용해야만 했습니다.

const a = 5;
const b = 10;
console.log("a + b equals " + (a + b) + ".");
// "a + b equals 15."

수식이 복잡해지고 삽입되는 수식이 많아질수록 코드를 한눈에 알아보기가 어려워짐을 예상할 수 있습니다. 

 

템플릿 리터럴을 사용하면, 변수나 수식을 문자열에 넣어서 그 값이 표시되게 하는 것도 쉬워집니다. 덧셈 연산자를 사용하지 않고 사용 하는 수식을 ${expression}의 형태처럼 중괄호 안에 작성한 뒤에 달리 기호를 앞에 붙이면 됩니다. 

* 백틱이나 달러 기호를 문자 그대로 사용할 때는 백슬래시를 통해 이스케이프 시퀀스로 작성하면 됩니다. 

const a = 5;
const b = 10;
console.log(`a + b equals ${a + b}.`);
// "a + b equals 15."

 

③ 태그 함수

템플릿 리터럴이 태그(Tag)된 형태인 태그드 템플릿(Tagged template)는 함수를 통해 템플릿 리터럴이 분해된 형태입니다. 태그를 위한 함수의 이름은 상관이 없으나, 첫 번째 매개변수는 문자열들의 값이 저장된 배열이며, 두 번째 매개변수부터는 순서대로 수식이 전달됩니다. 

const tag_func = function (str_arr, ...args) {
    ...
}

 

태그드 템플릿은 다음과 같이 태그 함수로 그 값들을 쉽게 조작할 수 있습니다. 

const fruit = "apple";
const color = "red";

function tag_ex(strings, fruit_exp, color_exp) {
  console.log(strings); // Array(3) [ "That ", " is ", "." ]
  
  return `Fruit Name : ${fruit_exp}, Color : ${color_exp}`;
}

const output = tag_ex`That ${fruit} is ${color}.`;

console.log(output);
// Fruit Name : apple, Color : red

 

④ raw

raw 속성은 태그 함수의 첫 번째 매개변수에만 사용할 수 있는 속성입니다. raw 속성을 사용하면 이스케이프 시퀀스를 처리하지 않은 문자열이 작성된 코드 그 자체를 표시합니다. 사용 방법은 다음과 같습니다.

function raw_str(passed_arr) {
  console.log(passed_arr.raw[0]);
}

raw_str`Escape Sequence \n not processed`;
// Output : "Escape Sequence \n not processed"

 

 

추가적으로 String.raw() 메소드를 통해 동일한 결과를 얻을 수 있습니다. 괄호 안에 넣지 않고 템플릿 리터럴을 메소드 이름 뒤에 붙이면, 문자열 원본을 얻을 수 있습니다. 만약 템플릿 리터럴에 수식이 포함된 경우에는 수식의 결과 값이 문자열에 나타나게 됩니다. 

 

const a = 10;
const b = 5;

console.log(String.raw`Expression : ${a + b}\n`);
// Output : "Expression : 15\n"