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

發表於 分類於

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你 ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

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

前言

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

巢狀結構

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

1
2
3
4
5
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，舉例來講：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 來解決

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 語法來移除逗號，所以完整寫法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 種操作的方法」。

參考文獻