iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 3
4
Modern Web

透過 ESLint 練習 JavaScript ES6系列 第 3

Day03【ES6 小筆記】JS 組字串好方便!一目瞭然最清楚(模板字串符 template literal)

ES6模板字串符、javascript、組字串
模板字串符(template literal)是 ES6 中新增的一個相當方便實用的功能,取代以往在 JS 中用 " "' '+ 輸出字串與變數的功能,使用更簡易的方式達到一樣的效果,我們先來看 airbnb 中關於字串的撰寫建議:

ESLint airbnb 規則

  • 6-1.字串請使用單引號 ''
  • 6.2 如果字串超過 100 個字元,請使用字串連接符號換行。
  • 6.3 請注意,letconst 的作用域都只在區塊內
  • 6.4 當以程式方式建構字串時,請使用模板字串而不是字串連接

而他的語法就是使用反引號 ` ` 包起來,變數使用 ${ } 包起來即可,這樣就可以很輕易的做到以下:

  1. 輸出多行文字(字串需要換行)
  2. 字串中插入變數
  3. 字串中使用方法、函式

ES6 模板字串符範例

話不多說,我們來看一些範例吧~
假如我們需要使用 JS 動態新增以下包含 HTML 的字串,使用變數帶入飲料名稱及金額:

<ul class="menu">
  <li>
    <h3>
      珍珠奶茶
    </h3>
    <p>60元</p>
  </li>
</ul>

以前的作法就會是:

let price = 50;
let name = '珍珠奶茶';
str ='<ul class="menu"><li><h3>' + name + '</h3><p>' + price + '元</p></li></ul>'

需要使用 ' ' 把 HTML 包起來,還要使用+把變數加進去,而且需要縮成一行才能正常運行,當在多行、多層級的 HTML 樣板時,就會看到相當的眼花,難以閱讀及維護QQ

而改為 ES6 的作法就會是:

let price = 50;
let name = '珍珠奶茶';
str =`
<ul class="menu">
  <li>
    <h3>
      ${name}
    </h3>
    <p>${price}元</p>
  </li>
</ul>
`

相當的一目瞭然!只需要一組反引號`就可以把所有 HTML 包起來,並且使用${ } 輕易的插入變數,換行也不會有問題,是不是非常的方便又簡單呢!

我們也可以在字串內進行運算,假如我們飲料要打9折:

let price = 50;
let name = '珍珠奶茶';
str =`
<ul class="menu">
  <li>
    <h3>
      ${name}
    </h3>
    <p>${price * 0.9}元</p>
  </li>
</ul>
`

大概就是這樣~是不是超方便的呀!以後不要再用 '我' + year + '歲'這種傻傻的方法組字串啦!快點使用`我${year}歲` 這種前衛的新方法ㄅ!


上一篇
Day02【ES6 小筆記】變數宣告 - let、const 哪裡好?跟 var 說掰掰
下一篇
Day04【ES6 小筆記】箭頭函式 - 基礎使用範例(Arrow function )
系列文
透過 ESLint 練習 JavaScript ES630
1
紅茶小公主
iT邦新手 5 級 ‧ 2019-09-04 16:35:10

好棒哦!!!超級實用的喇/images/emoticon/emoticon32.gif

江江好 iT邦新手 5 級 ‧ 2019-10-21 22:01:20 檢舉

超級實用!

0
Chita
iT邦新手 5 級 ‧ 2019-09-04 17:08:50

實用文 {推}

江江好 iT邦新手 5 級 ‧ 2019-10-21 22:01:28 檢舉

謝拉~

0
CynthiaChuang
iT邦新手 5 級 ‧ 2019-09-04 17:41:06

這個好方便XD

江江好 iT邦新手 5 級 ‧ 2019-10-21 22:01:38 檢舉

真ㄉ有夠方便XDD

我要留言

立即登入留言