iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Modern Web

JavaScript 基礎修練系列 第 4

[Day04] JavaScript - ES6 模板字符串 (Template Literal)

ES6 除了新增了上篇的let & const之外,也提供了新的模版字符串(Template Literal)用法:

  • 範例一:

    • 過去寫法(ES5): 過去我們習慣使用 "+" 來做字串的相加。

      
      let example_es5 = '<div>\n'+
      '<div class="container">\n'+
      '<img src="example_pic.jpg"\n'+
      '</div>\n'+
      '</div>'
      
    • 現在寫法(ES6): 模板字串支援換行符號,就不需使用\n表示換行。

          let example_es6 = `
          <div>
              <div class='container'>
                  <img src="example_pic.jpg>
              </div>
          </div>`
      
  • 範例二

    • 過去寫法(ES5): 過去我們也習慣使用 "+" 來做變數的相加。

      let a = 'Lisa';
      let b = '20';
      let c = 'My name is ' + a + ', I am ' + b + ' years old.';
      
    • 現在寫法(ES6): 在模板字串下,可以透過${ }的方式放入變數。

      let a = 'Lisa';
      let b = '20';
      let c = `My name is ${a}, I am ${b} years old.`;
      
      

上一篇
[Day03] JavaScript - 變數宣告 var / let / const
下一篇
[Day05] JavaScript - 資料型別
系列文
JavaScript 基礎修練30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言