关于JavaScript标记模板字面量

今天学习的一个知识点,在讲标记模板字面量前需要先了解一下模板字面量(字符串模板)、字符串插值

模板字面量


ECMAScript 6 新增了使用模板字面量定义字符串的能力。与使用单引号或双引号不同,模板字面量保留换行字符,可以跨行定义字符串:例如

 const info = "first line \n second line"
 const infos = `first line 
        second line`
console.log(info)
console.log(infos)

结果:

 

字符串插值

ES6 增加的模板字面值支持字符串插值,就是可以在字符串中使用 JavaScript 表达式。如下:

let value = 5; 
let exponent = 'second'; 
// 以前,字符串插值是这样实现的:
let interpolatedString = 
 value + ' to the ' + exponent + ' power is ' + (value * value); 
// 现在,可以用模板字面量这样实现:
let interpolatedTemplateLiteral = 
 `${ value } to the ${ exponent } power is ${ value * value }`; 
console.log(interpolatedString); // 5 to the second power is 25 
console.log(interpolatedTemplateLiteral); // 5 to the second power is 25 

标记模板字面量

        当在模板字面值前放置值为函数实例的表达式,也就是说在函数表达式中传入我们的模板字符函数会怎样解析呢?

const a = 6;
const b = 9;
    function simpleTag(a, b, c, d,e) {
        console.log(a);
        console.log(b);
        console.log(c);
        console.log(d);
        console.log(e)
        return 'foobar';
      }
 let untaggedResult = `${ a } + ${ b } = ${ a + b }`;
 let taggedResult = simpleTag `${ a } + ${ b } = ${ a + b }`;
    //object Array ["", " + ", " = ", ""] 
    // 6 
    // 9 
    // 15 
  //undefined
console.log(untaggedResult);  // "6 + 9 = 15" 
console.log(taggedResult); // "foobar" 

在我们使用模板字面量时,第一个传入的参数是一个包含字符串的数组,剩余的参数按照我们的表达式的值一次传入。简而言之就是,传入的第一个参数所输出的数组就是把表达式进行一个成分的拆解,之后传入对应插值的值。

所以`${ a } + ${ b } = ${ a + b }`拆解完就是: ["", " + ", " = ", ""] ,6,9,15。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值