初探ES6：字符串模板 && 标签模板

如需转载请注明来源，喜欢的朋友们点个赞，蟹蟹~~~

如有错误，请批评指正！

关键词：``，${}

字符串模板：

在ES6之前我们要在html或者console.log出一个带有变量的语句时我们是这样写的：

let age = 22
console.log( 'My age is ' + age )

这样写的坏处在于不直观，而且如果字符串中有符号："和'时候，往往需要转义：
ES6提供了字符串模板相当于加强版的字符串，我们可以这样写：

let age = 22;
console.log( `My age is ${ age }` )

在传统JS中字符串如果要换行的话需要'\n'，而字符串模板可以省略掉：

document.body.innerHTML = `My age 
     is ${age}

示例点击

所以，字符串模板与以前相比而言，把字符串的''换成了``并且里面的变量不需要拼接，只需要用${}去定义里面的变量。

${}

${}里面可以是调用函数的返回值，或者你也可以做一些变量上的操作。

function sayAge (){
   let age = 22;
    return age;
}
console.log( `My age is ${  sayAge() }` )//My age is 22

//也可以做一些操作：
let a1 = 22;
let a2 = 1;
console.log( `My age is ${  a1+a2  )//My age is 23

标签模板：

标签模板是字符串模板的加强版：
标签模板是让字符串模板跟在函数名后面，该函数来处理字符串模板：

let age = 22;
   var tag = function(arr,arg){
     console.log(arr);
     console.log(arg) 
   }
   tag`my age is ${ age }`;

示例点击
从上可以看出，arr是一个数组，存的是字符串里面可以处理非变量的内容，而后面的参数列表一次是你的每一个变量。

应用：

1. 过滤HTML字符串，防止用户恶意输入。
2. 多语言的转换。