JQ 單引號 反單引號 雙引號差異

單引號 反單引號 雙引號差異

最近在自己在練習JQ的toDoList,卻沒寫多少就碰到困難,雖然很笨的問題但還是紀錄一下。


現在我的下方先做了一個表單 有兩列 分別是 test  &  test2 

<div id="header">
	   
	   <div id="todoInput">
	      <h2>My To Do List</h2>
	      <input type="text" id ="myInput" placeholder="ToDo...">
	      
	      <input type="button" id="inputAdd" value="Add" onclick="newList()">
	   </div>
	</div>
	<ul id ="list">
		<li>test </li>
		<li>test2</li>
	</ul>

我希望當頁面reload時可以根據list 的長度 動態的增加一個 x 


我們先抓出li有多少個後,起初我以為可以類似上方圖一樣eq() 裡面便可以判端我的 i ,但卻沒想到他其實是個字串會報錯

因此我想到可以利用下圖這種方式,這樣就可以動態的產生

$('li').eq(i).append('<span>x</span>');

但馬克先生跟我說還有更好的寫法,叫我先不要把eq放在外面,一樣放在裡面當字串,因此我又想到另一種

$('li:eq('+i+')').append('<span>x</span>');

可是馬克先生還是不喜歡叫我在去查 ``''  的差別,後來查了資料後發現

模板源文本使用 (` `) 圍著,而非字串常用的、英文中的單引號或雙引號。模板源文本中可以包涵由錢字符($)與大括號({ })所構成的佔位符(即:${expression}),佔位符與其附近的文字會一併傳給函數,預設函數將把這些部分組合成一個單一的字串。

好文言文的解釋,根本不懂所以看程式碼最快,根據上方的範例我們再改寫

$(`li:eq(${i})`).append('<span>x</span>');

透過反單引號的 `` ,便可以透過字串的方式呈現且可以一併傳給函數


參考資料

1. 模板源文本