JavaScript ES6_기본 지식의 템플릿 문자열에 대한 자세한 설명

ES6에는 새로운 유형의 문자열 리터럴인 템플릿 문자열이 도입되었습니다. 백틱(`) 사용을 제외하면 일반 문자열과 동일하게 보입니다. 가장 간단한 경우에는 평범한 문자열입니다:

context.fillText(`Ceci n'est pas une cha?ne.`, x, y);
 
context.fillText(`Ceci n'est pas une cha?ne.`, x, y);

을 템플릿 문자열이라고 부르는 이유는 템플릿 문자열이 JS에 간단한 문자열 보간 기능을 도입했기 때문입니다. 즉, JS 값을 문자열에 편리하고 우아하게 삽입할 수 있습니다.

템플릿 문자열은 여러 곳에서 사용될 수 있습니다. 다음과 같은 눈에 띄지 않는 오류 메시지를 살펴보세요.

function authorize(user, action) {
 if (!user.hasPrivilege(action)) {
  throw new Error(
   `User ${user.name} is not authorized to do ${action}.`);
 }
}
 
function authorize(user, action) {
 if (!user.hasPrivilege(action)) {
  throw new Error(
   `User ${user.name} is not authorized to do ${action}.`);
 }
}

위 코드에서 ${user.name} 및 ${action}은 템플릿 자리 표시자라고 합니다. JavaScript는 user.name 및 action의 값을 각각 해당 위치에 삽입한 다음 "User"를 생성합니다. "이런 조렌도르프는 하키를 할 권한이 없습니다."

이제 연산자보다 더 우아한 구문이 있으므로 기대할 수 있는 몇 가지 기능은 다음과 같습니다.

템플릿 자리 표시자는 모든 JavaScript 표현식이 될 수 있으므로 함수 호출과 네 가지 산술 연산이 허용됩니다. (다른 템플릿 문자열 내에 템플릿 문자열을 중첩할 수도 있습니다.)
값이 문자열이 아닌 경우 문자열로 변환됩니다. 예를 들어, 작업이 객체인 경우 해당 객체의 .toString()이 호출되어 이를 문자열로 변환합니다.
템플릿 문자열에 백틱을 사용하려면 백슬래시를 사용하여 이스케이프해야 합니다.
마찬가지로, 템플릿 문자열에 ${를 출력하려면 ${ 또는 ${와 같이 백슬래시를 사용하여 이스케이프해야 합니다.
템플릿 문자열은 여러 줄에 걸쳐 있을 수 있습니다.

$("#warning").html(`
 <h1>Watch out!</h1>
 <p>Unauthorized hockeying can result in penalties
 of up to ${maxPenalty} minutes.</p>
`);
 
$("#warning").html(`
 <h1>Watch out!</h1>
 <p>Unauthorized hockeying can result in penalties
 of up to ${maxPenalty} minutes.</p>
`);

템플릿 문자열의 모든 공백, 줄 바꿈 및 들여쓰기는 결과 문자열에 그대로 출력됩니다.

템플릿 문자열로 수행할 수 없는 작업을 살펴보겠습니다.

특수 문자는 자동으로 이스케이프되지 않습니다. 크로스 사이트 스크립팅 취약점을 방지하려면 일반 문자열과 마찬가지로 신뢰할 수 없는 데이터에 주의해야 합니다.
국제 도서관에서는 사용할 수 없으며 특수 언어 형식의 숫자, 날짜 등을 처리하지 않습니다.
템플릿 엔진(예: Mustache 또는 Nunjucks 등)을 대체하지 않습니다. 템플릿 문자열에는 루프 처리를 위한 구문이 없습니다. 배열에서 테이블을 만들 수 없습니다.

이러한 제한 사항을 해결하기 위해 ES6에서는 개발자와 라이브러리 디자이너에게 또 다른 유형의 템플릿 문자열인 태그 템플릿을 제공합니다.

태그 템플릿의 구문은 매우 간단합니다. 백틱을 시작하기 전에 태그를 삽입하기만 하면 됩니다. 첫 번째 예인 SaferHTML을 살펴보면 이 태그 템플릿을 사용하여 위에서 언급한 첫 번째 제한 사항인 특수 문자 자동 이스케이프를 해결하겠습니다.

SaferHTML 메소드는 ES6 표준 라이브러리에서 제공되지 않으므로 직접 구현해야 합니다.

var message =
 SaferHTML`<p>${bonk.sender} has sent you a bonk.</p>`;
 
var message =
 SaferHTML`<p>${bonk.sender} has sent you a bonk.</p>`;

여기서 SaferHTML 태그는 단일 식별자이며 태그는 SaferHTML.escape와 같은 속성일 수도 있고 SaferHTML.escape({unicodeControlCharacters: false}) 메소드 호출일 수도 있습니다. 정확하게 말하면 ES6 멤버 표현식이나 호출 표현식을 태그로 사용할 수 있습니다.

템플릿 문자열은 문자열 연결을 위한 구문 설탕일 뿐이지만 레이블 템플릿은 실제로 완전히 다른 것, 즉 함수 호출임을 알 수 있습니다.

따라서 위 코드는 다음과 같습니다.

var message =
 SaferHTML(templateData, bonk.sender);
 
var message =
 SaferHTML(templateData, bonk.sender);

templateData는 소스 템플릿 문자열을 기반으로 JS 엔진에 의해 생성된 불변 문자열 배열입니다. 템플릿 문자열이 자리 표시자로 구분된 후 두 개의 문자열을 포함하기 때문에 여기 배열에는 두 개의 요소가 포함됩니다. : Object.freeze(["

", " 님이 당신에게 메시지를 보냈습니다.

"]

(사실 templateData에는 templateData.raw라는 또 다른 속성이 있습니다. 이 기사에서는 이 속성에 대해 자세히 설명하지 않습니다. 이 속성의 값도 태그 템플릿의 모든 문자열 부분을 포함하는 배열이지만 string n과 같이 소스 코드의 문자열과 더 유사한 이스케이프 시퀀스가 ​​포함되어 있습니다. ES6 내장 태그 String.raw는 이러한 문자열 )

을 사용합니다.

이를 통해 SaferHTML 메소드는 이 두 문자열을 마음대로 구문 분석할 수 있으며 N개의 대체 메소드가 있습니다.

계속 읽으면서 SaferHTML 메소드를 구현하는 방법이 궁금할 수 있습니다.

구현(요점)은 다음과 같습니다.

function SaferHTML(templateData) {
 var s = templateData[0];
 for (var i = 1; i < arguments.length; i++) {
  var arg = String(arguments[i]);

  // Escape special characters in the substitution.
  s += arg.replace(/&/g, "&")
      .replace(/</g, "<")
      .replace(/>/g, ">");

  // Don't escape special characters in the template.
  s += templateData[i];
 }
 return s;
}
 
function SaferHTML(templateData) {
 var s = templateData[0];
 for (var i = 1; i < arguments.length; i++) {
  var arg = String(arguments[i]);
 
  // Escape special characters in the substitution.
  s += arg.replace(/&/g, "&")
      .replace(/</g, "<")
      .replace(/>/g, ">");
 
  // Don't escape special characters in the template.
  s += templateData[i];
 }
 return s;
}

有了上面的方法，即使使用一个恶意的用户名，用户也是安全的。

一个简单的例子并不足以说明标签模板的灵活性，让我们重温一下上面列举的模板字符串的限制，看看我们还可以做些什么。

模板字符串不会自动转义特殊字符，但是我们可以通过标签模板来解决这个问题，事实上我们还可以将 SaferHTML 这个方法写的更好。从安全角度来看，这个 SaferHTML 非常脆弱。在 HTML 中，不同的地方需要用不同的方式去转义，SaferHTML 并没有做到。稍加思考，我们就可以实现一个更加灵活的 SaferHTML方法，能够将 templateData 中的任何一个 HTML 转义，知道哪个占位符是纯 HTML；哪个是元素的属性，从而需要对 ' 和 " 转义；哪个是 URL 的 query 字符串，从而需要用 URL 的 escaping 方法，而不是 HTML 的 escaping；等等。这似乎有些牵强，因为 HTML 转义效率比较低。辛运是的，标签模板的字符串是保持不变的，SaferHTML 可以缓存已经转义过的字符串，从而提高效率。
模板字符串并没有内置的国际化特性，但通过标签模板，我们可以添加该特性。Jack Hsu 的文章详细介绍了实现过程，看下面例子：

i18n`Hello ${name}, you have ${amount}:c(CAD) in your bank account.`
// => Hallo Bob, Sie haben 1.234,56 $CA auf Ihrem Bankkonto.




i18n`Hello ${name}, you have ${amount}:c(CAD) in your bank account.`
// => Hallo Bob, Sie haben 1.234,56 $CA auf Ihrem Bankkonto.

上面例子中的 name 和 amount 很好理解，将被 JS 引擎替换为对应的字符串，但是还有一个没有见过的占位符：:c(CAD)，这将被 i18n 标签处理，从 i18n 的文档可知：:c(CAD)表示 amount 是加拿大美元货币值。

模板字符串不能替代 Mustache 和 Nunjucks 这类模板引擎，部分原因在于模板字符串不支持循环和条件语句。我们可以编写一个标签来实现这类功能：

// Purely hypothetical template language based on
// ES6 tagged templates.
var libraryHtml = hashTemplate`
 <ul>
  #for book in ${myBooks}
   <li><i>#{book.title}</i> by #{book.author}</li>
  #end
 </ul>
`;

 
// Purely hypothetical template language based on
// ES6 tagged templates.
var libraryHtml = hashTemplate`
 <ul>
  #for book in ${myBooks}
   <li><i>#{book.title}</i> by #{book.author}</li>
  #end
 </ul>
`;

灵活性还不止于此，需要注意的是，标签函数的参数不会自动转换为字符串，参数可以是任何类型，返回值也一样。标签模板甚至可以不需要字符串，你可以使用自定义标签来创建正则表达式、DOM 树、图片、代表整个异步进程的 Promise、JS 数据结构、GL 着色器…

标签模板允许库设计者创建强大的领域特定语言。这些语言可能看上去并不像 JS，但他们可以无缝嵌入到 JS 中，并且可以与语言的其余部分进行交互。顺便说一下，我还没有在其他语言中见过类似的特性，我不知道这个特性讲给我们带来些什么，但各种可能性还是非常令人兴奋的。