[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

參考: