2

我今天遇到了一个错误——TypeError: "fa" is not a function经过短暂的调查，我找到了原因。我忘记了对象文字中的逗号，这给我留下了相当于一个字符串，后跟一个模板字符串，本质上是："fa"``. 看到not a function我希望找到一些冒犯性的括号并觉得这很好奇，所以我在 Node REPL 中加深了我的调查。

''``               // TypeError: '' is not a function
'foo'``            // TypeError: 'foo' is not a function
1``                // TypeError: 1 is not a function
(() => 'foobar')`` //'foobar'

好的，所以我发现模板字符串的工作方式类似于在标记后放置括号。越来越好奇。

我想知道它是否传递了任何论点，所以我写了这个：

function showArgs () {
  return arguments
}

showArgs()                  // {}
showArgs``                  // { '0': [ '' ] }
showArgs`foo`               // { '0': [ 'foo' ] }
showArgs`foo${'bar'}`       // { '0': [ 'foo', '' ], '1': 'bar' }
showArgs`foo${'bar'}${1}`   // { '0': [ 'foo', '', '' ], '1': 'bar', '2': 1 }
showArgs(`foo${'bar'}${1}`) // { '0': 'foobar1`' }

这里发生了什么？

参数显然与模板字符串有关，因为它们可以用于通过将第n个数组项与第n + 1个参数连接并将它们全部连接起来来构造它，但是为什么模板字符串执行前面的标记那些论点？

4

1 回答 1

3

查看标记的模板文字。

更高级的模板文字形式是标记模板文字。使用它们，您可以使用函数修改模板文字的输出。第一个参数包含一个字符串字面量数组 [...]。第二个，以及第一个之后的每个参数，是处理过的（或有时称为cooked）替换表达式的值[...]。最后，您的函数返回您操作的字符串。

来自 MDN 的示例：

var a = 5;
var b = 10;

function tag(strings, ...values) {
  console.log(strings[0]); // "Hello "
  console.log(strings[1]); // " world "
  console.log(strings[2]); // ""
  console.log(values[0]);  // 15
  console.log(values[1]);  // 50

  return "Bazinga!";
}

tag`Hello ${ a + b } world ${ a * b }`;
// "Bazinga!"
于 2016-12-08T16:49:23.337 回答