1.引入
在jquery或者js中拼接字串時，使用單引號和雙引號是沒有區別的，都可以被成功解析成字串，但是，在一些複雜的字串拼接時，需要單引號和雙引號的混合使用時，就需要注意了。最近在專案中寫js指令碼時，發現firebug經常會報多一個單引號或者多一個雙引號這種低階錯誤。但是要是搞不清這兩者，你就會把複雜的字串拼接搞的亂七八糟、錯誤百出。

2.專案中的場景
使用ajax非同步提交資料之後，返回了一個數據，需要以字串拼接的方式將標籤和返回的資料進行拼接設定到前面的標籤的區域上。

3.實際問題
前面標籤的區域：

<div id="bodyContent">
 
</div>
jquery指令碼：

$.ajax({
        type:"POST",
        dataType:"json",
        url:getWebRootPath()+"/location/getCityList.json",
        success:function(data){
            if(data.provinceList !=null){
                  var result="";
                  $.each(data.provinceList,function(i,item){
                      var index=0;
                      result+='<br/>'+'<div class="pull-left" style="cursor:pointer;" onclick="getSelectedAddress(\''+item.longCode+'\'+\',\'+\''+item.name+'\');">'+item.name+'</div>'+
                      "<hr style='width:100%;'/>"+"<table style='cursor:pointer;'>"+
                      "<tr>";
                      $.each(item.list,function(j,subItem){
                          index=j;
                          if(j%4 ==0 ){
                              result+="</tr><tr>";
                          }
         //---------------------------字串拼接的關鍵就在下一句：-------------
                                       result+='<td style="border:1px solid #ECECEC;height:35px;background:#F1F1F1;width:112px;" onclick="getSelectedAddress(\''+subItem.longCode+'\'+\',\'+\''+subItem.name+'\');">'+subItem.name+'</td>';
                      });
                      for(var i=0;i<(3-(index%4));i++){
                          result+="<td style='border:1px solid #ECECEC;height:35px;background:#F1F1F1;width:112px;'>"+"</td>";
                      }
                      result+="</tr></table>";
                      addressDialog.render();
                addressDialog.show();
                  });
                  $("#bodyContent").html(result);
            }
        },
        error:function(data){
              alert("對不起，系統出錯！");
        }
});
 

解讀上面程式碼：
我這裡主要就是使用result變數作為字串拼接的變數來設定拼接的值，最後使用html(result)函式將值設定在指定的區域div上。

第一層解析：
這個變數的最外面採用的是單引號，意思就是將裡面的內容作為一個字串的形式。裡面拼接的是html標籤<td>然後就不需雙引號就可以將值subItem.name這個值拼接起來了。結果：

result+='<td>'+subItem.name+'</td>';
第二層解析：
上面第一層使用+=完全是為了可以迴圈拼接出後臺傳過來list中的所有邏輯物件pojo（與題目無關）。為了使拼接的表格美觀，所以就需要有style屬性。而此時如果使用單引號來括起來style的屬性對應的屬性值，那麼前面第一個單引號會與style的屬性值的第一個單引號相匹配造成錯誤匹配，因此係統就會報缺少;分號的錯誤。所以應該使用雙引號來區分。結果：

第三層解析：
由於這個表格還需新增點選事件來完成表格內的資料可以被獲取來完成提交的功能。我們需要點選函式裡面新增兩個必要的形參，然後將形參作為邏輯處理的資料，而此時又需要新增引號了。。。如果是無參的函式則並沒有多大的變化。

有引數的形式：

解析：箭頭所指的地方我們使用了轉義字元，將\'轉義成了雙引號"，我在沒解決問題之前是採用的雙引號，可是firebug卻報錯，說缺少分號，意思就是這個字串拼接的不匹配了。仔細思考下發現，getSelectedAddress函式前面的雙引號的作用是作為屬性值的設定。而此時再使用雙引號是用來字串拼接不是設定屬性值了，瀏覽器肯定就會造成錯誤匹配的情況。由於需要拼接的變數subItem.longCode是作為result的外部變數，屬於和result同級的，所以前後兩邊的字串的拼接，外部必須使用單引號括起來，在這裡單引號是整個表格標籤的統一符號： ' +subItem.longCode+ ' 。而裡面是屬性值，所以裡面必須是雙引號（紅箭頭的位置）。直接使用會造成瀏覽器歧義，解決辦法就是採用轉義字元，將單引號轉義成雙引號。後面都是一樣了。

第四層解析：
中間的逗號，可能會以為是getSelectedAddress方法會有兩個引數subItem.longCode和subItem.name兩個引數，而實際上，這個逗號拼接只是作為一個字串將值與前後兩個字串變數拼接在了一起作為整體的一個字串變數。所以getSelectedAddress方法裡面只有一個引數： ' subItem.longCode,subItem.name '。
--------------------- 
原文：https://blog.csdn.net/ya_1249463314/article/details/53781459