JS 樣板字面值

樣板字面值

說明ES6語法樣板字面值及跳脫字元

樣板字面值（Template literals）是允許嵌入運算式的字串字面值（string literals）。你可以透過樣板字面值來使用多行字串及字串內插（string interpolation）功能。他們在 ES2015 規範的先行版本中被稱為「樣板字串（template strings）」。-MDN:樣板字面值

語法

基本語法如下:

// 主要以反引號``代替雙單引號""、'' 
`string text`

`string text line 1
 string text line 2`
// 反引號內由錢($)字元及花括號所構成（${expression}）的佔位符（placeholders） 

// 這個在佔位符中的運算式以及在它們之間的文字會被傳入一個函式。
`string text ${expression} string text`

tag `string text ${expression} string text`

以白話點去說的話，我們以舉例去作說明，一般我們撰寫多行字串為

const people = [
  {
    name: 'mike',
    age: 2
  },
  {
    name: 'amy',
    age: 23
  },
  {
    name: 'jack',
    age: 34
  }
]

let originString = '我叫做 ' + people[0].name; // 過去的寫法
let orginAge = '<ul>\
  <li>我叫做 ' + people[0].name + '</li>\
  <li>我叫做 ' + people[1].name + '</li>\
  <li>我叫做 ' + people[2].name + '</li>\
</ul>'; // 多行的寫法 

假如以樣板字面值寫法撰寫的話，

let string = `我叫做 ${people[0].name}` 
// "我叫做 mike"

let ul = `
  <ul>
    <li>我叫做 ${people[0].name}</li>
    <li>我叫做 ${people[1].name}</li>
    <li>我叫做 ${people[2].name}</li>
  </ul>
`
// 多行寫法寫可以，不須再撰寫+、\之類的符號

跳脫字元

假如需要插入特殊字元，仍可以使用\反斜線作插入:

console.log(`\$$`);
//印出 $$
// 另外跳脫字元不佔字符數
console.log(`\$$`.length)
// 印出2(即2個$)

參考資料:

• MDN-樣板字面值
• 鐵人賽：JavaScript Template String 樣板字串