ES6模板字符串

看了阮老師的ES6入門再加上自己的一些理解整理出的學習筆記

介紹：

樣子: `` 反引號，tab上面的那個鍵，同該符號包裹的字符串能夠帶來的功能如下：

• 可以包涵換行
  • 在反引號以內，可以有多個換行，都能夠在使用的時候被識別
• 可以嵌入變量
  • 使用美元符號和大括號包裹變量${對象名.屬性名}
• 可以原生輸出 
  • 原生輸出包含轉義字符串的內容String.raw模板字符串

例子：

• 傳統的JavaScript語言，輸出模板通常是這樣寫的，字符串拼接很讓人頭疼，也很容易出錯。

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

• ES6引入了模板字符串解決這個問題

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

• 如果使用模板字符串表示多行字符串，所有的空格和縮進都會被保留在輸出之中。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

• 模板字符串中嵌入變量，需要將變量名寫在${}之中。(注：不聲明會報錯)

let name = 'jim',
     age = 18,
     gender = 'male';
console.log(`name : ${name} , age : ${age} , gender : ${gender}`)

• 大括號內部可以放入任意的JavaScript表達式，可以進行運算，以及引用對象屬性，而且還能調用函數

let x = 1,
    y = 2;
console.log(`${x} + ${y * 2} = ${x + y * 2}`)//  "1 + 4 = 5"


let obj = {x: 1, y: 2};
console.log(`${obj.x + obj.y}`)//  3


function fn() {
    return "Hello World";
        }
console.log(`foo ${fn()} bar`)// foo Hello World bar

• 模板字符串還可以嵌套

const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;

 

感謝觀看！

最后安利阮老師的ES入門 ： http://es6.ruanyifeng.com/#docs/string