iT邦幫忙

0

[ES6-重點紀錄] 樣板文字串 Template literals

  • 分享至 

  • xImage
  •  

ES6 導入了樣板文字串 Template literals 是為了增強字串的表示方式,還能直接填入變數與表達式,可以更方便地輸出想要的文字組合了。

使用特性

  • 樣板文字串需使用反引號標識‵ ‵包起來表示
  • 可以寫入多行的字串
// 可寫入多行的字串
$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

// 等同於
$('#list').html(
    '<ul>\n' +
      '<li>first</li>\n' +
      '<li>second</li>\n' +
    '</ul>'
);
  • 可以嵌入變數或任何的表達式,需要使用${ }來嵌入
  • 注意: 換行與空白字元都會被保留,可使用字串的trim()方法來消除
// 可以嵌入變數
let name = "Bob", time = "today";
console.log(`Hello ${name}, how are you ${time}?`);
// 'Hello Bob, how are you today?'


// 可以嵌入任何表達式,例如函數、加減運算
let today = new Date();
let text = `The time and date is ${today.toLocaleString()}`;

console.log(text);
// The time and date is 2018/1/1 下午6:10:10

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言