首先,模板字符串和标签模板是两个东西。
标签模板不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。
但是,如果模板字符串中有变量,就不再是简单的调用了,而是要将模板字符串先处理成多个参数,再调用函数。(ES6标准入门-阮一峰 4.12标签模板)
 
由此引出此文,先上代码:

var a = 5;
var b = 10; tag`Hello ${ a + b } world ${ a * b }`;
//等同于
tag(['Hello ', ' world ', ''], 15, 50);
这里我产生了疑问,为什么数组第三个参数是空字符串,书中也未曾讲到,很是疑惑。
然后再看下一段代码:
 
var total = 30;
var msg = passthru`The total is ${total} (${total * 1.05} with tax)`;
...
//由此可以得出 上面的方法等同于
var msg = passthru(['The total is ', ' (', ' with tax'], 30, 31.5)
在这段代码中数组参数并没有产生空字符串,原因我也不知道,百度了一番,然后懂了。
 
模板字符串由变量和非变量组成,什么是变量,${}就是变量。模板标签函数调用的第一个参数是数组,是由模板字符串中那些非变量部分组成,包括空格。
 
那么不难理解,假设模板字符串中的变量为A,非变量为B,那么模板字符串的组成可能就是:

tpl1 = ABABA; -> ['', B, B, '']
tpl2 = BAB; -> [B, B]
tpl3 = ABAB -> ['', B, B]
...
可以解读到:模板字符串中变量必须是由非变量包含着的,如果变量在开始位置或者结束位置且没有非变量包含,那么该位置就是空字符串。

ES6模板字符串之标签模板的更多相关文章

  1. javascript模板字符串(标签函数)

    前面介绍了javascript的模板字符串的基本知识,今天深入学习一下标签函数 模板字符串概述 这里先简单说一下模板字符串的概念 1.模板字符串,从名字上可以得出其实返回的是字符串,普通使用其实就想引 ...

  2. VScode如何设置模板字符串html标签自动补全

    在学习Vue的过程中,很多时候都需要用到模板字符串,但是里面的html标签一个字符一个字符的去敲未免也太麻烦了吧,其实我们可以通过设置来实现在模板字符串中按Tab键快速补全html标签. 1.在VSC ...

  3. ES6 - 基础学习(4): 模板字符串和字符串新增方法

    模板字符串 模板字符串:我理解为将字符串格式化.模板化,将字符串加强处理,此处的模板有动词的意思. 字符串模板基本格式: `xxxxxx`(前后都用反引号[tab键上面按键]引起来).除了作为普通字符 ...

  4. ES6模板字符串【${}配合反单引号一起用】

    先看看JavaScript中两个字符串的效果,就很容易知道模板字符串是个啥东西,其实一点也不新鲜.高级编程中,例如java里面的string.format就是干这个事情,诸如此类. 1. 概念理解 A ...

  5. ES5与ES6常用语法教程之 ③模板字符串、判断字符串是否包含其它字符串

    这部分教程我们主要讲解以下几个常用语法 模板字符串 带标签的模板字符串 判断字符串中是否包含其他字符串 给函数设置默认值 模板字符串 老式的拼接字符串方法 let dessert = '

  6. WijmoJS 支持模板字符串常量

    WijmoJS 支持模板字符串常量 在V2019.0 Update2 的全新版本中,WijmoJS 支持了模板字符串常量. 模板字符串是ES2015 / ES6中引入的一个非常棒的JavaScript ...

  7. SE6 模板字符串详解

    SE6引入了模板字符串这样一个概念,让我们从无止尽的+连接字符串中解脱了出来,SE5中也可以在字符串末尾添加\实现,不过模板字符串更加好用和强大. SE6模板字符串是用反撇号(`,即键盘上和~键同一个 ...

  8. javascript模板字符串(反引号)

    模板字面量 是允许嵌入表达式的字符串字面量. 你可以使用多行字符串和字符串插值功能.它们在ES2015规范的先前版本中被称为“模板字符串”. 语法 `string text`​`string text ...

  9. ES6中字符串的新增方法梳理

    1.String.fromCodePoint(); String,fromCodePoint()方法可以认为是对String.fromCharCode()方法的扩展,这两个方法的共同点在于都是用于Un ...

随机推荐

  1. 小程序swiper 滑块视图容器

    属性名 类型 默认值 说明 最低版本 indicator-dots Boolean false 是否显示面板指示点 indicator-color Color rgba(0, 0, 0, .3) 指示 ...

  2. mpvue学习笔记(二)

    六.mpvue入门 http://mpvue.com/ 1.安装 $ vue init mpvue/mpvue-quickstart my-project$ cd my-project$ npm in ...

  3. GDAL——命令使用专题——gdallocationinfo命令

    GDAL——命令使用专题——gdallocationinfo命令  前言 GDAL(Geospatial Data Abstraction Library)是一个在X/MIT许可协议下的开源栅格空间数 ...

  4. caffe源码阅读

    参考网址:https://www.cnblogs.com/louyihang-loves-baiyan/p/5149628.html 1.caffe代码层次熟悉blob,layer,net,solve ...

  5. log日志文件

    单文件写 根据日志的等级是否写入,下面的一个例子就是等级为10,大于等于等级10的记录,小于的话就不记录,在创建之前先进行基本的日志格式配置 import logging logging.basicC ...

  6. Maximum Sum of Digits(CodeForces 1060B)

    Description You are given a positive integer nn. Let S(x) be sum of digits in base 10 representation ...

  7. docker网络

    docker网络   Docker 允许通过外部访问容器或容器互联的方式来提供网络服务. 端口映射允许外部访问容器 --link 容器互联 容器桥接网络 .通过--link容器通信,给test2添加一 ...

  8. Eclipse控制台输出log日志中文乱码

    今天在工作中,调试程序的时候突然发现控制台的log日志,输出的中文全都是乱码. 看到这就在想,这是项目编码还是log.xml编码配置被改掉了呢?于是统统检查了一遍发现所有的编码格式都是统一用的utf- ...

  9. Java——重写

    重写面向对象编程的三大特征之一 1.子类重写了父类的方法,则使用子类创建的对象调用该方法时,调用的是重写后的方法,即子类中的方法 2.子类重写父类方法需满足以下条件: (1)方法名和参数列表: 子类重 ...

  10. LeetCode 148 排序链表

    题目: 在 O(n log n) 时间复杂度和常数级空间复杂度下,对链表进行排序. 示例 1: 输入: 4->2->1->3 输出: 1->2->3->4 示例 2 ...