请教
老师问题如下图
我记得，之前课程有讲过
单引号可以嵌套双引号
双引号可以嵌套单引号
如果双引号嵌套单引号，需要使用转义字符 \
这里显示的是单引号嵌套单引号，且能够正确编译，就很疑惑了，请老师指导一下。
相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单指拖动</title>
<style>
.backtop{
position: fixed;
right: 20px;
bottom: 20px;
width: 45px;
height: 45px;
line-height: 45px;
text-align: center;
background-color: rgba(0,0,0,0.6);
border-radius: 50%;
color: #fff;
font-size: 30px;
-webkit-tap-highlight-color: transparent;
/* transform: translate3d(x,y,0); // GPU 图形处理单元 */
}
</style>
</head>
<body>
<a href="#" id="backtop" class="backtop">↑</a>
<script>
var backtop = document.getElementById('backtop');
var curPoint = {
x:0,
y:0
};
backtop.addEventListener('click',function(){
move(this, -10 + curPoint.x,-10 + curPoint.y);
curPoint.x += -10;
curPoint.y += -10;
},false);
function move(el,x,y){
// x=x||0; 表示，如果没有传x轴的值，就给x一个默认值为0
x=x || 0;
y=y || 0;
el.style.transform = 'translate3d('+ x +'px,' + y +'px,0)';
}
// 双引号编译后，页面是没有效果的，为什么呢？
el.style.transform = "translate3d('+ x +'px,' + y +'px,0)";
}
</script>
</body>
</html>
正在回答
同学你好，解答如下：
1、“如果双引号嵌套单引号，需要使用转义字符 \ ”这句话，老师不是很理解。印象中，是不需要转义的，如下：
html、css中：
js中：
2、transform值是字符串形式，形式是这样的：translate3d(x, y,z)，比如translate3d(1px, 2px,3px)）；并且translate3d(x, y,z)中没有引号，所以不用单双引号嵌套。
'translate3d(' + x + 'px,' + y + 'px,0)'解析后的形式如下：
它符合translate3d(x, y,z)的形式，所以有效。
而另一种写法，解析后的形式如下：
它的形式与translate3d(x, y,z)不一样，所以没有效果。
3、使用加号拼接字符串时，字符串要使用引号包裹起来，并且起包裹作用的引号要成对，如下写法是符合要求的：
而如下写法，起包裹作用的引号不成对，所以写法本身就不对：
可以改成如下形式：
祝学习愉快！
-
日拱一卒_ #1
1. 我的本意是想请教老师，
“单引号可以嵌套双引号
双引号可以嵌套单引号
如果双引号嵌套双引号，需要使用转义字符 \ 。（单引号同理）
这里显示的是单引号嵌套单引号，且能够正确编译，就很疑惑了，请老师指导一下。”
2. 看了老师 2 的讲解，还是不能理解为什么打印的结果不一样。
看完 3 的讲解，明白我错的原因了，想来也真是无敌的蠢，将这段代码理解为引号的嵌套， 居然栽到这里了。
原来的理解是这样的，所以很迷惑：
看完老师的讲解的理解：
2021-05-13 17:56:59
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星