前言

轉生第二十九日，這一篇將會介紹 ES6 的 Template String。

Template String

Template String 的中文名稱是樣板字串，也是我個人非常喜好的一個 ES6 新功能，在早期我們開發撰寫 JS 時，都必須使用單引號或是雙引號並搭配一個 + 號來組合字串，就像這樣 ↓

當如果我們今天要組合的字串特別長的時候就會超級麻煩，就會像這樣：

var a = 'Ray';
var hello = 'Hello' + a + '，你好';

你會發現引號越來越多，加號運算子也會越來越多，當越寫越多的時候就會導致閱讀上不方便且有高度可能性會發生誤刪引號或加號的問題，並且當字串太長我們還必須再插入反斜線來做斷行。

那麼 ES6 的 Template String 就是為了解決組合字串的困擾而出現的功能，基本上會使用到的是兩個頓號(反引號) ``` 以及 ${}，${}` 中間則是插入變數，所以我們就可以這樣子改寫上面的範例：

var a = 'Ray';
var hello = `Hello ${a}，你好`;

你會發現好寫非常多，而 Template String 的 ${} 你會發現與 Ruby 有點神似，那 ES6 就是參考這些其他語言好的地方而加入的，使用 Template String 的好處有以下幾個重點

• 少一推引號
• 不在需要使用加號運算子組合字串
• 斷行也不用在使用反斜線
• Template String 裡面也可以寫入判斷式

接下來讓我們看一下實際開發的案例比較會有深刻的感受，以下程式碼是我其中一個小練習的範例：

function updataList(data) {
    str = '';
    var len = data.length;
    for (var i = 0; i < len; i++) {
        str += '<li class=text-center ' + 123 + '>';
        str += '<span>' + data[i].status + '</span>';
        str += '<span><span>BMI</span> ' + data[i].bmi + '</span>';
        str += '<span><span>height</span> ' + data[i].weight + ' kg </span>';
        str += '<span><span>weight</span> ' + data[i].height + ' cm </span>';
        str += '<a href="#" data-index=' + i + ' />刪除</a>';
        str += '</li>';
    }
    bmiList.innerHTML = str;
}

後來我改用 ES6 的 Template String 改寫之後就變成這樣子：

function updataList(data) {
    str = '';
    var len = data.length;
    for (var i = 0; i < len; i++) {
        str += `
        <li class=text-center>
          <span>${data[i].status}</span>
          <span><span>BMI</span> ${data[i].bmi} </span>
          <span><span>height</span> ${data[i].weight} kg </span>
          <span><span>weight</span> ${data[i].height} cm </span>
          <a href="#" data-index="${i}"/>刪除</a>
        </li>
        `;
    }
    bmiList.innerHTML = str;
}

相信你實際透過這些案例你就知道使用 ES6 的 Template String 是一件多棒的事情。

結尾

下一篇的 RE：從零開始的學習 JS 生活-第三十日 轉生最後一日，將會介紹 new。

本文同步發表於：https://hsiangfeng.github.io/javascript/20191014/321662173/