如需转载请注明来源,喜欢的朋友们点个赞,蟹蟹~~~
如有错误,请批评指正!
关键词:``,${}
字符串模板:
在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是一个数组,存的是字符串里面可以处理非变量的内容,而后面的参数列表一次是你的每一个变量。
应用:
- 过滤HTML字符串,防止用户恶意输入。
- 多语言的转换。