'Template literals with nested backticks(`) in ES6

How can I write a template literal in ECMAScript 6 that will contain backticks(`) in and by itself, (i.e. nested backticks)?

For example:

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

The reason I need it:

It's quite obvious in my code example above.

I'm trying to build node-mysql queries as Strings and store them in a variable for passing them to MySQL. The MySQL query syntax requires back ticks for UPDATE-style queries.

  • The only way I can have them look neat & tidy is by using template literals, otherwise the queries using regular single-line strings look awful because they end up being very long is some cases.

  • I also want to avoid terminating lines using \n as it's cumbersome.



Solution 1:[1]

From ES6 In Depth: Template strings by Jason Orendorff:

If you need to write a backtick inside a template string, you must escape it with a backslash: `\`` is the same as "`".

Your query should be:

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

Solution 2:[2]

See 11.8.6 Template Literal Lexical Components

A template without substitutions is defined as

NoSubstitutionTemplate ::
    ` TemplateCharactersopt`

where a template character is

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

Therefore, ` can't be a template character unless you escape it by preceding it with \.

Solution 3:[3]

If you want to use an apostrophe in a string made with apostrophes, you escape it with a backslash, like this:

'\''

Similarly, if you want to use a backtick in a template literal, you have to escape it with a backslash:

`\``

Solution 4:[4]

As mentioned in other answers, you can escape the backtick ` with a backslash, like \`.

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

However, if you need very many backticks in a row ````` inside the template literal, it could be more readable to put them within a normal string that is inside a placeholder, like ${'`````'} or ${"`````"}.

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

Solution 5:[5]

Use \`, it seems to work for me in the latest Chrome.

Solution 6:[6]

Personally I consider ES6 template literals to be inadequate for SQL (and Markdown) principally because you can't use backtick characters. I wish they would add triple-quoted strings to fix this properly.

In the meantime, since you're probably using a transpiler for ES6 anyway, you might consider using triplet (disclaimer: I am the author).

Solution 7:[7]

To escape all special characters, not just the backticks:

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

I needed this for some code generation stuff. The str was the content of a JavaScript file and the goal was to put this content into a string literal variable into another generated JavaScript file.

Sadly it seems there is (2019) no native JavaScript function for this escaping. The characters that needs to be replaced are: `, $ and \.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jeremy
Solution 2 Oriol
Solution 3 Peter Mortensen
Solution 4 Rory O'Kane
Solution 5 damd
Solution 6 Peter Mortensen
Solution 7