JavaScript 核心觀念(71) - ES6 章節: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 都是可以接受的,唯獨陳述式是不行的~

剛好也可以拿一個很常被問的問題,也就是變數宣告 ley 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://hsiangfeng.github.io/',
},
{
myName: 'is Ray not Array',
url: 'https://www.facebook.com/HsiangFengWeb',
},
];

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://hsiangfeng.github.io/',
},
{
myName: 'is Ray not Array',
url: 'https://www.facebook.com/HsiangFengWeb',
},
];

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://hsiangfeng.github.io/',
},
{
myName: 'is Ray not Array',
url: 'https://www.facebook.com/HsiangFengWeb',
},
];

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

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

參考文獻

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

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