如何在模板文字内放置反引号 (`)？

Question

如何在 ECMAScript 6 中编写包含反引号 (

`

) 的模板文字（即嵌套反引号）？

例如：

var query = `
  UPDATE packet
  SET
  `association` = "3485435",
  `tagname` = "associated"
 `

---

我需要它的原因：

这在我上面的代码示例中非常明显。

我正在尝试将 node-mysql 查询构建为

Strings

并将它们存储在变量中以将它们传递到 MySQL。 MySQL 查询语法需要反引号来进行

UPDATE

式查询。

• 让它们看起来整洁的唯一方法是使用模板文字，否则使用常规单行字符串的查询看起来很糟糕，因为在某些情况下它们最终会变得非常长。

• 我也想避免使用

  \n

  来终止行，因为它很麻烦。

Answer 1

来自 ES6 深入：Jason Orendorff 的模板字符串：

如果需要在模板字符串中写入反引号，则必须使用反斜杠进行转义：

`\``

与

"`"

相同。

您的查询应该是：

var query = `UPDATE packet
  SET
  \`association\` = "3485435",
  \`tagname\` = "Simos"`

Answer 2

如果您想在由撇号组成的字符串中使用撇号，则可以使用反斜杠对其进行转义，如下所示：

'\''

同样，如果您想在模板文字中使用反引号，则必须使用反斜杠对其进行转义：

`\``

Answer 3

请参阅 11.8.6 模板文字词汇组件

没有替换的模板定义为

NoSubstitutionTemplate ::
    ` TemplateCharactersopt `

模板字符在哪里

TemplateCharacter ::
    $ [lookahead ≠ { ]
    \ EscapeSequence
    LineContinuation
    LineTerminatorSequence
    SourceCharacter but not one of ` or \ or $ or LineTerminator

因此，

`

不能是模板字符，除非您通过在其前面添加

\

来转义它。

Answer 4

正如其他答案中提到的，您可以用反斜杠转义反引号

`

，例如

\`

。

var tripleBacktickExample = `
\`\`\`python
# This JavaScript string contains some example Markdown that
# uses triple-backticks to delimit a Python code block.
\`\`\`
`

但是，如果您需要在模板文字中连续使用很多反引号

`````

，则将它们放在占位符内的普通字符串中可能会更具可读性，例如

${'`````'}

或

${"`````"}

。

var tripleBacktickExample = `
${'```'}python
# This JavaScript string contains some example Markdown that
# uses triple-backticks to delimit a Python code block.
${'```'}
`

Answer 5

转义所有特殊字符，而不仅仅是反引号：

let str = '`Hello`\\n${world}';
let escacped = str.replace(/\\|`|\$/g, '\\$&');
console.log(eval('`' + escaped + '`') === str); // test

我需要这个来生成一些代码。

str

是 JavaScript 文件的内容，目标是将这些内容放入另一个生成的 JavaScript 文件中的字符串文字变量中。

遗憾的是，似乎（2019 年）没有用于这种转义的原生 JavaScript 函数。需要替换的字符有：

`

、

$

和

\

。

Answer 6

在我的例子中，我在使用 esbuild 进行转译时将 html 文件作为字符串文字（带有新行）动态注入到打字稿文件中。

要点类似于以下示例：

// ...
let html = fs.readFileSync('./src/index.html', 'utf8');

// This escapes all instances of the three special characters
// that would break a backtick string literal definition: ` \ $
html = html.replace(/[`\\$]/g, '\\$&');

// ...

tsContents = tsContents.replace(
  /let html = [^;]+;/,
  () => `let html = \`${minified}\`;`,
);

return {
  contents,
  loader: 'ts',
};

“神奇”部分是：

.replace(/[`\\$]/g, '\\$&');

Answer 7

使用 \`，它似乎在最新的 Chrome 中对我有用。

Answer 8

我发现将反引号括在引号中会更容易。以下是您可以用来在 Markdown 中启动代码块的示例：

const str = `${'```'}JavaScript`; // then the rest of whatever you need

所以对于你的具体例子

var query = `
UPDATE packet
SET
${'`'}association${'`'} = "3485435",
${'`'}tagname${'`'} = "associated"
`

Answer 9

我个人认为 ES6 模板文字对于 SQL（和 Markdown）来说是不够的，主要是因为你不能使用反引号字符。我希望他们添加三引号字符串来正确解决这个问题。

与此同时，由于您可能正在使用 ES6 的转译器，因此您可以考虑使用 triplet （免责声明：我是作者）。

Answer 10

您可以使用特定的字符组合来替换反引号，然后使用

replaceAll

来交换它们。

示例：

var backtickReplace = `|replace_me_with_backtick_`;

var example = `This is a ${backtickReplace}back tick${backtickReplace}!`;

var result = example.replaceAll(backtickReplace, "`");

console.log(result);

Answer 11

ES6 有新特性：

• 模板文字
• 标记模板文字（标记模板）

这使得使用字符串更容易。您可以将文本放在“反引号”中。

有了这个我们可以：

1. 插入变量

   let foo = "abc";
   
   console.log(`Welcome ${foo}`); // Welcome abc
   

2. 插入任何类型的表达式

   console.log(`2+3 = ${2+3}`) // 2+3 = 5
   

3. 使用 ' 和 " 引号声明字符串，而不必 逃避任何事情。

   let foo = `foo is 'bar', "bar" is foo`
   
   console.log(foo); // "foo is 'bar', "bar" is foo"
   

4. 多行字符串的更简洁语法

   let text = `foo is bar
   
   bar is foo`
   
   console.log(text);
   
   //"foo is bar
   
   //bar is foo"
   

5. 标记模板，我们可以将模板文字传递给函数，具体方法如下：

   let person = 'Mike';
   let age = 28;
   
   let output = myTag `that ${ person } is ${ age }`;
   
   function myTag(strings, personExp, ageExp) {
   
       // strings[0] gets value "that "
       // strings[1] gets value " is "
       // personExp  gets value " Mike "
       // ageStr     gets value "28"
   
       return strings[0] + personExp + strings[1] + ageExp;
   }
   
   console.log(output);
   
   // that Mike is 28
   

6. String.raw，我们可以得到原始形式，示例如下：

   let text = String.raw `The "\n" newline won't result in a new line.'
   console.log(text);
   // The "\n" newline won't result in a new line.