在以往我們在字串的組合上會比較冗長，如下:

const people = [
  {
    name: '小明',
    friends: 2
  },
  {
    name: '阿姨',
    friends: 999
  },
  {
    name: '杰倫',
    friends: 0
  }
]
let originString = '我叫做 ' + people[0].name;
let originUl = '<ul>\
  <li>我叫做 ' + people[0].name + '</li>\
  <li>我叫做 ' + people[1].name + '</li>\
  <li>我叫做 ' + people[2].name + '</li>\
</ul>';

在 ES6 的字串組合上方便許多，像是上面的 originString 把它改寫一下:

let newString = `我叫做 ${ people[0].name }`

輸出結果會是一樣的，主要是 、 反引號，以及 $ 搭配 {} 的使用方式，{} 內放置變數即可

在搭配標籤的組合上也可以改寫成:

let newUl = `
    <ul>
        <li>我叫做 ${people[0].name} </li>
        <li>我叫做 ${people[1].name} </li>
        <li>我叫做 ${people[2].name} </li>
    </ul>
`

而 {} 內不只可以放置變數，也可以放置 JS 語法，我們在把上面的標籤組合改寫一下:

newUl = `
    <ul>
        ${people.map((person) => { return `<li>我叫做 ${person.name}</li>` })}
    </ul>
`

我們在 ul 底下寫了一個 .map() 的方法，用迴圈的方式 return 每個 li

這裡補充一下 .map() 這個方法以及 .forEach() 有什麼差別，首先我們先宣告一個陣列:

let fruits = ['apple', 'banana', 'strawberry'];

接著我們用 各別使用 .map() 和 .forEach() :

fruits.map(function(item){
    console.log('map', item);
});
// map apple
// map banana
// map strawberry
// [undefined, undefined, undefined]

fruits.forEach(function(item){
    console.log('for', item);
});
// for apple
// for banana
// for strawberry
// undefined

一樣都可以用迴圈的型式讀取到每筆資料，但最後的 undefined 的資料狀態不一樣，.map() 是陣列型式
那兩者的區別在哪呢?
.map() 的使用上可以類似加工的概念再 return 回去，而 .forEach() 卻不能
我們在針對 .map() 的使用進一步的寫下去:

var newFruits = fruits.map(function(item){
    return 'new ' + item;
});

console.log(newFruits);
// ['new apple', 'nwe banana', 'new strawberry']

就會發現它可以新宣告的變數會變成陣列，並把加工 return 回來的值塞進去
如果用 .forEach() 是無法做到這樣的
如果要在 .forEach() 做到一樣的效果，要再新宣告一個變數為空陣列:

let copy = [];

fruits.forEach(function(item){
    copy.push('new ' + item);
});

console.log(copy);
// ['new apple', 'nwe banana', 'new strawberry']

上面就是 .map() 和 .forEach() 的差別