ES6新增的使用模板字面量笔记【2021.10.20】

一、模板字面量

ECMAScript 6新增了使用模板字面量定义字符串的能力。与使用单引号或双引号不同，模板字面量保留换行字符，可以跨行定义字符串，也就是可以实现多行字符串，也可以向HTML插入经过安全转换后的字符串——HTML转义。

le string = 'first line\nsecond line';

let stringTwo= `first line

                          second line`;

上面个代码的结果是一样的

模板字面量在定义模板时特别有用，比如下面这个HTML模板：

let pageHTML = ` <div> 

                                 <a href=“#”>

                                     <span>Jake</span>

                                 </a>

                             </div>`;

要注意的是换行后的缩减也会输出到控制台，使用时要注意缩进。

二、字符字面量

\n	换行
\t	制表
\b	退格
\r	回车
\f	换页
\\	反斜杠（\）
\’	单引号

三、${}

1.使用${}完成字符串拼接

var a = 1;

console.log('一共有'+a+'个变量！')
那么现在你只要console.log( `一共有${a}个变量!` )
在实际开发中我们一般在ajax请求中用不变的html${变量}html标签代替以前传统复杂的单引号双引号与+的拼接，简介明了，非常好用。
2.想要使用${}获取变量 要在 ` `(反引号)中使用。

let str = "xxx"
 
console.log(`${str}`) // xxx

3.$

function $(Nid){
 return document.getElementById(Nid);
}
以后在网页就不用每次使用document.getElementById("ID名")来获取元素，只用$('ID名')即可，非常快捷了。