在js中有使用引號的選擇嗎？

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

你可以嘗試像以下使用'可變插值$ {}小提琴：

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>`; 
}