极光日报
首发于极光日报
ES6 - 标签函数

ES6 - 标签函数

了解标签函数之前我们先简单复习一下模板字符串。

模板字符串

模板字符串语法

在 JavaScript 中编写字符串时,通常使用 ( ' )或者 ( " ),而模板字符串使用 (`)。

例如:

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

使用模板字符串的语法是:

const str3 =`hello world`;

注意:模板字符串也是字符串。

字符串拼接

普通字符串写法:

var p = {
  name: 'Alfred',
  nn: 'Alfy',
};

console.log('Hi, I\'m ' + p.name + '! Call me "' + p.nn + '".');

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

console.log(`Hi, I'm ${p.name}! Call me "${p.nn}".`);

输出为: Hi, I'm Alfred! Call me "Alfy".

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

换行

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

普通字符串:

console.log("Dear Mom,\n" + 
"Hope you are well.\n" + 
"\tLove, your son")

模板字符串:

console.log(`Dear Mom,
Hope you are well.
    Love, your son`);

在模板字符串中所有的换行、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.' ]
Alfred
47

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

函数返回标签函数

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!'

标签函数有什么用

举个例子 styled-components

styled-components 就是通过 Tag 函数来给 React 和 ReactNative 设置 CSS 样式。


参考:
Computing tag functions for ES6 template literals
codeburst.io/javascript
codeburst.io/javascript

极光日报,极光开发者旗下媒体。

每天导读三篇英文技术文章。

编辑于 2017-12-04

文章被以下专栏收录

    简介:每日导读(或翻译)三篇优质英文文章,内容 80% 涉及硅谷/编程/科技/,期待共同成长。