js字符串拼接中关于单引号和双引号的那些事
在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字符串拼接中关于单引号和双引号的那些事相关推荐
- php单双引号拼接,js字符串拼接中关于单引号和双引号的那些事
在js开发中一般我们多多少少都会用到字符串拼接,新手们经常会遇到各种错误,其中关于字符串拼接的问题尤其重要,今天来谈一谈. 1.常用字符串拼接 当我们从后台请求到数据时,传统渲染我们就会将请求到的数据 ...
- js拼装html单引号双引号,js、html中的单引号、双引号及其转义使用
js.html中的单引号.双引号及其转义使用 在js中对相关字符做判断或取值的时候很多情况下都会用到这些. ------ 在一个网页中的按钮,写onclick事件的处理代码,不小心写成如下: IE提示 ...
- js html 单引号,JS 和 HTML 中的单引号与双引号
JS中的单引号与双引号 HTML中的单引号与双引号很简单,就是两个字符实体: 显示 描述 实体名称 实体编号 " 双引号.引号 " " ' 单引号.撇号 ' ' x 1 ...
- html中单引号与双引号区别,JS 和 HTML 中的单引号与双引号
JS中的单引号与双引号 HTML中的单引号与双引号很简单,就是两个字符实体: 显示 描述 实体名称 实体编号 " 双引号.引号 " " ' 单引号.撇号 ' ' x 1 ...
- 双引号用html语言写,js、html中的单引号、双引号及其转义使用.doc
js.html中的单引号.双引号及其转义使用 js.html中的单引号.双引号及其转义使用js.html中的单引号.双引号及其转义使用这几天一直在画页面,身为开发人员的我之所以要画页面是因为当前项目中 ...
- JavaScript # 前端 js、html中的单引号、双引号及其转义使用
修改之前的代码: menu = " <dd><a href='javascript:;'kit-target data-options='{url:'test.aspx', ...
- Python中的单引号和双引号是否存在区别
在使用Python的过程中,一直在记着input中使用单引号,print中使用双引号,还经常搞混,会出错, name = input('请输入你的姓名:') print("你好," ...
- 已解决Python向数据库插入数据的字符串中含有单引号或双引号报错
已解决Python向数据库插入数据的字符串中含有单引号或双引号报错:(102, b"Incorrect syntax near 'S'.DB-Lib error message 20018, ...
- php双引号表示什么,PHP中的单引号和双引号字符串有什么区别?
PHP中的单引号和双引号字符串有什么区别? 我不是PHP编程的专家,但我有点困惑为什么我在PHP中看到一些代码用单引号放入字符串,有时用双引号. 我只是在.NET或C语言中知道,如果它是单引号,这意味 ...
最新文章
- 考考基础部分,谈谈Java集合中HashSet的原理及常用方法
- 多路归并排序_1600W整数排序多路归并
- 图形图像技术在手游中的潜在应用
- 【软件开发底层知识修炼】十六 快速学习GDB调试三 使用GDB的数据断点监测变量是否改变
- LeetCode160 | Intersection-of-two-linked-lists
- python cls
- 学习SQL:关系类型
- win10wifi间歇性断网重启后恢复_实用!Xbox Series X 在重启后也能快速恢复之前的游戏状态...
- UWB与蓝牙AOA定位技术简要对比
- H.264编码实验--JM18.6H264Visa
- 孩子小学总喜欢用计算机做数学,数学到底该怎样学?真实用!
- 1977年图灵奖--约翰·巴克斯简介
- 苹果邮箱登录入口_LOL手游只有一种登录方式怎么办?只有拳头账号登录入口解决方法...
- 谷歌浏览器下载的内容老是自动打开
- 翻译|《Word Power Made Easy》(vii~xii)
- Matlab绘制阶梯形图
- VIO综述论文:A review of visual inertial odometry from filtering and optimisation perspectives
- 素描的正方体怎么绘制面
- 基于模拟退火算法改进粒子群SA-PSO优化shubert函数,测试函数shubert(十),MATLAB编程实现
- python 非线性规划
热门文章
- 【黑金ZYNQ7000系列原创视频教程】02.视频接口mdash;mdash;hdmi编码输出实验
- rp2836 网卡以及串口与接插件位置关系
- 【C++基金会 06】explictkeyword
- 使用android快速开发框架afinal的FinalDb操作android数据库
- Sybase数据库优化手册
- Exchange2010应用地址列表
- Quest Recovery Manager for Active Directory的使用(一)
- Silverlight Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)...
- 确保您的Silverlight 1.0运行时间组件是最新版本
- 咨询14个CEO,花了20小时,建设顶级数据团队的干货,被疯狂点赞