es6模板字符串中标签模板作为参数时产生空元素的问题

当模板字符串作为标签模板使用时，标签函数接受到的参数分别为（arr,…values）

arr：模板字符串中所有那些没有变量替换的部分
…values：各个变量替换后的值

即

let a = 'Oh!';
let b = 'the';
let c = 'very much!'
tag `${a} I love ${b} JavaScript ${c}`;function tag(arr, ...values) {console.log(arr);      //["", " I love ", " javascript ", "", raw: Array[4]]for(let i in values){console.log(values[i]);     //oh!//the//very much!}
}

在这里，(arr,…values) 等价于 (arr,value1,value2,value3)，这很好理解

但是！在arr中，为什么arr[0]和arr[arr.length-1]的位置为什么出现了两个空元素？？？

接着我又试了试下面这个样子

let a = 'Oh!';
let b = "the";
let c = "very much!"
tag `I love ${b} javascript`;function tag(arr, ...values) {console.log(arr);    //["I love ", " javascript", raw: Array[2]]for(let i in values){console.log(values[i]);//the  }
}

excuse me???为什么又没有了？

仔细观察了一下，只有当变量出现在模板字符串的起始位置或者末尾位置时，在arr中会出现一个“”空元素

这个特性是不是有些眼熟？

对！就是split()！

let a = 'Oh my god!';
let b = a.split(' ');
console.log(b);     //["Oh", "my", "god!"]let c = ' Oh my god! ';
let d = c.split(' ');
console.log(d);     //["", "Oh", "my", "god!", ""];

假想一下：

标签模板在给标签函数传递arr参数时，会将原先模板字符串用 ${} 进行分割。因为分割符的两边都会产生一个元素。所以当模板字符串的两端位置出现变量时，分割后会在分割符没有元素的一侧生成一个空元素“”。

注：arr中的最后一项raw:Array[n]，是arr数组的一个属性，保存的是转义后的原字符串，这是为了方便取得转义之前的原始模板而设计的。

es6模板字符串中标签模板作为参数时产生空元素的问题相关推荐

ES6知识点整理模板字符串和标签模板的应用
ES6 中对字符串进行了扩展,而模板字符串就是一个非常实用的方式,可以在html中实现与变量和方法的混编之前我们手动拼接字符串的方式 let hello = 'Hello'; let html = ...
模板字符串中嵌套模板字符串
模板字符串中有需求循环数据放到其中,原先我用arr.map(item=><li><a>${arr.content}</a></li>) 这样不符合 ...
ES6（二）——字符串模板、标签模板字符串、函数的默认参数、剩余参数、数组对象的展开语法、数值的表示、Symbol
一.字符串模板基本使用在ES6之前,如果我们想要将字符串和一些动态的变量(标识符)拼接到一起,是非常麻烦和丑陋的(ugly). ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接: 首 ...
es6中标签模板实例中的tab函数的理解
let a = 5; let b = 10; tag`A ${ a + b } B ${ a * b }`; // 等同于 tag(['A', ' B', ''], 15, 50); function ...
es6模板字符串中循环遍历数据踩坑
应该很少有这种需求,需要在模板字符串利循环遍历数据,现在框架都有自己模板语法. 我这里踩的坑是,我在模板字符串中用forEach,map遍历循环时,返回值一直是一个undefined 用for循环re ...
javascript模板字符串（标签函数）
前面介绍了javascript的模板字符串的基本知识,今天深入学习一下标签函数模板字符串概述这里先简单说一下模板字符串的概念 1.模板字符串,从名字上可以得出其实返回的是字符串,普通使用其实就想引 ...
在模板字符串中条件判断和遍历
1.在模板字符串中遍历 ${item1.groupDetail.map((item2) => {return `<div id="check_name_box"> ...
idea java代码注释中@标签模板创建，apidoc接口文档@标签模板创建
我们在开发工具中的代码注释经常会用到一些@标签,比如常用的@author ,如下: 那么我们如果要自定义一些自己需要的注释标签模板呢,比如在使用 apidoc生成接口模板时,就需要经常写一些apido ...
(js)模板字符串中使用循环遍历数据：
(js)模板字符串中使用循环遍历数据: // 数据格式 let wordList = {id: "2",question: "李四",content: [{ n ...

es6模板字符串中标签模板作为参数时产生空元素的问题

es6模板字符串中标签模板作为参数时产生空元素的问题相关推荐

最新文章

热门文章