樣板字面值 Template literals

做字串和變數串接，或是變數和表達式串接

const name = "yinmin";
const str = '我的名字是' + name;
console.log(str); //我的名字是yinmin

缺點：很長串或是換行後會難閱讀，舉例下方範例：

const arr = [
	{name: 'dog', age: 1},
	{name: 'yinmin', age: 18}
];

const str = '<ul>\
<li>我是'+ arr[0].name + '，我'+ arr[0].age + '歲</li>\
<li>我是'+ arr[1].name + '，我'+ arr[1].age + '歲</li>\
</ul>';

// 字串換行後需要加上「反斜線\」

樣板字面值使用 反引號 ``

const name = "yinmin";
const str = `我的名字是${ name }`;
console.log(str); //我的名字是yinmin

變數則使用錢字號+花括號，呈現結果與上面的相同

const arr = [
	{name: 'dog', age: 1},
	{name: 'yinmin', age: 18}
];

const str = `<ul>
<li>我是 ${ arr[0].name }，我 ${ arr[0].age }歲</li>
<li>我是 ${ arr[1].name }，我 ${ arr[1].age }歲</li>
</ul>`;

和表達式串接

const name = "yinmin";
const greet = ""
const str = `我的名字是 ${ name }，${ greet || '很開心認識你！'}`;
console.log(str); //我的名字是yinmin，很開心認識你！

巢狀結構

const arr = [
	{name: 'dog', age: 1},
	{name: 'yinmin', age: 18}
];

const str = `<ul>${ arr.map((item) => `<li>我是 ${ item.name }，我 ${ item.age } 歲</li>`).join('') }</ul>`;

//使用join('')將陣列轉為純字串

標籤樣板字面值

參數解釋：

• strings 字串拆解的結果
• arg 變數回傳的結果

function greet(strings, ...arg){
	console.log(strings, arg);
}

const myName = 'yinmin';

greet`大家好，我的名字是 ${myName}`;

應用

const myName = 'yinmin';
const greet = (strings, ...arg) => strings.map((str,i)=>`${str}${arg[i] ? `<span>${arg[i]</span>` : ''}`).join('');
const str = greet`大家好，我的名字是 ${myName}`;

console.log(str);

使用時機：有多個字串或多個變數需要使用相同方法時可以考慮使用標籤樣板字面值