02-模板字元串

傳統的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`);

// 字元串中嵌入變數
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

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

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

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

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