MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

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!"

Tagged template literals and escape sequences

As of ES2016, tagged template literals conform to the rules of the following escape sequences:

  • Unicode escapes started by "\u", for example \u00A9
  • Unicode code point escapes indicated by "\u{}", for example \u{2F804}
  • Hexadecimal escapes started by "\x", for example \xA9
  • Octal literal escapes started by "\" and (a) digit(s), for example \251

This means that a tagged template like the following is problematic, because, per ECMAScript grammar, a parser looks for valid Unicode escape sequences, but finds malformed syntax:

latex`\unicode`
// Throws in older ECMAScript versions (ES2016 and earlier)
// SyntaxError: malformed Unicode character escape sequence

Tagged template literals should allow the embedding of languages (for example DSLs, or LaTeX), where other escapes sequences are common. The ECMAScript proposal Template Literal Revision(stage 3, to be integrated in a future ECMAScript standard) removes the syntax restriction of ECMAScript escape sequences from tagged template literals.

However, illegal escape sequence must still be represented in the "cooked" representation. They will show up as undefined element in the "cooked" array:

function latex(str) { 
 return { "cooked": str[0], "raw": str.raw[0] }
} 

latex`\unicode`

// { cooked: undefined, raw: "\\unicode" }

Note that the escape sequence restriction is only dropped from tagged template literals and not from untagged template literals:

let bad = `bad escape sequence: \unicode`;

Specifications

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Template Literals' in that specification.
Standard Initial definition. Defined in several section of the specification: Template Literals, Tagged Templates
ECMAScript Latest Draft (ECMA-262)
The definition of 'Template Literals' in that specification.
Draft Defined in several section of the specification: Template Literals, Tagged Templates

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 41 (Yes) 34 (34) No support 28 9
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support 41 34.0 (34) No support 28 9

See also

문서 태그 및 공헌자

태그: 
 이 페이지의 공헌자: kbsbroad, rlaxognsk, dragmove
 최종 변경: kbsbroad,