# [ES6] $樣板字串

###### tags: `ES6`

在過去我們撰寫字串的時候都是使用 " ，這種寫法會讓程式碼變得很攏長且難以閱讀，再多行的時候也必須插入反斜線來換行。

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 借鏡了許多開發工具 (這種寫法真的很像 CoffeeScript，不過在這語言是使用 " + #{} 插入變數)，可以使用 反引號 來插入一段字串，並且可以使用 ${} 來加入變數或函式，如以下範例可以直接輸入字串，並且使用 ${people[0].name} 來插入變數，省去一堆 +來做串接。

let string = `我叫做 ${people[0].name}` // ES6 String Template
// "我叫做小明"

再多行的時候也是直接撰寫即可，不需要額外的符號。

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


// "
//   <ul>
//     <li>我叫做 小明</li>
//     <li>我叫做 阿姨</li>
//     <li>我叫做 杰倫</li>
//   </ul>
// "

### 在模版字符串中嵌入變數

另外，在模版字符串中，我們還可以透過 ${...} 這樣的方式，嵌入變量或任何的表達式：

let myName = "PJCHENder",
    numA = 4,
    numB = 7;

let content = `Hello, my name is ${myName}, my lucky number is ${2*(numA + numB)}`;

console.log(content);  // "Hello, my name is PJCHENder, my lucky number is 22"