es6模板部分

例項：模板編譯

下面，我們來看一個通過模板字串，生成正式模板的例項。

let template = `
<ul>
  <% for(let i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
`;

上面程式碼在模板字串之中，放置了一個常規模板。該模板使用<%...%>放置 JavaScript 程式碼，使用<%= ... %>輸出 JavaScript 表示式。

怎麼編譯這個模板字串呢？

一種思路是將其轉換為 JavaScript 表示式字串。

echo('<ul>');
for(let i=0; i < data.supplies.length; i++) {
  echo('<li>');
  echo(data.supplies[i]);
  echo('</li>');
};
echo('</ul>');

這個轉換使用正規表示式就行了。

let evalExpr = /<%=(.+?)%>/g;
let expr = /<%([\s\S]+?)%>/g;

template = template
  .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')
  .replace(expr, '`); \n $1 \n  echo(`');

template = 'echo(`' + template + '`);';

然後，將template封裝在一個函式裡面返回，就可以了。

let script =
`(function parse(data){
  let output = "";

  function echo(html){
    output += html;
  }

  ${ template }

  return output;
})`;

return script;

將上面的內容拼裝成一個模板編譯函式compile。

function compile(template){
  const evalExpr = /<%=(.+?)%>/g;
  const expr = /<%([\s\S]+?)%>/g;

  template = template
    .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')
    .replace(expr, '`); \n $1 \n  echo(`');

  template = 'echo(`' + template + '`);';

  let script =
  `(function parse(data){
    let output = "";

    function echo(html){
      output += html;
    }

    ${ template }

    return output;
  })`;

  return script;
}

compile函式的用法如下。

let parse = eval(compile(template));
div.innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });
//   <ul>
//     <li>broom</li>
//     <li>mop</li>
//     <li>cleaner</li>
//   </ul>

標籤模板

模板字串的功能，不僅僅是上面這些。它可以緊跟在一個函式名後面，該函式將被呼叫來處理這個模板字串。這被稱為“標籤模板”功能（tagged template）。

alert`123`
// 等同於
alert(123)

標籤模板其實不是模板，而是函式呼叫的一種特殊形式。“標籤”指的就是函式，緊跟在後面的模板字串就是它的引數。

但是，如果模板字元裡面有變數，就不是簡單的呼叫了，而是會將模板字串先處理成多個引數，再呼叫函式。

let a = 5;
let b = 10;

tag`Hello ${ a + b } world ${ a * b }`;
// 等同於
tag(['Hello ', ' world ', ''], 15, 50);

上面程式碼中，模板字串前面有一個標識名tag，它是一個函式。整個表示式的返回值，就是tag函式處理模板字串後的返回值。

函式tag依次會接收到多個引數。

function tag(stringArr, value1, value2){
  // ...
}

// 等同於

function tag(stringArr, ...values){
  // ...
}

tag函式的第一個引數是一個陣列，該陣列的成員是模板字串中那些沒有變數替換的部分，也就是說，變數替換隻發生在陣列的第一個成員與第二個成員之間、第二個成員與第三個成員之間，以此類推。

tag函式的其他引數，都是模板字串各個變數被替換後的值。由於本例中，模板字串含有兩個變數，因此tag會接受到value1和value2兩個引數。

tag函式所有引數的實際值如下。

• 第一個引數：['Hello ', ' world ', '']
• 第二個引數: 15
• 第三個引數：50

也就是說，tag函式實際上以下面的形式呼叫。

tag(['Hello ', ' world ', ''], 15, 50)

我們可以按照需要編寫tag函式的程式碼。下面是tag函式的一種寫法，以及執行結果。

let a = 5;
let b = 10;

function tag(s, v1, v2) {
  console.log(s[0]);
  console.log(s[1]);
  console.log(s[2]);
  console.log(v1);
  console.log(v2);

  return "OK";
}

tag`Hello ${ a + b } world ${ a * b}`;
// "Hello "
// " world "
// ""
// 15
// 50
// "OK"

下面是一個更復雜的例子。

let total = 30;
let msg = passthru`The total is ${total} (${total*1.05} with tax)`;

function passthru(literals) {
  let result = '';
  let i = 0;

  while (i < literals.length) {
    result += literals[i++];
    if (i < arguments.length) {
      result += arguments[i];
    }
  }

  return result;
}

msg // "The total is 30 (31.5 with tax)"

上面這個例子展示了，如何將各個引數按照原來的位置拼合回去。

passthru函式採用 rest 引數的寫法如下。

function passthru(literals, ...values) {
  let output = "";
  let index;
  for (index = 0; index < values.length; index++) {
    output += literals[index] + values[index];
  }

  output += literals[index]
  return output;
}

“標籤模板”的一個重要應用，就是過濾 HTML 字串，防止使用者輸入惡意內容。

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

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

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

    // Don't escape special characters in the template.
    s += templateData[i];
  }
  return s;
}

上面程式碼中，sender變數往往是使用者提供的，經過SaferHTML函式處理，裡面的特殊字元都會被轉義。

let sender = '<script>alert("abc")</script>'; // 惡意程式碼
let message = SaferHTML`<p>${sender} has sent you a message.</p>`;

message
// <p>&lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message.</p>

標籤模板的另一個應用，就是多語言轉換（國際化處理）。

