Template literals

Template literal 들은 embedded expression 들을 허용하는 string literal 들입니다. 당신은 multi-line string 들과 그러한 특징을 가진 string interpolation 을 사용할 수 있습니다. 그것들은 ES2015 / ES6 명세의 이전 edition 들에서 "template strings"로 불려져 왔습니다.

Syntax

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

Description

Template literal 들은  double 또는 single quiotes 대신 back-tick (` `) (grave accent) character 로 감싸집니다. 이들은 Dollar 사인과 중괄호( ${expression} ) 로 표기됩니다. placeholder 내부의 expression 들과 텍스트는 함께 function 으로 전달됩니다. default function 은 단지 부분들을 single string 으로 합칩니다. template literal (여기서는 tag) 이전에 expression 이 있다면, template string은 "tagged template literal" 이라고 불립니다. 그러한 경우에, tag expression (보통은 function) 은, 출력 전에 조작할 수 있는 processed template literal 을 필요로 합니다. template literal 내에서 back-tick 을 escape 하기 위해서, back-tick 앞에 backslash \ 를 넣습니다.

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

Multi-line strings

source 내에 삽입되는 어떤 새로운 line의 character 들은 template literal 의 부분입니다. 일반 string 들을 사용하여, multi-line string 들을 얻기 위해서는 아래와 같은 문법을 사용해야 할 것입니다.

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

multi-line strings 과 같은 효과를 얻기 위해, 바로 아래와 같이 적을 수 있습니다.

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

Expression interpolation

기본 strings 로 expression 을 embed 하기 위해서, 당신은 다음의 문법을 사용할 수 있을 것입니다.

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 로, 더욱 읽기 쉽도록 다음과 같은 문법 설탕(syntactic sugar) 을 활용할 수 있습니다.

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

Tagged template literals

template literals 의 더욱 발전된 한 형태는 tagged template literals 입니다. function를 사용하여 template literals 의 출력을 변형하는데 그를 이용할 수 있습니다. 첫번째 argument 에 string literals 배열이 들어 있습니다( 이 예시에서는 "Hello " , " world", "" ). 두번째 argument 와, 첫번째 이후의 각 argument 들은 가공된( 때로는 cooked 로 불리는) 대체 expressions  의 값들( 이 예시에서는 "15", "50" )입니다. 결국, 당신의 function 은 조작된 string 을 반환합니다. 다음 예시의 tag 라는 function 이름에는 아무런 중요한 의미가 담겨 있지 않습니다. function 이름은 당신이 원하는 어떤 것이든 가능할 것입니다.

var a = 5;
var b = 10;

function tag(strings, ...values) {
  console.log(strings[0]); // "Hello "
  console.log(strings[1]); // " world "
  console.log(strings[2]); // ""
  console.log(values[0]);  // 15
  console.log(values[1]);  // 50

  return "Bazinga!";
}

tag`Hello ${ a + b } world ${ a * b }`;
// "Bazinga!"

다음 예시에서 보여지듯이, Tag functions 들은 string 을 반환할 필요는 없습니다.

function template(strings, ...keys) {
  return (function(...values) {
    var dict = values[values.length - 1] || {};
    var result = [strings[0]];
    keys.forEach(function(key, i) {
      var value = Number.isInteger(key) ? values[key] : dict[key];
      result.push(value, strings[i + 1]);
    });
    return result.join('');
  });
}

var t1Closure = template`${0}${1}${0}!`;
t1Closure('Y', 'A');  // "YAY!" 
var t2Closure = template`${0} ${'foo'}!`;
t2Closure('Hello', {foo: 'World'});  // "Hello World!"

Raw strings

tagged template literals 의 첫번째 function argument 에서 이용 가능한 특별한 raw property 는, 당신에게 입력된 raw strings 으로의 access 를 허용합니다.

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

tag`string text line 1 \n string text line 2`;

추가로, default template function 과 string 병합으로 생성될 것 같은 raw string 을 생성하기 위한 String.raw() method가 존재합니다.

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

Specifications

Browser compatibility

See also

• String
• String.raw()
• Lexical grammar
• Template-like strings in ES3 compatible syntax
• "ES6 in Depth: Template strings" on hacks.mozilla.org