현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "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

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

`\`` === "`" // --> 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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

문서 태그 및 공헌자

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