您好,欢迎来到知库网。
搜索
您的当前位置:首页初探ES6:字符串模板 && 标签模板

初探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 }`;

应用:

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

Copyright © 2019- zicool.com 版权所有 湘ICP备2023022495号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务