12.js-模板字符串

let username = '岳飞';
let age = 36 ;
let story ='打败金兀术';

let str = '姓名:'+username+'年龄：'+age+'事迹：'+story;

console.log(str);
/* 
模板字符串
使用 反引号 `` 作为字符串标识
在模板字符串使用变量，使用方式是 ${变量名}
*/
let str1 =`姓名:${username},年龄:${age},事迹:${story}`;
console.log(str1);

/* 
模板字符串 支持换行
 */

let str2 =`
    姓名:${username},
    年龄:${age},
    事迹:${story}
`;
console.log(str2);

let btn  = document.getElementById('btn');
let list = document.getElementById('list');

btn.onclick=function(){
    let html = '';
    for (let i = 0; i < 10; i++) {
      html+=`
        <li>
            <h1>${username}</h1>
            <p>${age}</p>
            <p>${story}</p>
        </li>
      `;
        
    }
    list.innerHTML = html;
}

/* 
模板字符串中可以运行表达式
*/
let str3 = `1+1=${1+1}`;
console.log(str3);

let str4 = `同是天涯沦落人，${3>4?'莫愁前路无知己':'从此萧郎是路人'}`;
console.log(str4);

/* 
模板字符串中可以运行函数
*/
function show(){
    return '莫愁前路无知己';
}
let str5 = `${show()},凭君传语报平安`;
console.log(str5);