javascript - 使用 ' '或 “”或 `${ }`的JS函数不同输出的参数

Question

我正在开发Electron应用程序，但在将参数传递给JS函数时遇到一些困难，该函数失去了/字符并导致字符串变为小写。下面是我的代码的简化 View 。

let game_item = 'start "F:\/Riot Games/VALORANT/live/VALORANT.exe" --launch-product=valorant';

let insertLaunch = `<a href='#' onclick='consoleGameLaunch("${game_item}")'>Play</a>`;

document.getElementById('game-container').innerHTML += insertLaunch;

现在，根据我包装 game_item变量的方式，呈现的HTML将完全不同。以下是我尝试过的内容以及外观。

//JS try 1
insertLaunch = `<a href='#' onclick='consoleGameLaunch("${game-item}")'>
//HTML output
<a href="#" onclick="consoleGameLaunch(" start "F:\/Riot Games/VALORANT/live/VALORANT.exe" --launch-product=valorant")">
//JS try 2
insertLaunch = "<a href='#' onclick='consoleGameLaunch('"+game_item+"')'>
//HTML output
<a href="#" onclick="consoleGameLaunch("start "f:\ riot games valorant live valorant.exe" --launch-product="valorant')'">

使用开发控制台，我可以通过手动调用来使其工作

consoleGameLaunch('start "F:\/Riot Games/VALORANT/live/VALORANT.exe" --launch-product=valorant');

如何获得该命令以在HTML中正确显示？

Answer 1

在将值转换为字符串之前，对其进行转义的一种好方法是让JSON.stringify()函数对其进行处理。
例如:

let game_item = 'start "F:\\/Riot Games/VALORANT/live/VALORANT.exe" --launch-product=valorant';

let insertLaunch = `<a href='#' onclick='consoleGameLaunch(${JSON.stringify(game_item)})'>Play</a>`;

window.consoleGameLaunch = function(msg) {
  console.log(msg)
}

document.getElementById('game-container').innerHTML += insertLaunch;

<div id="game-container">
</div>

带有字符串值的JSON.stringify()将返回一个正确转义引号的字符串，以便您可以将其添加到其他字符串。
另外，请记住，在编写带有''的字符串文字时，必须使用两个:'\'
请参阅 this，它解释了有关转义字符串文字(以及其他内容)的更多信息，请仔细阅读一下。
最后，请记住要非常小心地使用.innerHTML来创建内容。使用其他DOM API函数创建内容总是更安全(例如document.createElement())