17.使用模板字面值和标签模板

• 网页模板 是从数据到文本的函数。它经常用于 Web 开发，通常通过文本文件定义。例如，以下文本定义了库 Handlebars 的模板：

  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
  </div>
  

• 模板字面值 是具有更多功能的字符串字面值，例如插值。它由反引号分隔：

  const num = 5;
  assert.equal(`Count: ${num}!`, 'Count: 5!');
  

• 标签模板 是一个函数，后跟一个模板字面值。它导致调用该函数，并将模板字面值的内容作为参数提供给它。

  const getArgs = (...args) => args;
  assert.deepEqual(
    getArgs`Count: ${5}!`,
    [['Count: ', '!'], 5] );
  

  请注意，getArgs()接收字面值的文本和通过${}插入的数据。

const MAX = 100;
function doSomeWork(x) {
  if (x > MAX) {
    throw new Error(`At most ${MAX} allowed: ${x}!`);
  }
  // ···
}
assert.throws(
  () => doSomeWork(101),
  {message: 'At most 100 allowed: 101!'});

const str = `this is
a text with
multiple lines`;

const first = 'Lisa';
const last = 'Simpson';
const result = tagFunction`Hello ${first} ${last}!`; // A

const result = tagFunction(['Hello ', ' ', '!'], first, last);

• 模板字符串（第一个参数）：一个包含插值（${...}）周围文本片段的数组。
  • 在示例中：['Hello ', ' ', '!']
• 替换值（剩余参数）：插值。
  • 在示例中：'Lisa'和'Simpson'

• 熟视图 ，其中：
  • \t变为制表符
  • \\变为一个反斜杠
• 原始视图 ，其中：
  • \t变为斜线后跟t
  • \\变为两个反斜杠

import {html, render} from 'lit-html';
const template = (items) => html`
  <ul>
    ${
      repeat(items,
        (item) => item.id,
        (item, index) => html`<li>${index}. ${item.name}</li>`
      )
    }
  </ul>
`;

import {re} from 're-template-tag';
const RE_YEAR = re`(?<year>[0-9]{4})`;
const RE_MONTH = re`(?<month>[0-9]{2})`;
const RE_DAY = re`(?<day>[0-9]{2})`;
const RE_DATE = re`/${RE_YEAR}-${RE_MONTH}-${RE_DAY}/u`;
const match = RE_DATE.exec('2017-01-27');
assert.equal(match.groups.year, '2017');

import gql from 'graphql-tag';
const query = gql`
  {
    user(id: 5) {
      firstName
      lastName
    }
  }
  `;

assert.equal(String.raw`\back`, '\\back');

const regex1 = /^\./;
const regex2 = new RegExp('^\\.');
const regex3 = new RegExp(String.raw`^\.`);

const WIN_PATH = String.raw`C:\foo\bar`;
assert.equal(WIN_PATH, 'C:\\foo\\bar');

function div(text) {
  return `
    <div>
      ${text}
    </div>
  `;
}
console.log('Output:');
console.log(div('Hello!')
  // Replace spaces with mid-dots:
  .replace(/ /g, '·')
  // Replace \n with #\n:
  .replace(/\n/g, '#\n'));

Output:
#
····<div>#
······Hello!#
····</div>#
··

import dedent from 'dedent';
function divDedented(text) {
  return dedent`
    <div>
      ${text}
    </div>
  `;
}
console.log('Output:');
console.log(divDedented('Hello!'));

Output:
<div>
  Hello!
</div>

function divDedented(text) {
  return `
<div>
  ${text}
</div>
  `.trim();
}
console.log('Output:');
console.log(divDedented('Hello!'));

Output:
<div>
  Hello!
</div>

const tmpl = (data) => `Hello ${data.name}!`;
assert.equal(tmpl({name: 'Jane'}), 'Hello Jane!');

const addresses = [
  { first: '<Jane>', last: 'Bond' },
  { first: 'Lars', last: '<Croft>' },
];

const tmpl = (addrs) => `
<table>
  ${addrs.map(
    (addr) => `
      <tr>
        <td>${escapeHtml(addr.first)}</td>
        <td>${escapeHtml(addr.last)}</td>
      </tr>
      `.trim()
  ).join('')}
</table>
`.trim();

• <table>内的文本是通过单个地址（第 4 行）的嵌套模板函数生成的。注意它最后如何使用字符串方法.trim()来删除不必要的空格。
• 嵌套模板函数通过数组方法.map()（第 3 行）应用于 Array addrs的每个元素。
• 生成的（字符串）数组通过数组方法.join()（第 10 行）转换为字符串。
• 辅助函数escapeHtml()用于转义特殊 HTML 字符（第 6 行和第 7 行）。其实现将在下一节中介绍。

console.log(tmpl(addresses));

<table>
  <tr>
        <td><Jane></td>
        <td>Bond</td>
      </tr><tr>
        <td>Lars</td>
        <td><Croft></td>
      </tr>
</table>

function escapeHtml(str) {
  return str
    .replace(/&/g, '&') // first!
    .replace(/>/g, '>')
    .replace(/</g, '<')
    .replace(/"/g, '"')
    .replace(/'/g, ''')
    .replace(/`/g, '`')
    ;
}