html拼接时,a标签的函数传参时,为什么要加引号?跟转义有无关系?(大家是怎么看到这篇博客的求告知,有什么疑问想说的欢迎评论)

本文探讨了在HTML拼接时,为何在a标签的函数传参中有时需要加引号,以及这与转义的关系。通过实例分析,总结出:1. 数字型参数如1,加不加引号均可;2. 字符串型参数如'a', 'a123',必须加引号;3. 加引号能确保安全。作者分享了自己的思考过程和F12调试的发现。" 112944020,10540744,Cordova与Android Studio Gradle版本冲突解决,"['Cordova', 'Android开发', 'Gradle构建', '版本管理']

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

昨天发现了这个问题,只百度到了一个比较类似的答案,他说的是一定要加引号;可是我自己练的时候,不加也可以,所以就一直有疑问。
然后今天,在F12的帮助下,终于明白了,下面一起看心路历程:

在跟公司代码的时候,

var edit = 
'<a href="javascript:editRecord(\''+_id+'\')" >编辑</a>';

首先解释一下这段代码,不解释这段code的用途,只解释这段code是什么。
可以看出,由很多引号组成,不管是单引号还是双引号。
首先,我们看一下如果正常写应该怎么写,就是不拼接,直接写在body里面的是时候是怎么写的:

<a href="javascript:editRecord()" >编辑</a>

而现在的情况是,把整个a标签里面的内容作为字符串赋值给一个变量,还涉及到把常量2变成一个变量。

第一步:变成字符串
'<a href="javascript:editRecord()" >编辑</a>'
第二步:加变量
'<a href="javascript:editRecord('+_id+')" >编辑</a>'
这个时候我们把这个字符串拆开了,变成:字符串+变量+字符串
用+作连接符,++之间放变量

想到这里的时候,我就觉得这样已经很完美了,就这样用不就行了嘛,简单易懂。所以,越看id两边的\’转义符越奇怪,为什么要加这个呢,然后我就觉得自己试试,看看不加行不行。

var variable = '1';
var str = 
'<a href="javascript:aaa(' + variable + ')">clickhere</a>';
document.getElementById("span").innerHTML = str;

function aaa(i) {
  alert(i); //1
}

这个时候可以正常弹出1,于是我更加坚定了自己的想法,可以不加的嘛。
所以疑惑加深了,既然可以不加,为什么要加,我这个人呢最怕麻烦,能省事一点就省事一点,虽然这篇博客有点过于详细了。

各种百度,没有我想要的答案,于是洗个澡,关灯趴在床上,冥思苦想。

不如,f12试试吧,看看变量怎么传的:

这里写图片描述

拼的字符串在html解析之后,变成了我们想要的样子。这时候,我发现了一个问题:1是没有引号的。
定义变量时,是一个字符串,可是传参时,只传了字面值,就是说++取得是1 ,而不是‘1’,而有趣的是

function aaa(i) {
    if(i==1){
        alert("1");//1
    }
    if(i=='1'){
        alert("'1'"); //'1'
    }
}
都可以输出。

刚才是数字。如果是字符串里面有字母的话,比如,
(下面是特别注意)

var a='sdw123';
因为++取的值是sdw123,但是我们传参的时候不能这么传aaa(sdw123),
应该是aaa('sdw123');
意味着我们要在++两边加上'',而这就是那个看似转义符的由来,那个转义符的作用实际上是将参数变为字符串。
所以,第三步,
'<a href="javascript:editRecord('+_id+')" >编辑</a>'
在++两边加上转义符,
实际上不是加转义符,而是要加引号,使其变成字符串,
怎么在++两边加'',
在保证字符串可以连接且变量起作用的情况下,只能这么加:
'<a href="javascript:editRecord(\''+_id+'\')" >编辑</a>'
(
  两个转义符是一对;
  把引号放在了字符串内部,不影响字符串连接,变量也能用;
  在html转义后,
  就是下图:是带引号的

)

这里写图片描述

至此,引号加不加分情况,
1.参数为1,’1’,这种数字型参数时,加不加都行;
2.参数为‘a’,‘a123’这种字符串型,必须加;
3.加的话可以确保万无一失。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值