在js開發中一般我們多多少少都會用到字符串拼接，新手們經常會遇到各種錯誤，其中關于字符串拼接的問題尤其重要，今天來談一談。

1.常用字符串拼接

當我們從后臺請求到數據時，傳統渲染我們就會將請求到的數據拼接DOM節點，然后添加到頁面中，如：

$.ajax({type: "post",data: {},url: "xxx",success: function(res){if(res.data){var html = "";$.each(res.data,function(i,item){html += "<div class='username'>"+item.username+"</div>";});$("body").append(html);}} });

這里最外層使用的是雙引號，里層使用單引號，在使用的時候一般有兩種寫法：
（1）雙引號嵌套單引號"<a href='xx'></a>"
（2）單引號嵌套雙引號'<a href="yy"></a>'
Tips: 在寫字符串拼接的時候要注意引號不要寫亂了，正確的做法是(如雙引號為外層)：
1.先寫整體內外層引號

var url = "http://www.baidu.com"; var html = "<a href=''></a>"

2.在需要寫參數的地方用最外層相同引號（這里是雙引號）分開

var url = "http://www.baidu.com"; var html = "<a href='""'></a>"

3.在中間寫兩個+號，并將參數寫在+號中間

var url = "http://www.baidu.com"; var html = "<a href='"+url+"'></a>"

使用這個步驟一般就不會出錯了，外層是單引號的相同。

2.復雜參數拼接問題(JSON對象拼接)

拼接字符串或數字等簡單參數，可以隨意使用單引號或雙引號當作外層，但是在復雜的數據結構當作參數的時候就有區別了，比如JSON對象。

(1)Plan A 單引號做外層

var obj = {username: 111}; var objStr = JSON.stringify(obj); var html = '<a href="javascript:doThing('+objStr+')">doThing</a>'; $("body").append(html); function doThing(param){console.log(param); }

tips: 這里JSON.stringify(obj) 是因為參數里不能直接傳遞json對象，需要轉成json字符串，這里使用的是外層用單引號，里層用雙引號，理論上點擊a標簽的時候會打印json字符串的。但是，事實并非如此：

再看看添加到頁面上的a標簽是啥樣的：

顯然這里引號嵌套是錯的，所以點擊會報錯的。那么問題來了，為什么會變成這樣呢？？？這個問題先留著后面討論，先試下另一種方案。

(2)Plan B 雙引號做外層

var obj = {username: 111}; var objStr = JSON.stringify(obj); var html = "<a href='javascript:doThing("+objStr+")'>doThing</a>"; $("body").append(html); function doThing(param){console.log(param); }

這里將html 的雙引號和單引號替換后，結果驚人：

竟然是打印出來了，而且還是json對象，不是json字符串。

3.總結

1.json/obj對象不能直接當參數拼接字符串，需要轉換成字符串；
2.JSON.stringify()函數默認會將json對象中的key 加上雙引號；

也就是說我們要拼接的參數(json字符串)里面默認就有了雙引號，這里只有外層用雙引號才能正確拼接。

總結

以上是生活随笔為你收集整理的js字符串拼接中关于单引号和双引号的那些事的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。