如何在模板文字中使用模板文字（``）？

Answer 1

我认为你把它过于复杂化了。如果您只需要维护

SOMELINK

的值，这应该可行：

someFunction(`<p>Something something <a href="${SOMELINK}/blah">SomeLink</a></p>`)

Answer 2

简介

正如 imjared 在他的回答中所说，你肯定让 JavaScript 模板变得复杂了。但我想通过解释模板的语法来使其更清楚。

模板中最多有四个不同的部分，您可以在模板中编写模板，如下所示，但不完全是您提到的方式。

花式弦

首先，模板只不过是一种“奇特的方式”来编写一个字符串，其中定义了表达式。如果您输入： typeof `this template` (1)

在您的浏览器控制台中，它将写入 

"string"

。

在过去，当你想将许多字符串连接在一起时，你最终会写：

"string1" + "string2" + ... + "stringN" (2)

一些参数可以是数字，然后会自动转换为字符串（在大多数情况下，它会按预期工作）。但是，如果您想计算一个表达式，您通常必须将该表达式写在括号之间：

"string1" + (a + b * c) + "string2" (3)

现代 JavaScript 有模板

模板将其替换为

${...}

特殊语法。在

${...}

内，您可以写下您的表情。这意味着（3）可以使用模板语法重写如下：`string1${a + b * c}string2` (4)

该语法还有一个优点，看起来您可以在模板中插入变量，如下所示：

`string1${varname}string2` (5)

这仍然是一个表达，只是碰巧仅限于

varname

。

因此，模板中可能有四个不同的部分：

一根弦

1. 如果您的模板只是一个字符串（即没有

   ${...}

   ），那么它就像一个字符串。

   `this is just like a string` (6)

两部分

2. 如果模板中有一个表达式，那么模板中就有一个 HEAD 和一个 TAIL。上面的 (4) 和 (5) 是带有 HEAD 和 TAIL 的模板。

三部分

3. 如果您编写的模板包含多个表达式，则会在表达式之间添加一个或多个特殊部分。这些称为中间模板。

   `head${expr1}middle${expr2}middle${expr3}tail` (7)

模板中的模板

正如我上面提到的，您实际上可以在模板中编写模板。很可能，您不需要这样的，但这是可能的，因为

${

和

}

之间出现的是一个表达式，而模板被视为主要文字（或多或少，它比那...)

`string1${v
  + `sub-template${ sub_sub_template_is_possible }tail`
  + w}string2`                                             (8)

如 (8) 中的子模板示例中所述，您可以在子模板中拥有另一个子子模板。我认为在大多数情况下，您不太可能需要这样的模板，因为根模板已经为您提供了所有必要的功能。

逃脱角色

模板，就像字符串一样，支持使用反斜杠作为引导符来转义各种字符：

• \<octal>

• \x<hexadecimal>

• \u<hexadecimal>

一些特殊字符，例如代表换行符的字符
• n

  （

  \n

  ）

最后，其他字符按原样转义，这包括：

• \` (9)

  转义模板引号，在这种情况下，它们被视为引号字符，而不是模板起点或终点。换句话说，字符串 (10) 等于字符串 (11)：

  `\``                                                   (10)
  "`"                                                    (11)

非常简化的语法

以下是上面提到的简化的类似 BNF 语法的部分：

TemplateLiteral ::= Template
              | TemplateHead TemplateExpression* TemplateTail

TemplateExpression ::= Expression
              | TemplateExpression TemplateMiddle Expression

Template ::= '`' Character* '`'

TemplateHead ::= '`' Character* '${'

TemplateMiddle ::= '}' Character* '${'

TemplateTail ::= '}' Character* '`'

Character ::= ... -- characters valid in strings,
                     except '${' and '`'                 (12)

参考

JavaScript 语言在本页的 ECMA-262 文档中进行了描述：

https://www.ecma-international.org/publications-and-standards/standards/ecma-262/

Answer 3

someFunction(`<p>Something something <a href={${SOMELINK}/blah>SomeLink</a></p>`);

Answer 4

someFunction("<p>Something something <a href={"+`${SOMELINK}/blah`+"}>SomeLink</a></p>")

我认为你还需要使路线相对

"<p>Something something <a href={/"+`${SOMELINK}/blah`+"}>SomeLink</a></p>"

Answer 5