ES6中的模板字符串

最新推荐文章于 2025-05-24 12:00:04 发布

原创最新推荐文章于 2025-05-24 12:00:04 发布 · 604 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#模板字符串 #反引号 #ES6

React 专栏收录该内容

4 篇文章

订阅专栏

ES6为了方便字符串格式化，引入了模板字符串，使用反引号标识，并允许在字符串中嵌入变量和表达式，简化了原先jQuery等场景下的字符串拼接操作。

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

1. 模板字符串

++ jQuery中的字符串拼接用起来不是很方便，因此ES6引入模板字符串，大大方便了字符格式的表示；

$("#result").append("<table>");
for(val in value){
    $("#result").append("<tr>");
    for(var i = 0;i < val.length;i++){
        $("#result").append("<td>"+"this is"+val[i]+"</td>");
    }
    $("#result").append("</tr>");
}
$("#result").append("</table>");

++ 在 ES6 中引入了模板字符串，在一定程度上，削弱了上述代码的繁琐不便。模板字符串是增强版的字符串，用反引号 ` 标识。它可以当作普通字符串、定义多行字符串，甚至我们还可以在字符串里嵌入变量。
++ ${…}在这里面能够嵌套JavaScript代码，变量，以及函数嵌套；


console.log(`Hello world!`);
console.log(`hello 
    React!
    Hello,
    World;
`);

let a = 1;
console.log(`a = ${a}`);

console.log(`a = ${++a}`);

function f(){
    return `i'm function`;
}
console.log(`${f()}`);

console.log(`\`\`\`\`\`\`\`\``);