javasript 标签函数

说实话javasript 标签函数使用的场景还是比较少的，以至于某个同学问到我这个问题时就懵逼了！！

什么是标签函数

标签函数的语法是函数名后面直接带一个模板字符串，并从模板字符串中的插值表达式中获取参数

举个例子：

let a = 5;let b = 10;function tag(s, v1, v2) {    console.log('begin----------');    console.log(s[0]);    console.log(s[1]);    console.log(s[2]);    console.log(v1);    console.log(v2);}tag`hello ${a + b}  word ${a*b}` //标签函数1tag`hello 12 word` //标签函数1

一般而言，我们调用函数是这样的 tag(hello ${a + b} word ${a*b}) 有没有发现区别？没错！！标签函数是后面直接跟模版字符串，而函数调用是有()的，里面是参数。比如tag(“参数1”)

进一步理解

tag`hello ${a + b}  word ${a*b}` //标签函数1tag`hello 12 word` //标签函数1tag"hello asdf asdfg"// 错误语句tag(`hello ${a + b}  word ${a*b}`)//常规的函数调用tag("hello word")//常规的函数调用

第一个、第二个后面跟的是标签字符串，所以为标签函数，第三个后面的字符串是用""号的，并不是标签语句，语句错误。可能到这里某些同学还不是很好理解，因为他不知道什么是模板字符串，下面我介绍模板字符串，看完后可返回在看一下这一块就很好理解了

模板字符串

模板字符串也是字符串。 只是一般的字符串没办法在字符串里面使用变量或者拼接，模板字符串可以

• 模板字符串语法
• 在 JavaScript 中编写字符串时，通常使用 （ ' ）或者 （ " ），而模板字符串使用 （`）

普通字符串:

const str1 ='hello world';const str2 ="hello world";

模板字符串：

const str3 =`hello world`;

字符串拼接

• 模板字符串写法可以直接使用 ${value} 嵌入表达式：

  let a = 5;  let b = 10;  let str = `hello ${a} word ${a + b}`  console.log(str);  hello 5 word 15 //输出结果

这里可以明显看出模板字符串的优势，很方便对字符串进行处理

标签函数的就是函数名后面直接带一个模板字符串

标签函数参数

let a = 5;	let b = 10;	let str = `hello ${a+b} word ${a*b} word`

• 第一个参数是被嵌入表达式分隔的文本的数组

  在上面标签函数被分割的文本数组为['hello','word', 'word']

• 第二个参数开始是嵌入表达式的内容

  在上面标签函数开始是嵌入表达式的内容为 ${a + b} ${a*b}

• 下面是输出例子

  let a = 5;  let b = 10;  function tag(...args) {      console.log(args);  }  tag`hello${a + b}word${a*b}`;  tag`hello${a + b}`;  tag`hello${a + b}aaa`;  tag`hello`;  tag('我是一般函数');	  /**下面是输出结果**/  [ [ 'hello', 'word', '' ], 15, 50 ]  [ [ 'hello', '' ], 15 ]  [ [ 'hello', 'aaa' ], 15 ]  [ [ 'hello' ] ]  [ '我是一般函数' ]