1.基本用法

傳統的JavaScript語言，輸出模板通常是這樣寫的。

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

上面這種寫法相當繁瑣不方便，ES6引入了模板字串解決這個問題。

$('#result').append(`
         There are <b>${basket.count}</b> items
          in your basket, <em>${basket.onSale}</em>
         are on sale!
       `);
 

模板字串（template string）是增強版的字串，用反引號（`）標識。它可以當作普通字串使用，也可以用來定義多行字串，或者在字串中嵌入變數。

// 普通字串

`In JavaScript '\n' is a line-feed.`

// 多行字串

`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字串中嵌入變數

var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
 

上面程式碼中的模板字串，都是用反引號表示。如果在模板字串中需要使用反引號，則前面要用反斜槓轉義。

var greeting = `\`Yo\` World!`;

如果使用模板字串表示多行字串，所有的空格和縮排都會被保留在輸出之中。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

上面程式碼中，所有模板字串的空格和換行，都是被保留的，比如<ul>標籤前面會有一個換行。如果你不想要這個換行，可以使用trim方法消除它。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

模板字串中嵌入變數，需要將變數名寫在${}之中。

function authorize(user, action) {
  if (!user.hasPrivilege(action)) {
    throw new Error(
      // 傳統寫法為
      // 'User '
      // + user.name
      // + ' is not authorized to do '
      // + action
      // + '.'
      `User ${user.name} is not authorized to do ${action}.`);
  }
}

大括號內部可以放入任意的JavaScript表示式，可以進行運算，以及引用物件屬性。

var x = 1;
var y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// 3

模板字串之中還能呼叫函式。

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

如果大括號中的值不是字串，將按照一般的規則轉為字串。比如，大括號中是一個物件，將預設呼叫物件的toString方法。

如果模板字串中的變數沒有宣告，將報錯。

// 變數place沒有宣告
var msg = `Hello, ${place}`;
// 報錯

由於模板字串的大括號內部，就是執行JavaScript程式碼，因此如果大括號內部是一個字串，將會原樣輸出。

`Hello ${'World'}`
// "Hello World"

模板字串甚至還能巢狀。

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

上面程式碼中，模板字串的變數之中，又嵌入了另一個模板字串，使用方法如下。

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

console.log(tmpl(data));
// <table>
//
//   <tr><td><Jane></td></tr>
//   <tr><td>Bond</td></tr>
//
//   <tr><td>Lars</td></tr>
//   <tr><td><Croft></td></tr>
//
// </table>

如果需要引用模板字串本身，在需要時執行，可以像下面這樣寫。

// 寫法一
let str = 'return ' + '`Hello ${name}!`';
let func = new Function('name', str);
func('Jack') // "Hello Jack!"

// 寫法二
let str = '(name) => `Hello ${name}!`';
let func = eval.call(null, str);
func('Jack') // "Hello Jack!"

2.例項：模板編譯

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

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

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

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

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

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

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

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

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

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

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

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

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

  ${ template }

  return output;
})`;

return script;

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

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

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

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

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

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

    ${ template }

    return output;
  })`;

  return script;
}

compile函式的用法如下。

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

3.標籤模板

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

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

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

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

var a = 5;
var 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函式的一種寫法，以及執行結果。

var a = 5;
var 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"

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

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

function passthru(literals) {
  var result = '';
  var 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) {
  var output = "";
  for (var index = 0; index < values.length; index++) {
    output += literals[index] + values[index];
  }

  output += literals[index]
  return output;
}

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

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

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;
}

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

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

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

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

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

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

// 下面的hashTemplate函式
// 是一個自定義的模板處理函式
var 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]);
  // "First line\\nSecond line"
}

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

作者：飢人谷_小k 連結：https://www.jianshu.com/p/8b263a6bde4d 來源：簡書 簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。