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

Question

我有一個非常具體的邊緣情況，我需要在模板文字中使用模板文字但無法完成。

代碼看起來像這樣：

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

但是，我必須將其包裝在 function 中，同時保持SOMELINK變量的值，這會導致錯誤發生。 我是否逃脫了蜱蟲。

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

使用轉義的滴答聲，我收到以下錯誤消息：

錯誤：需要 SOMELINK 但未提供

沒有，我得到：

意外的令牌，預期的“，”

我該如何處理？

編輯：可能應該注意的是，在someFunction中傳遞的代碼將被渲染，並且需要使用它。 它最終會通過dangerouslySetI.netHTML傳遞給另一個標簽。 所以它看起來像這樣：

<div dangerouslySetInnerHTML={{__html: someFunction(`<p>Something something <a href={`${SOMELINK}/blah`}>SomeLink</a></p>`)}}/>

不確定這是否相關，但someFunction只是對文本做了一些修改。

Answer 1

我認為你把它復雜化了。 如果您只需要維護SOMELINK的值，這應該有效：

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

Answer 2

你可以這樣做：

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

Answer 3

我認為在這種情況下 SOMELINK 變量不可用。 您應該先提供 SOMELINK。

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

介紹

正如 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) 中的子模板示例中所述，您可以在子模板中包含另一個子子模板。 我認為在大多數情況下，您不太可能需要這樣，因為根模板已經為您提供了所有必要的功能。

轉義字符

模板，就像字符串一樣，支持 escaping 個使用反斜杠作為介紹符的各種字符：

• \<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/

搜索Template Literal Lexical Components 。 您會發現我上面提到的四個部分（以及更多）： Template 、 TemplateHead 、 TemplateMiddle和TemplateTail 。