i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`
// "歡迎訪問xxx，您是第xxxx位訪問者！"

模板字串本身並不能取代 Mustache 之類的模板庫，因為沒有條件判斷和迴圈處理功能，但是通過標籤函式，你可以自己新增這些功能。

// 下面的hashTemplate函式
// 是一個自定義的模板處理函式
let libraryHtml = hashTemplate`
  <ul>
    #for book in ${myBooks}
      <li><i>#{book.title}</i> by #{book.author}</li>
    #end
  </ul>
`;

除此之外，你甚至可以使用標籤模板，在 JavaScript 語言之中嵌入其他語言。

jsx`
  <div>
    <input
      ref='input'
      onChange='${this.handleChange}'
      defaultValue='${this.state.value}' />
      ${this.state.value}
   </div>
`

上面的程式碼通過jsx函式，將一個 DOM 字串轉為 React 物件。你可以在 Github 找到jsx函式的具體實現。

下面則是一個假想的例子，通過java函式，在 JavaScript 程式碼之中執行 Java 程式碼。

java`
class HelloWorldApp {
  public static void main(String[] args) {
    System.out.println(“Hello World!”); // Display the string.
  }
}
`
HelloWorldApp.main();

模板處理函式的第一個引數（模板字串陣列），還有一個raw屬性。

console.log`123`
// ["123", raw: Array[1]]

上面程式碼中，console.log接受的引數，實際上是一個陣列。該陣列有一個raw屬性，儲存的是轉義後的原字串。

請看下面的例子。

tag`First line\nSecond line`

function tag(strings) {
  console.log(strings.raw[0]);
  // strings.raw[0] 為 "First line\\nSecond line"
  // 列印輸出 "First line\nSecond line"
}

上面程式碼中，tag函式的第一個引數strings，有一個raw屬性，也指向一個陣列。該陣列的成員與strings陣列完全一致。比如，strings陣列是["First line\nSecond line"]，那麼strings.raw陣列就是["First line\\nSecond line"]。兩者唯一的區別，就是字串裡面的斜槓都被轉義了。比如，strings.raw 陣列會將\n視為\\和n兩個字元，而不是換行符。這是為了方便取得轉義之前的原始模板而設計的。

String.raw()

ES6 還為原生的 String 物件，提供了一個raw方法。

String.raw方法，往往用來充當模板字串的處理函式，返回一個斜槓都被轉義（即斜槓前面再加一個斜槓）的字串，對應於替換變數後的模板字串。

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

String.raw`Hi\u000A!`;
// 返回 "Hi\\u000A!"

如果原字串的斜槓已經轉義，那麼String.raw會進行再次轉義。

String.raw`Hi\\n`
// 返回 "Hi\\\\n"

String.raw方法可以作為處理模板字串的基本方法，它會將所有變數替換，而且對斜槓進行轉義，方便下一步作為字串來使用。

String.raw方法也可以作為正常的函式使用。這時，它的第一個引數，應該是一個具有raw屬性的物件，且raw屬性的值應該是一個陣列。

String.raw({ raw: 'test' }, 0, 1, 2);
// 't0e1s2t'

// 等同於
String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2);

作為函式，String.raw的程式碼實現基本如下。

String.raw = function (strings, ...values) {
  let output = '';
  let index;
  for (index = 0; index < values.length; index++) {
    output += strings.raw[index] + values[index];
  }

  output += strings.raw[index]
  return output;
}

模板字串的限制

前面提到標籤模板裡面，可以內嵌其他語言。但是，模板字串預設會將字串轉義，導致無法嵌入其他語言。

舉例來說，標籤模板裡面可以嵌入 LaTEX 語言。

function latex(strings) {
  // ...
}

let document = latex`
\newcommand{\fun}{\textbf{Fun!}}  // 正常工作
\newcommand{\unicode}{\textbf{Unicode!}} // 報錯
\newcommand{\xerxes}{\textbf{King!}} // 報錯

Breve over the h goes \u{h}ere // 報錯
`

上面程式碼中，變數document內嵌的模板字串，對於 LaTEX 語言來說完全是合法的，但是 JavaScript 引擎會報錯。原因就在於字串的轉義。

模板字串會將\u00FF和\u{42}當作 Unicode 字元進行轉義，所以\unicode解析時報錯；而\x56會被當作十六進位制字串轉義，所以\xerxes會報錯。也就是說，\u和\x在 LaTEX 裡面有特殊含義，但是 JavaScript 將它們轉義了。

為了解決這個問題，ES2018 放鬆了對標籤模板裡面的字串轉義的限制。如果遇到不合法的字串轉義，就返回undefined，而不是報錯，並且從raw屬性上面可以得到原始字串。

function tag(strs) {
  strs[0] === undefined
  strs.raw[0] === "\\unicode and \\u{55}";
}
tag`\unicode and \u{55}`

上面程式碼中，模板字串原本是應該報錯的，但是由於放鬆了對字串轉義的限制，所以不報錯了，JavaScript 引擎將第一個字元設定為undefined，但是raw屬性依然可以得到原始字串，因此tag函式還是可以對原字串進行處理。

注意，這種對字串轉義的放鬆，只在標籤模板解析字串時生效，不是標籤模板的場合，依然會報錯。

let bad = `bad escape sequence: \unicode`; // 報錯