ES6 模板字符串

luo166888

于 2020-04-02 14:23:44 发布

阅读量134

点赞数

分类专栏： ES6 文章标签： javascript js es6/es7

本文链接：https://blog.youkuaiyun.com/luo166888/article/details/105269023

版权

ES6 专栏收录该内容

13 篇文章

订阅专栏

本文深入探讨ES6模板字符串的使用，包括基本语法、HTML字符串拼接、表达式插入及模板字符串嵌套等高级应用，是前端开发者不可错过的实践指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)