자바스크립트 템플릿 리터럴 (Template literals)

 

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

Template literals - JavaScript | MDN

이글은 MDN 문서를 타이핑하며 공부한 글입니다.

 

Template literals

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 

Syntax

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

 

Description

템플릿 리터럴은 이중 따옴표나 작은 따옴표 대신 백틱(` `)을 사용합니다. 템플릿 리터럴은 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호{ }로 표기할 수 있습니다. 플레이스 홀더 안에서의 표현식과 그 사이의 텍스트는 함께 함수로 전달됩니다. 기본 함수는 단순히 해당 부분을 단일 문자열로 연결시켜 줍니다. 템플릿 리터럴 앞에 어떠한 표현식이 있다면, 템플릿 리터럴은 "태그가 지정된 템플릿"이라고 불리게 됩니다. 이때, 태그표현식이 처리된 템플릿 리터럴과 함께 호출되면 출력하기 전에 조작할 수 있습니다. 템플릿 리터럴 안에서 백틱 문자를 사용하려면 백틱앞에 백슬러쉬를(\)를 넣으면 됩니다.

`\`` === "`" // --> true

 

Multi-line strings

source 내에 삽입되는 newline characters(\n)는 template literal의 일부가 됩니다.

일반 string 들을 사용하여, multi-line strings 들을 얻기 위해서는 아래와 같은 문법을 사용해야할 것입니다.

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

같은 효과를 template literal을 통해 얻기 위해서는, 아래와 같이 적을 수 있습니다.

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

 

Expression interpolation(표현식 삽입법)

표현식(expression)을 일반 문자열(normal strings)에 삽입하기 위해서, 당신은 다음의 문법을 사용할 수 있을 것입니다. 

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

template literals를 이용하면, 이를 더욱 읽기 쉽도록 다음과 같은 문법을 활용할 수 있습니다.

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

 

Nesting templates

특정한 경우 템플릿을 중첩하는 것이 구성 가능한 문자열을 읽는 읽기 가장 쉬운 방법입니다. 백 스페이스 템플릿 내에서 템플릿 내의 자리표시자 $ { } 에 내부 백틱을 사용하는 것이 쉽습니다. 예를 들어, 조건 a가 참이면 이 템플릿 문자 그대로 반환합니다.

 

In ES5:

var classes = 'header'
classes += (isLargeScreen() ?
   '' : item.isCollapsed ?
     ' icon-expander' : ' icon-collapser');

 

ES2015에서 중첩(nesting)없이 템플릿 리터럴 사용한 경우:

const classes = `header ${ isLargeScreen() ? '' :
    (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;

 

ES2015에서 중첩된(nested) 템플릿 리터럴을 사용한 경우:

const classes = `header ${ isLargeScreen() ? '' :
 `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

 

잠깐! 내가 이해해본 nested 템플릿 리터럴

중첩없이 삼항연산자를 사용한 예시

let key = true;
const strr = `kdy is ${key ? "student" : "engineer"}`;
console.log(strr); // kdy is student

let key = false;
const strr = `kdy is ${key ? "student" : "engineer"}`;
console.log(strr); // kdy is engineer

 

중첩이 사용된 예시

let key = true;
let good = true;
const strr = `kdy is ${
key ? `${good ? "good student" : "babo"}` : "engineer"
}`;
console.log(strr); // kdy is good student

 

Tagged templates

template literals의 더욱 발전된 한 형태는 tagged templates 입니다. 태그를 사용하면 템플릿 리터럴을 함수로 파싱할 수 있습니다.

태그 함수의 첫 번째 인수는 문자열 값의 배열을 포함합니다. 나머지 인수는 표현식과 관련됩니다. 결국 함수는 조작 된 문자열을 반환할 수 있습니다. function 이름은 원하는 것으로 만들 수 있습니다.

var person = "Mike";
var age = 28;

function myTag(strings, personExp, ageExp) {
console.log(strings); // ['that ', ' is a ', '', raw: Array(3)]
                      // raw : ['that ', ' is a ', '']
var str0 = strings[0]; // "that "
var str1 = strings[1]; // " is a "

// 사실 이 예제의 string에서 표현식이 두 개 삽입되었으므로
// ${age} 뒤에는 ''인 string이 존재하여
// 기술적으로 strings 배열의 크기는 3이 됩니다.
// 하지만 빈 string이므로 무시하겠습니다.
// var str2 = strings[2];

var ageStr;
if (ageExp > 99) {
  ageStr = "centenarian";
} else {
  ageStr = "youngster";
}

// 심지어 이 함수내에서도 template literal을 반환할 수 있습니다.
return str0 + personExp + str1 + ageStr;
}

var output = myTag`that ${person} is a ${age}`;

console.log(output);
// that Mike is a youngster

 

Raw strings

태그 지정된 템플릿에 첫 번째 인수에서 사용할 수 있는 특별한 raw property를 사용하면 escape sequences 처리하지 않고 원시 문자열을 입력 한대로 엑세스 할 수 있습니다.

strings 배열안에 raw 프로퍼티가 존재하는데 여기서는 \n 이 문자열로 그대로 출력이 가능하다!

function tag(strings) {
        console.log(strings); // ['string text line 1 \n string text line 2', raw: Array(1)]
        console.log(strings[0]); //string text line 1 
                                 // string text line 2
        console.log(strings.raw[0]); // string text line 1 \n string text line 2
      }

      tag`string text line 1 \n string text line 2`;
      // logs "string text line 1 \n string text line 2" ,
      // including the two characters '\' and 'n'

 

추가로 String.raw( ) 메서드를 사용하면 다음과 같이 \n을 출력할 수 있다.

var str = String.raw`Hi\n${2+3}!`;
// "Hi\n5!"

str.length;
// 6

str.split('').join(',');
// "H,i,\,n,5,!"