问题标签 [tagged-templates]

我最近了解到 ES6 允许在使用模板文字作为参数时进行不带括号的函数调用。例如

然而，在阅读了几篇关于这个功能的文章之后，我发现关于 JS 如何处理这些调用背后的逻辑的信息很少。

在玩弄了我的代码的一些排列之后，我仍然在努力拼凑模板文字如何在函数内部被分解的模式，当人们以这种方式调用它时。

上面代码中发生的事情很简单，字符串文字作为数组接收，其中第一个也是唯一的元素是字符串。

一旦我开始在模板中使用表达式，它就会变得有点混乱。例如

所以看起来这...values部分解构了所有的表达式。但是，为什么str数组在这些位置有空字符串呢？

我只是没有完全掌握它遵循的模式。有人可以解释这个功能吗？或者也许给我指出一篇好文章？

在此页面上有以下代码片段（也可以在此处找到），演示了模板字符串的一些用法。唯一的解释或上下文是开头的评论，这对我来说很有意义。然而，片段本身对我来说仍然是一个谜。

我对字符串文字本身非常满意，这是让我感到困惑的上下文。

GET 是一个自定义函数，可能会加载一些 fetch() 吗？如果是这样，是否有一些命名约定可以在 GET 和 POST 的方法名称上使用全大写？你会在哪里使用这样的片段？如果要将其插入到某个称为 GET 的函数中，为什么要在这里将它们像这样放在一起，而该函数无论如何都要把它分成这么多块呢？

最后 - 最后的括号是怎么回事？这真的是让我问这个问题的地方。我在其他地方找不到字符串文字后跟括号的任何示例。这个语法是怎么回事？我花了很长时间搜索这个，我很想说这是一个错误。如果缺少最后一点，那么整个事情作为一个标签函数就有意义了。

我正在为 css-in-js 做准备，但如果使用嵌套插值函数，我有一个关于结束行的正确方法的问题。

毫无疑问，css 行以 ; 结尾。这就是我们在每个 prop:value 之后的 taggedTemplate 中使用的内容；

但是如果我们嵌套另一个函数，比如：

那行是否也以;结尾，即使函数也有; 在里面？对我来说，我们正在编写 css，css 中的每一行都以 ; 结尾。包含函数是否也返回；在里面。

Styled-components 似乎做了正确的事情，只渲染一个；，但我从标记模板、文字和 css 的纯粹主义角度来看。

编辑：其实我错了，第一个例子也行不通！它还插入代码！

我正在尝试使用styled-components css prop api，但遇到了以下问题：

此代码运行良好：

但以下没有：

这里的输出 css 是width: 100px; height: 100px; color: ,red,; ,() => color,;，这显然是无效的。

使用模板字符串插值对输出进行字符串化可以解决问题，但由于 Prettier 强制执行此格式，导致可读性非常差：

不幸的是，将插值移动到 css 道具定义之外的任何地方（在组件主体中或创建字符串化函数）会破坏功能（道具/主题访问，所有 css 根本不会被应用）。

它似乎与这个问题有关：https ://github.com/styled-components/styled-components/issues/1641 ，但建议的解决方案是使用css我已经在做的帮助函数:(

我的问题有简单的解决方法吗？

如果我有一个返回标记模板文字的函数，我可以控制台记录函数 toString()，它会显示我的变量的对象和属性名称。

如您所见data.name，在日志结果中，现在当我们查看我的标记函数时，我有我的字符串和值

有没有办法在我的标签中获取变量名而不将整个对象作为值传递到字符串中？一切