Question

例如，在以下javascript代码中，如果您使用单引号打开document.getElementById('code').value =您将在window.open遇到无法使用单引号的问题，以打开它。这将关闭getElementById并破坏代码。您也不能使用双引号，因为如果使用双引号，则在newwindow周围加上引号时会遇到同样的问题。有办法解决这个问题吗？

   function genorateCode() {
  var account = document.getElementById("account").value;
  var url = document.getElementById("url").value;
  document.getElementById('code').value = '<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css"><a href="' + url + '" ' + ' onclick="window.open("' + url + '", "newwindow", "width=400,height=500"); return false;">' + '<div class="button"><img src="https://s15.postimg.org/mfpd2ki8r/icon.png" width="16">@' + account + '</div></a>';
}

（这些都放在文本区域，因此用户可以使用“生成的代码”

<textarea readonly id="code"></textarea>

Answer 1

您可以尝试使用`with variable interpolation $ {}，如下面的小提琴：

function generateCode() {
  var account = document.getElementById("account").value;
  var url = document.getElementById("url").value;
  document.getElementById('code').value = `<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css"><a href="${url}" onclick="window.open('${url}', 'newwindow', 'width=400,height=500'); return false;"><div class="button"><img src="https://s15.postimg.org/mfpd2ki8r/icon.png" width="16">${account}</div></a>`;
}

window.generateCode = generateCode;

<p>
Account: <input id="account" />
</p>
<p>
URL: <input id="url" /> 
</p>
<p>
Code: <textarea readonly id="code"></textarea>
</p>
<p>
<button onclick="javascript:generateCode()">
Get the code!
</button>
</p>

Answer 2

你可以用`来包围你的字符串，这是键盘上1旁边的按钮，通常称为反引号。

这使您可以访问其他一些语法，因此您可以执行类似这样的操作

function genorateCode() {
  var account = document.getElementById("account").value;
  var url = document.getElementById("url").value;
  document.getElementById('code').value = `<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css"><a href="${url}" onclick="window.open("${url}", "newwindow", "width=400,height=500"); return false;"> <div class="button"><img src="https://s15.postimg.org/mfpd2ki8r/icon.png" width="16">@${account}</div></a>`;
}

是否有在js中使用引号的替代方法？

2 个答案: