用ES6中的模板字符串实现在字符串中添加变量和字符串换行

什么是模板字符串

它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

例如：

var str1 = '你好吗' +'李华';var str2 = `你好吗
李华`;console.log(str1);
console.log(str2);

输出结果：

注意：上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

$('#list').html(`
<ul><li>first</li><li>second</li>
</ul>
`);

上面代码中，所有模板字符串的空格和换行，都是被保留的，比如

标签前面会有一个换行。如果你不想要这个换行，可以使用trim方法消除它。

$('#list').html(`
<ul><li>first</li><li>second</li>
</ul>
`.trim());

模板字符串中嵌入变量，需要将变量名写在${}之中。

var uname = '李华';console.log(`你好 ${uname} `);

输出结果：

大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。

var x = 1;
var y = 2;
console.log(`${x}+${y}=${x+y}`);var obj = {uname:'李华',age:18
}console.log(`${obj.uname}的年龄是${obj.age}`);

输出结果：

模板字符串之中还能调用函数。

function fn() {return "Hello World";
}`foo ${fn()} bar`
// foo Hello World bar

如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。
如果模板字符串中的变量没有声明，将报错。

// 变量place没有声明
var msg = `Hello, ${place}`;
// 报错

由于模板字符串的大括号内部，就是执行JavaScript代码，因此如果大括号内部是一个字符串，将会原样输出。

`Hello ${'World'}`
// "Hello World"

用ES6中的模板字符串实现在字符串中添加变量和字符串换行相关推荐

python 只取年月日字符串_Python基础：数据类型和变量amp;字符串和编码
Python基础:1.数据类型和变量数据类型计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.视频.网 ...
python定义变量字符串_Python学习笔记二（变量和字符串）
2017年年终确定的从2018年开始学习一门新的语言.随着机器学习人工智能的日渐深入,是时候有必要掌握以下Python了.博客今天更新第二篇学习记录,关于Python的变量和变量中字符串的使用,所有学 ...
OpenCV中的模板匹配
OpenCV中的模板匹配在该demo中选取了两张猴哥的照片,一张用来获得模板,另外一张用模板去匹配. 下图为选取模板的图像: 以下为选取的匹配模板: 根据该模板在下面的图中找到猴哥的脸: 该demo ...
计算机中复合模板在哪,冷冲模CAD系统中装配模板的设计与复合算法研究-计算机软件专业论文.docx...
冷冲模CAD系统中装配模板冷冲模CAD系统中装配模板的设计与复合算法研究摘要文章首先综述了国内外模具CAD/CAM技术的发展概况.指出了模具设计过程的规范化.设计方法的算法化及数据结构的合理 ...
python字符串中添加字符_Python字符串中添加、插入特定字符
分析我们将添加.插入.删除定义为: 添加: 在字符串的后面或者前面添加字符或者字符串插入: 在字符串之间插入特定字符在Python中,字符串是不可变的.所以无法直接删除.插入字符串之间的特定字符 ...
开发中常用的linux语句,MySQL开发中常用的查询语句总结
1.查询数值型数据: SELECT * FROM tb_name WHERE sum > 100; 查询谓词:>,=,,!=,!>,!,=< 2.查询字符串 SELECT * ...
[译]JavaScript:ES6中的模板字符串简介
原文:http://tc39wiki.calculist.org/es6/template-strings/ ES6中的模板字符串(template string)是一种能在字符串文本中内嵌表达式的字 ...
es6字符串添加html标签,JavaScript_详解JavaScript ES6中的模板字符串，在 ES6 中引入了一种新的字符 - phpStudy...
详解JavaScript ES6中的模板字符串在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是 ...
js模板字符串自定义类名_详解JavaScript ES6中的模板字符串
这篇文章主要介绍了详解JavaScript ES6中的模板字符串,JS的ES6版本带来诸多简洁化方面的重大改进,需要的朋友可以参考下在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用 ...

用ES6中的模板字符串实现在字符串中添加变量和字符串换行

什么是模板字符串

用ES6中的模板字符串实现在字符串中添加变量和字符串换行相关推荐

最新文章

热门文章