[Day21] jsES6語法-字串模板 Template String

第 12 屆 iThome 鐵人賽

DAY 21

Modern Web

少年學Vue，如隙中窺月系列第 21 篇

12th鐵人賽

Leo

2020-10-05 22:35:12

723 瀏覽

分享至

如果我們要我們今天要再字串裡面加入值，就會需要使用到+號。常常我們如果要想要使用 innerHTML 來渲染變數，就會在變數裡面存放一大串的 html 結構，並且用+號將數值連起來，如果為了排版，我們還必須加上\ 來換行，這樣其實相當麻煩。

let dataArr = ['Peter','Merry','Leo'];
let text = '我叫做'+dataArr[0];
console.log(text);
let list = '<ul>\
<li>'+dataArr[0]+'</li>\
<li>'+dataArr[1]+'</li>\
<li>'+dataArr[2]+'</li>\
<ul>';

如果我們ES6 新的模板語法，就可以省去這些麻煩。我們可以直接使用模板語法，並且將想要打的標籤結構還有值輸入進''(是鍵盤1旁邊的符號，不是這個，因為如果使用它，it邦內建是反紅色的語法，所以打不出來)內，記得如果是值的呈現要加上${}，才可以正確顯示出值來。

<body>
    <div id="content"></div> 
</body>

let dataArr = ['Peter','Merry','Leo'];
let text = `我叫做${dataArr[0]}`;
let list = `
		<ul>
       <li>${dataArr[0]}</li>
       <li>${dataArr[1]}</li>
       <li>${dataArr[2]}</li>
    <ul>
`;
document.getElementById('content').innerHTML=list;