ES6之模板字符串

现在写h5项目 , 对常用的ES6语法进行梳理一下 , 便于自己理解 , 也防止后期忘记 . 这边对模板字符串进行讲解.

1.简介
JavaScript常用的字符串拼接方式如下:

let name = "水滴";
console.log("我最喜欢三体中" + name + "这个科幻概念");

这种传统做法需要使用大量的""(双引号) 和 + (加号) 来拼接才能得到我们想要的字符串 , 这样写起来不是很方便.

ES6提供了模板字符串语法 , 使用 `(反引号) 标识 , 用${}将变量括起来 . 上面的例子用模板字符串可以这样写:

let name = "水滴";
console.log(`我最喜欢三体中${name}这个科幻概念`);

这种写法比较简洁 , 而且不需要大量使用""和+来拼接字符串.

2.使用方式

• 模板字符串可以引入变量 , 不使用变量也是可以的 , 如下所示:

`黑暗森林`
let name = `执剑者`;

• 我们还可以先定义变量 , 然后在模板字符串中嵌入变量:

let name = "lyx";
console.log(`${name}是个程序员!`);

• 显然，由于反引号是模板字符串的标识，如果我们需要在字符串中使用反引号，就需要对其进行转义，如下所示：

`No matter \` what you do , I trust you .`

• 注意：如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保存在输出中！！

console.log(`No matter \` what you do , 
		I trust you.`)

输出结果如下：

• 在${}中的大括号里可以放入任意的JavaScript表达式，还可以进行运算，以及引用对象属性 .

let a = 3;
let b = 5;
console.log(`sum=${a + b}`);

输出结果如下：

• 模板字符串还可以调用函数：

function test(){
	retun "青铜时代号";
}
console.log(`逃出太阳系的人类舰队有哪几艘?
						${test()}`);

输出结果如下：

• 另外， 如果函数结果不是字符串，那么，将按照一般的规则转化为字符串：

function test(){
	retun 666;
}
console.log(`不错哦,
						${test()}`);

• 再有，如果在${}中的变量没有命名时，那么会报错 .