Javascript 进阶 10-3 巢状结构

这个章节继续来介绍样板字面值的巢状结构

根据 MDN 的文章解释，样板字面值的 ${} 区块，其中必须要是表达式才可以。

也就是下面的例子:

const person = {    name: '小明'};const sentence = `我是${ person.name }`;console.log(sentence);

那如果我取用了不存在的物件属性的话呢?

const person = {    name: '小明'};const sentence = `我是${ person.name }，身上带有 ${perosn.cash} 元`;console.log(sentence);

就会出现 undefined 元，恩~蛮合理的~

所以这边我也可以跟逻辑运算子合用:

const person = {    name: '小明'};const sentence = `我是${ person.name }，身上带有 ${person.cash || 1000} 元`;console.log(sentence);

那么既然是表达式，除了 || 以外 = 也可以喔!

const person = {    name: '小明'};const sentence = `我是${ person.name }，身上带有 ${person.cash = 1000} 元`;console.log(sentence, person.cash);

虽然我们平常不会这样写，但这样处理的话，的确 person 里面就会被赋值 cash 的属性，并且给予 1000 的值。

同时也因为 = 会回传最右边的的值，所以身上带有的字句后面就会接着 1000 的数字!

但如果今天这边是使用 const / let / var 等陈述式，就会报错!

const person = {    name: '小明'};const sentence = `我是${ person.name }，身上带有 ${const cash = 1000} 元`;console.log(sentence, person.cash);

除此之外呢，具有回传能力的函式调用(会return 某个值的函式)或是立即函式的形式都是可以的喔!

const person = {    name: '小明',    cash: 1000};const sentence = `我是${ person.name }，身上带有 ${(function (a){ return a;})(person.cash)} 元`;console.log(sentence, person.cash);

这边也可以利用箭头函式做简写喔!

const person = {    name: '小明',    cash: 1000};const sentence = `我是${ person.name }，身上带有 ${(a => a)(person.cash)} 元`;console.log(sentence, person.cash);

巢状结构

其实样板字面值本身也是一种表达式喔，所以我们也可以使用巢状的样板字面值进行撰写。

const person = {    name: '小明',    cash: 1000};const sentence = `我是${person.name}， ${`身上带有 ${(a => a)(person.cash)}`} 元`;console.log(sentence, person.cash);

这边呢我们就回到上一篇文章的範例:

const data = [{    name: '小明',    cash: 500},{    name: '小华',    cash: 1000},{    name: '小夫',    cash: 1500}];const listString = `<ul>    <li>我是 ${people[0].name}，身上有 ${people[0].cash} 元</li>    <li>我是 ${people[1].name}，身上有 ${people[0].cash} 元</li>    <li>我是 ${people[2].name}，身上有 ${people[0].cash} 元</li></ul>`;

现在只有三笔 li ，当资料变多的时候，不可能这样一个一个填写。

所以现在我们要透过迴圈的方式，把资料给组出来!

而这边我们要使用的是 map 的迴圈，产生一个新的阵列!

const data = [{    name: '小明',    cash: 500},{    name: '小华',    cash: 1000},{    name: '小夫',    cash: 1500}];const listString = `<ul>    ${    (data.map(person => `<li>我是 ${person.name}，身上有 ${ person.cash } 元</li>`)).join('')    }</ul>`;console.log(listString);

利用这种方式，就可以组成阵列带有三个字串，最后再用join的方法把逗号给去掉，并且把阵列转换成字串，同时又因为是样板字面值，所以回传到正确的地方，组合起来再一起赋值到listString的变数上。

这就是巢状的样板字面值的应用，没有问题的话就可以继续往下篇文章学习噜! 汪汪~