ES6 模板字符串

1.模板字符串

const person = "Tom";
const age = 13;
//传统用法
const sentence1 = person + " is " + age + " 是个学生";

//ES6用法
const sentence2 = `${person} is ${age} 是个学生`;
console.log(sentence1)
console.log(sentence2)

2.拼接html字符串

// 传统用法
const html1 = "<ul>" +
    "<li>1</li>" +
    "<li>2</li>"
    + "</ul>"
console.log(html1)

// ES6用法
const html2 = `<ul>
<li>1</li>
<li>2</li>
</ul>`
console.log(html2)

3.可插入表达式

//传统用法
let a = 5;
let b = 6;
console.log("Summation is " + (a + b) + " Multiplication is " + (2 * a * b));

// ES6用法
console.log(`Summation is ${a + b} Multiplication is ${2 * a * b}`);

4.模板字符串嵌套

const Tom = {
    name:"Tom",
    date:2020-04-02,
    todos:[
        {name:"Morning Run",completed:false},
        {name:"sweep",completed:true},
        {name:"shopping",completed:true}
    ]
}
const template = `
<ul>
${Tom.todos.map(todo => 
    `<li>
    ${todo.name}${todo.completed?"√":"×"}
    </li>`
    )}
</ul>
`
console.log(template)