JavaScript 核心觀念(71) - ES6 章節：Template Literial - 巢狀結構

前言

接下來算是來介紹了解 Template Literial 還有哪些特別之處。

巢狀結構

在前面章節有提到一件事情 Template Literial 本身是可以接受表達式，因此這樣寫也是可以的

function fn() {
  return '是 Ray 不是 Array';
}

console.log(`我的名字 ${ fn() }`); // 我的名字 是 Ray 不是 Array

那如果是陳述式呢？

1	console.log(`我的名字是 ${ if(true) return 'Ray' }`); // Uncaught SyntaxError: Unexpected token 'if'

基本上我們可以透過上面簡單幾種寫法可以認知到，只要是表達式 Template Literial 都是可以接受的，唯獨陳述式是不行的~

剛好也可以拿一個很常被問的問題，也就是變數宣告 let myName = 'Ray'; 是不是表達式

1	console.log(`我的名字是 ${ let myName = 'Ray'; }`); // Uncaught SyntaxError: Missing } in template expression

依照錯誤訊息來講你就可以知道變數宣告是一個陳述式。

那麼 Template Literial 本身也是屬於表達式，因此你可以這樣子巢狀撰寫

1 2	let myName = 'Ray'; console.log(`我的名字${ `是 ${myName}` }`); // 我的名字是 Ray

那麼在實務上我們很常去組合 DOM，舉例來講：

const people = [
  {
    myName: 'Ray',
    url: 'https://israynotarray.com/',
  },
  {
    myName: 'is Ray not Array',
    url: 'https://www.facebook.com/israynotarray',
  },
];

const list = `<ul>
  <li>我的名字是：${people[0].myName}</li>
  <li>我的網址是：${people[0].url}</li>
</ul>`;

那麼透過這種方式其實是相當不方便的，因此可以使用迴圈來解決這個問題，所以這邊就可以使用 map 來解決

const people = [
  {
    myName: 'Ray',
    url: 'https://israynotarray.com/',
  },
  {
    myName: 'is Ray not Array',
    url: 'https://www.facebook.com/israynotarray',
  },
];

const list = `<ul>
  ${ people.map((item) => `
    <li>我的名字是：${item.myName}</li>
    <li>我的網址是：${item.url}</li>
  `)}
</ul>`;

但是在這邊要注意一件事情 map 本身是回傳一個陣列，因此如果你拿來渲染在畫面上的話就會看到一推 ,，而為了解決這個問題就會使用 join 語法來移除逗號，所以完整寫法如下：

const people = [
  {
    myName: 'Ray',
    url: 'https://israynotarray.com/',
  },
  {
    myName: 'is Ray not Array',
    url: 'https://www.facebook.com/israynotarray',
  },
];

const list = `<ul>
  ${
    people.map((item) => `
    <li>我的名字是：${item.myName}</li>
    <li>我的網址是：${item.url}</li>
  `).join('')
  }
</ul>`;

如果你對於陣列操作方法沒有那麼熟悉的話，可以考慮參考我這一篇「關於 JavaScript 陣列 20 種操作的方法」。

參考文獻

JavaScript 核心篇

JavaScript 核心觀念(71) - ES6 章節：Template Literial - 巢狀結構

前言

巢狀結構

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

巢狀結構

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

JavaScript 核心觀念(72) - ES6 章節：Template Literial - 標籤樣板字面值

JavaScript 核心觀念(70) - ES6 章節：Template Literial - 樣板字面值技巧：VSCode 搭配 Emmet 撰寫 HTML 結構

JavaScript 核心觀念(69) - ES6 章節：Template Literial - 樣板字面值（Template literals）基本介紹

JavaScript 核心觀念(82) - ES6 章節：Async/Await - 撰寫高可用性高的錯誤捕捉

分享這篇文章

留言