ES6学习之路4----字符串模版

什么是字符串模板(`)

ES6引入了一种新型的字符串字面量语法，我们称之为模板字符串（template strings）。

特点：

除了使用反撇号字符 ` 代替普通字符串的引号 ’ 或 ” 外，它们看起来与普通字符串并无二致。
实例：

let str = `ES6引入了一种新型的字符串字面量语法`;
let str0 = 'ES6引入了一种新型的字符串字面量语法';
console.log(str == str0);//true

这么对比，看着字符串模板和字符串的没什么区别，那我们看看插值。

let newStr = 'ECMAScript';
let str = `ES6引入了一种新型的${ newStr }字符串字面量语法`;
let str0 = 'ES6引入了一种新型的'+ newStr +'字符串字面量语法';
console.log(str);//ES6引入了一种新型的ECMAScript字符串字面量语法
console.log(str0);//ES6引入了一种新型的ECMAScript字符串字面量语法

这么一看，是不是发现插值很简单，在也不用学ES5的时候进行字符串拼接，把我们从繁琐的字符串拼接中解放出来。

特性细节

1. 模板占位符中的代码可以是任意JavaScript表达式;
2. 如果模板占位符中的值不是字符串，可以按照常规将其转换为字符串;
3. 如果需要在模板字符串中书写反撇号，必须使用反斜杠将其转义：\``等价于"“;
4. 如果要在模板字符串中引入字符$和{，需要用反斜杠转义每一个字符：\$和\{。

特性1实例：

let arr= [1,2,3,4];
let str = `ES6引入了一种新型的${ arr.join('')}字符串字面量语法`;
console.log(str);//ES6引入了一种新型的1234字符串字面量语法

特性2实例：

let arr= [1,2,3,4];
let str = `ES6引入了一种新型的${ arr}字符串字面量语法`;
console.log(str);//ES6引入了一种新型的1,2,3,4字符串字面量语法

特性3实例：

let arr= [1,2,3,4];
let str = `\`ES6\`引入了一种新型的${ arr}字符串字面量语法`;
console.log(str);//`ES6`引入了一种新型的1,2,3,4字符串字面量语法

特性4实例：

let arr= [1,2,3,4];
let str = `\{ES6\}引入了一种\$新型\$的${ arr}字符串字面量语法`;
console.log(str);//{ES6}引入了一种$新型$的1,2,3,4字符串字面量语法

其他

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表