如何在JavaScript中使用文字引號？

Question

這是我的代碼：

const myFunction = () => {
   let winnerScreen="images/winner.png";
   let winnerId="winnerScreen";
   document.getElementById("output").innerHTML='<img id='+winnerId+" "+'src='+winnerScreen+'/>';
}

我有一種可以單行編寫此函數的感覺，但是我不知道如何在JavaScript中使用文字引號。

有誰能夠幫助我？

Answer 1

這將是帶有模板文字的單線：

 const myFunction = () => document.getElementById('output').innerHTML = `<img id='${"winnerScreen"}' src='${"images/winner.png"}' />'`; myFunction(); 

 <div id="output"></div> 

但是在那種情況下，使用模板文字是沒有意義的，因為您可以簡單地傳遞字符串。

 const myFunction = () => document.getElementById('output').innerHTML = "<img id='winnerScreen' src='images/winner.png' />"; myFunction(); 

 <div id="output"></div> 

注意：

• 您可以使用"和'引號來寫字符串（如最后一個片段中所示）：

  "<img id='winnerScreen' src='images/winner.png' />"

• 或僅使用諸如'的單引號類型並使用字符串轉義\\'如下所示：

  '<img id=\\'winnerScreen\\' src=\\'images/winner.png\\' />'

Answer 2

在新版本中，您可以使用反引號（`），並使用插值或多或少地像在PHP中一樣工作：

document.getElementById("output").innerHTML= `<img id="${winnerId}" src="${winnerScreen}">`

請注意：

• 屬性應該用雙引號引起來`
• 請避免將屏幕截圖用作代碼 。

Answer 3

像這樣使用反引號和$

 let winnerId = 1; let winnerScreen = 'https://unknownSource.com/uk.jpg' var _str = `<img id = "${winnerId}" src ="${winnerScreen}">`; console.log(_str) 

Answer 4

像這樣寫一個字符串文字：

document.getElementById('output').innnerHTML = `<img id=${winnerId} src=${winnerScreen} />`;

但是最好在HTML屬性周圍加上" ：

document.getElementById('output').innnerHTML = `<img id="${winnerId}" src="${winnerScreen}" />`;

或者，如果您希望整個功能在一行上：

const myfunction = () => document.getElementById('output').innnerHTML = '<img id="images/winner.png" src="winnerScreen" />';

但這有點愚蠢，不要試圖節省行數，而是要保持代碼的可讀性 。

Answer 5

我想你的意思是如何在引號中使用引號。

您有2個版本的引號。

"和' 。

在每個內部，您可以使用另一個。

document.getElementByID('output').innerHTML = "<img id='winnerScreen' src='images/winner.png'>";