更多文章 訪問我的博客：http://www.caoyong.xin:8080/blogger
JavaScript中的單引號和雙引號
今天來聊一聊單引號和雙引號在JavaScript中的使用，做web的經常會在HTML中或者JavaScript中拼接字符串，這個時候就會用到單引號與雙引號混合使用，如果使用不當還會造成意想不到的bug。
單引號和雙引號都可以作爲字符串的開始符和關閉符，並且只能同一種單或者雙引號來定義開始和結束；
在同一種引號中使用相同的引號，需要轉義後才能使用。不同引號可以嵌套使用。
下面就來聊一聊這些小細節。
首先，描述一下，具體的應用場景。
第一：從後臺界面傳遞的數據在HTML或者jsp頁面展示的時候，我們可能把這些數據直接展示，又或者以變量的形式傳遞給js函數。
第二：我們用到ajax的時候，從後端異步獲取數據，需要把這些數據結合HTML標籤CSS屬性拼接在一起，然後斧子給某個標籤在頁面上展示。
具體來說一些這些應用場景。
第一：在HTML或者Jsp中使用
有一個需求，在後臺傳遞一個List集合的數據將要在前臺頁面展示
前臺頁面
我們看onclick="test('${str}')"我們給js函數test()需要傳遞一個參數，這個時候就需要用到雙引號中嵌套單引號，爲什麼要加上單引號，那是因爲我們傳遞的是一個字符串所以要加上單引號（如果是數字可以不加，但是有的時候會出現問題，下面會提到，所以最好都要加上引號），你可能會說，如果加上雙引號了？可以加雙引號但是前提你要使用轉義字符的雙引號纔可以
使用瀏覽器的開發者模式查看代碼
就可以看到雙引號中嵌套雙引號了
你可能想說我們一般的轉義不就是加上反斜槓（\）不就可以了嗎？
但是在HTML，卻不可以，要使用轉義字符纔可以。
單引號的轉義字符 '
雙引號的轉義字符"
既然提到了這，我就說一個我遇到的一個相關問題，只這樣的又一次我將32位的UUID傳遞給js函數，但是卻給我返回的是科學計數法，TMD
,這個問題搞了我半天。
結果：
加上單引號以後就正常了。
第二：在JavaScript中使用
最多的就是使用Ajax異步獲取數據，拼接字符串。
場景復原
首先我們通過Ajax獲取後臺數據是一個list的集合數據接下來我們要在js中循環遍歷這個list,然後拼接字符串，最後將字符串賦值給一個div進行頁面展示
js代碼展示
網頁源碼展示
下面我們就來解釋一下
html += "<a href='' onclick='show(\""+data[i]+"\")'>"+data[i]+"</a><br>";
首先我們可以看到有一個html的變量用於存放拼接字符串，最外層有一個雙引號（也可以是單引號），在第一層裏面我們用的都是單引號，如href=''
onclick='',(我說的是第一層)，這裏也就說明了，爲什麼同種引號內不能使用同種引號（指的是父子關係），可以嵌套使用，比如 雙引號中使用單引號，然後單引號中在使用雙引號。這是允許的。
接下來我們看onclick='show(\""+data[i]+"\")'
\" 表示轉義雙引號，後面又跟了一個雙引號是與最開始的雙引號呼應，"<a href='' onclick='show(\""是個字符串而字符串的內容就是
<a href='' onclick='show(\"後面的data[i]就是另一個字符串，我們知道字符串的拼接需要用加號連接，所以這裏也就好理解爲什麼要在data[i]兩邊加上加號了。再到後面"\")'>"又是一個字符串內容是\")'。接着後面"</a><br>";是一個字符串。而"</a><br>"與"<a href='' onclick='show(\""+data[i]+"\")'>"之間的data[i]需要用兩個加號拼接前後的字符串。
說到這裏總則要記住上面提到的規則，那麼我們在面對單引號或者雙引號拼接字符串的時候就會得心應手了！。