iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 30
0
自我挑戰組

「 Nice to meet you , JavaScript . 」- 學習日記 系列 第 30

初探JavaScript - ECMAScript 6 組字串寫法

在一般JavaScript中,若要使用innerHTML同時插入標籤、文字、圖片、連結,需要使用很多的 '字串'+ 變數名稱 相連結,不過如果同時要插入很多,使用這樣的方式太麻煩,而且容易少打或多打''+符號以至於增加bug產生的機率。

在ECMAScript 6中可以使用重音符包住整個要插入的innerHTML內容,遇到要帶入變數名稱的部分改以錢字號 $變數來取代,讓程式碼寫起來更簡易乾淨,且比較不會打錯。

<範例>
若是希望能讓網頁顯示出這樣的頁面結果,圖片跟標題的部分可以使用innerHTML動態的插入。
https://ithelp.ithome.com.tw/upload/images/20200930/201151061HSlU2n4JJ.png

之前JavaScript的組字串寫法:

    <ul class='list'>
    </ul>
    <script>
        const list = document.querySelector('.list');
        const imgurl = '1.jpg';
        const title = '我的水果家族';

        list.innerHTML = '<li><h2>' + title + '</h2><img src="' + imgurl + '" height="100px"></li>';
    </script>

ECMAScript 6的輕鬆組字串寫法:

    <ul class='list'>
    </ul>

    <script>
        const list = document.querySelector('.list');
        const imgurl = '1.jpg';
        const title = '我的水果家族';

        list.innerHTML =`<li><h2>${title}</h2><img src="${imgurl}" height='100px'></li>`;
    </script>

雖然新的寫法簡易很多,不過innerHTML若是要同時帶入多個標籤時,落落長的一大串,閱讀起來很困難,所以建議在輸入的時候,能使用斷行,將各個標籤分開打,會更清楚明瞭:

        list.innerHTML =
            `<li>
            <h2>${title}</h2>
            <img src="${imgurl}" height='100px'>
            </li>`;

資料參考來源:Hex School


上一篇
初探JavaScript - ECMAScript 6 - 用var、let和const的差別?
系列文
「 Nice to meet you , JavaScript . 」- 學習日記 30

尚未有邦友留言

立即登入留言