ES6 深入理解 ${ } 模版

写在开头

本文将带你深入理解ES6中 ${ } 模版

后续的文章都会与前端有关，欢迎各位同路途的人一起交流学习，3月份又是努力的开头，加油！

推荐阅读：来自 菜鸟 的 前端实习面经 大厂 春招实习生

ES 6专栏 -> 传送门

如果想更多了解ES6，请参考之前写过的一些文章：

ES6 一文弄懂 var let const 三剑客区别 吊打面试题

ES6 面试题：你能说出浏览器上到此支持多少个中文字吗？

ES6 面试题：你可以写出一百个 div 吗？一万个呢？

ES6 深入理解 includes

ES6 深入理解 startsWith和endsWith

引入ES6中的字符串

在ES6中，不像过去了，我们有了专门的对于字符串符号，如下：

`abc`

变成了 `` 数字键1左边那个（可能还不知道位置）【滑稽】

玩转模板

给出如下代码，看看会是怎样的情况呢？

let c = `5`
let a = `sajhdkahdkjahshj${c+c}`;
console.log(a);

好，看来你已经明白了模板是怎样用的呢，那我们就可以深入一点了【滑稽】

那再看看如下代码，又会是怎样的情况呢？

let json = {
	'div':`<div></div>`,
	'span':`<span></span>`
}
document.write(`${json.div+json.span+json.div}`)

检查Elements，发现，多了几个标签

将字符串和模板一起使用试试？

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

显然，就是一串表白的字符串了

或许，还是觉得一般般是吧，那来点有 x 格的代码

function show(){
	console.log(`这能不能打印出来呢？`);
};
show``;

？？？（黑人问号）
我们调用函数不是应该是 show() 这样吗，怎么还可以这操作？？？

诶，还真可以，看控制台！

原来是ES6中``的出现会代替()，涨知识了么

总结

es6的字符串 变成了 `` 1左边那个位置
${} 模版

学如逆水行舟，不进则退