js模板字符串鲜为人知的用法

天看到一段代码:

function getPersonInfo(one, two, three) {
  console.log(one);
  console.log(two);
  console.log(three);
}

const person = "sleepdevil";
const age = 21;

getPersonInfo`that ${person} is ${age} years old`;

看到第一眼我是懵逼的:“模板字符串还能用在函数名后面当参数用?”

找了半天找到了MDN,其中有一个用法:带标签的模板字符串

更高级的形式的模板字符串是带标签的模板字符串。标签使您可以用函数解析模板字符串。标签函数的第一个参数包含一个字符串值的数组。其余的参数与表达式相关。最后,你的函数可以返回处理好的的字符串(或者它可以返回完全不同的东西 , 如下个例子所述)。用于该标签的函数的名称可以被命名为任何名字。 --mdn

光看字肯定是看不懂的,回到之前的代码。这段代码输出的是:

[ 'that ', ' is ', ' years old' ]
sleepdevil
21

从这里我们可以看出,函数定义时的第一个参数就是模板字符串里非表达式部分,即'that ', ' is ', ' years old' 。它是数组形式,也就是说我们可以通过索引来获取其中的值。其余参数则是模板字符串中的表达式部分。

再来看这段代码:

function getPersonInfo(string, one, two) {
  console.log(string);
  console.log(string[0]);
  console.log(string[1]);
  console.log(string[2]);
  return string[0] + one + string[1] + two + string[2];
}

const person = "sleepdevil";
const age = 18;

console.log(getPersonInfo`${person} is ${age} years old`);

这时候这个函数接收模板字符串中是以表达式开头的,那么这里的string[0]是否应该是'is'呢?我们来看一下这段代码的输出:

[ '', ' is ', ' years old' ]

 is
 years old
sleepdevil is 18 years old

我们可以看出,string[0]是一个空字符串,也就是说,当一个模板字符串中含有表达式时,那么当它作为参数传递给函数时,它的两旁必然是会作为函数第一个参数(数组)中的元素的。

加载评论