[Javascript] ES6 — Template Strings

ES6 引入了一種新型的字串語法，稱之為模板源文本（template strings）。Template strings 使用反引號 (``)圍着，Template strings中可以包含由錢字號($)與大括號({ })所構成的佔位符(即：${expression})，使用 template strings可以實現多行字串及字符串插值。

以前的語法如果要做字串與變數的輸出：

var name = 'John';
var age = 4;
var sentence = 'My dog' + name + ' is ' + age * 7 + ' years old.';

使用 template strings:

const name = 'John';
const age = 4;
const sentence = `My dog ${name} is ${ age * 7 } years old.`;

佔位符的內容可以是任何JavaScript表達式，所以也可以調用函數。如果運算後的值不是字串，將會按照常規將其轉換為字串。

Template strings 也可以用在template strings裡面（template inception）。

With looping

const dogs = [
  { name: 'Snickers', age: 2 },
  { name: 'Hugo', age: 8 },
  { name: 'Sunny', age: 1 }
];
const markup = `
  <ul>
    ${dogs.map(dog => `
      <li>${dog.name} is ${dog.age * 7} years old.</li>
    `).join('')}
  </ul>
`;

With if

const song = {
  name: 'Dying to live',
  artist: 'Tupac',
  featuring: 'Biggie Smalls'
};
const markup = `
  <section className="song">
    <hi>${song.name} - ${song.artist}</hi>
    ${song.featuring ? `<p>Featuring: ${song.featuring}</p>` : ''} 
  </section>
`;

tagged template 帶標籤模板源文本

帶標籤模板源文本是一種更高級的模板源文本形式，允許你透過標籤函數操作模板源文本的輸出。標籤函數會將模板源文本的內容分割爲字串陣列，及處理過的表達式陣列。

function highlight(strings, ...values) {
  let str = '';
  strings.forEach((string, i) => {
    str += `${string} <span class="hl">${values[i] || ''}</span>`;
  });
  return str;
}
const name = 'John';
const age = 4;
const sentence = highlight`My dog's name is ${name} and he is ${age} years old`;
console.log(sentence)
// "My dog's name is  <span class="hl">John</span> and he is  <span class="hl">4</span> years old <span class="hl"></span>"

需要注意的是，字串陣列永遠會比表達式陣列多一個元素。所以上面的程式 values[i] || '' 是用來防止字串陣列最後一個元素輸出時並沒有對應的 values 元素，會出現 undefined 。

來源：ES6 for Everyone

參考：

• MDN — 模板源文本