理解js的标签函数

模板字符串

在解释标签函数前，我们需要先了解模板字符串，相比传统字符串写法，它优化了字符串中变量的拼接，和支持换行的写法。使用模板字符串的语法是:

const str =`hello world`;

字符串拼接

普通字符串写法：

var name = 'fly63前端网'
console.log('Hi, ' + name + '!');

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

console.log(`Hi, ${name}!`);

这里可以明显看出模板字符串的优势，不再需要考虑反斜杠来处理单引号和双引号。

字符串换行

普通字符串：

console.log("Hi,\nfly63前端网")

而模板字符串还有一个很方便的功能是不再需要插入换行符 \n。

console.log(`Hi,
fly63前端网`);

在模板字符串中所有的换行、tab、空格等字符都是字符串的一部分。

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

定义一个 greet 函数接收三个参数。

function greet(arg1, arg2, arg3){
  console.log(arg1);
  console.log(arg2);
  console.log(arg3);
}

下面两句代码等价

// 普通函数
greet(["I'm ", ". I'm ", " years old."], name, age)
// tag 函数
greet`I'm ${name}. I'm ${age} years old.`、
// 最终输出
[ 'I\'m ', '. I\'m ', ' years old.' ]

标签函数的第一个参数是被嵌入表达式分隔的文本的数组。第二个参数开始是嵌入表达式的内容。

函数返回标签函数

function cook(strs, ...substs) {
    return substs.reduce(
        (prev,cur,i) => prev+cur+strs[i+1],
        strs[0]
    );
}

function repeat(times) {
    return function (...args) {
        return cook(...args).repeat(times);
    };
}

// 运行结果
repeat(3)`abc` //abcabcabc
repeat(3)`abc${3+1}` //abc4abc4abc4

标签函数返回标签函数

// 实现一个 three 函数
const three = (...args1) => (...args2) => (...args3) => cook(args1) + cook(args2) + cook(args3);

// 我们可以这么调用
three`hello``world``!` //helloworld!

标签函数有什么用？

对于技术栈是react的同学，应该熟悉“styled-components”-样式化组件。styled-components 就是通过 Tag 函数来给 React 和 ReactNative 设置 css 样式。

点击了解styled-components.com

1.模板字面量也支持定义标签函数，而通过标签函数可以自定义插值行为。标签函数会接收被插值记号分隔后的模板和对每个表达式求值的结果。

2.标签函数本身是一个常规函数，通过前缀到模板字面量来应用自定义行为。标签函数接收到的参数依次是原始字符串数组和对每个表达式求值的结果。这个函数的返回值是对模板字面量求值得到的字符串。

重点：对于有n个插值的模板字面量，传给标签函数的表达式参数的个数始终是n，而传给标签函数的第一个参数所包含的字符串个数则始终是n=1。因此，如果你想把这些字符串和对表达式求值的结果拼接起来作为默认返回的字符串，可以这样做。

function tag(strings,...expressions){
  return strings[0]+expressions.map((e,i)=>`${e}${strings[i+1]}`).join('');  
}

let a=5;
let b=10;
console.log(`${a}+${b}=${a+b}`);    //"5+10=15"
console.log(tag`${a}+${b}=${a+b}`);  //"5+10=15

链接: https://www.fly63.com/article/detial/12262