文享日志

模板字符串相关

JavaScript

发表于2017年12月14日12:07:30

0条评论 144次阅读

        模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

实例如下:

$('#result').append(`
  There are ${basket.count} items
   in your basket, ${basket.onSale}
  are on sale!
`);

 ``内部可以放任意的变量(必须先定义)或者JavaScript的表达式,调用函数。


模板字符串多级嵌套实例:

const tmpl = addrs => `
  
  ${addrs.map(addr => `
    ${addr.first}
    ${addr.last}
  `).join('')}
  
`; 这里map函数返回一个数组,数组中有两项,每一项都是一个编译后的字符串,最后用join函数,将数组转化为一整个字符串。
调用: const data = [ { first: '', last: 'Bond' }, { first: 'Lars', last: '' }, ]; console.log(tmpl(data));


标签模板实例:

let total = 30;
let msg = passthru`The total is ${total}(${total*1.05} with tax)`;

function passthru(literals) {
  let result = '';
  let i = 0;

  while (i < literals.length) {
    result += literals[i++];
    if (i < arguments.length) {
      result += arguments[i];
    }
  }

  return result;
}

msg    // "The total is 30 (31.5 with tax)"

可以看到这是一种特殊的函数调用方式。标签为函数名称,模板字符串为参数。参数类型如function([],value1,value2,value3...);[]中由不含JavaScript引用部分的部分组成,valueX中是JavaScript的引用部分。另外这里还要注意的是(),用()包住的,会当valueX中的部分进行处理。


此外,模板处理函数的第一个参数(模板字符串数组),还有一个raw属性。

console.log`123`
// ["123", raw: Array[1]]

console.log接受的参数,实际上是一个数组。该数组有一个raw属性,保存的是转义后的原字符串。







👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广