ES6模板字符串详解:多行文本、变量与表达式插入

作者:函数茶馆时间:2026-10-22 09:05:27浏览:194

本文详解ES6引入的模板字符串,介绍其使用反引号声明的基本语法。重点解析模板字符串的三大优势:支持多行文本、通过${}插入变量及执行JS表达式,并通过ES5与ES6代码对比展示其在HTML拼接和字符串格式化中的便捷性。

模板字符串概述

模板字符串(template strings)

ES6 引入了一种名为模板字符串的新型字符串字面量语法。从定义上看,模板字符串是一种允许在字符串文本中嵌入表达式的字符串字面量。通俗来说,它赋予了字符串处理变量的能力。

ES6 提供了模板字符串功能,其语法特征是使用反引号(`)。模板字符串具备以下三个主要优点:

  • 支持多行文本
  • 字符串中插入变量
  • 字符串中插入表达式

基本语法与多行文本处理

基本语法

模板字符串的声明方式与 ES5 中的字符串声明一致。


// ES5
var name = 'xixi';
console.log(name);// xixi

// ES6
let name4ES6 = `一步`;
console.log(name4ES6);// 一步

多行文本

在 jQuery 流行的时期,我们常通过拼接 HTML 片段然后替换节点来操作 DOM。以下是一段 ES5 代码示例,供读者体会当时的写法:


var str = '<html>'
+ '<div>啦拉拉</div>'
+ '<div>xixixi</div>'
+ '</html>';
console.log(str);// <html><div>啦拉拉</div><div>xixixi</div></html>

ES6 支持多行文本,使得上述代码的实现变得更为简便。


let str4ES6 = `<html>
 <div>啦拉拉</div>
 <div>xixixix</div>
</html>`;

console.log(str4ES6);

变量与表达式插入

可以插入变量或表达式


// ES5
var name = 'xixi';
var age = 27;
var info = 'my name is ' + name + ' , age is ' + age + '.';
console.log(info);// my name is xixi , age is 27.

使用 ES6 的模板字符串实现这一功能变得轻松许多。关键语法是 ${},其中可以插入任何合法的 JavaScript 表达式。


let name = 'xixi';
let age = 27;

let info = `my name is ${name}, my age is ${age}. just a test ${1 + 10}!`;
console.log(info);// my name is xixi, my age is 27. just a test 11!

总结

总结

ES6 模板字符串的使用既简单又实用。

以上为本文的全部内容,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对本站的支持。

作者最新文章