Vue學習筆記之Vue的模板字符串

 

0x00 模板字符串

傳統的JavaScript語言，輸出模板一般是這樣的寫的。

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

上面這種寫法至關繁瑣不方便，ES6 引入了模板字符串解決這個問題。

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

模板字符串（template string）是加強版的字符串，用反引號（`）標識。它能夠看成普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量

// 普通字符串
`In JavaScript '\n' is a line-feed.` // 多行字符串
`In JavaScript this is not legal.` console.log(`string text line 1 string text line 2`); // 字符串中嵌入變量
let name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?`

上面代碼中的模板字符串，都是用反引號表示。若是在模板字符串中須要使用反引號，則前面要用反斜槓轉義。

let greeting = `\`Yo\` World!`;

輸入結果：`Yo` World!

若是使用模板字符串表示多行字符串，全部的空格和縮進都會被保留在輸出之中。

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