MDN可访问标签代码中模板字面量#符号的作用解析

核心作用 #

这段代码里的模板字面量是用来动态生成匹配对应tab面板的CSS选择器，最终通过querySelector定位到要显示的tab面板元素。

逐部分拆解 #

1. 模板字面量的工作逻辑
   ES6的模板字面量用反引号`包裹，其中${JS表达式}的部分会先执行表达式，把结果替换到字符串中。这里的${target.getAttribute("aria-controls")}会获取你点击的tab按钮（target）上aria-controls属性的取值。

2. #符号的含义
   #是CSS选择器里的ID选择符，用来指定要查找的元素的ID。比如#panel-1就会匹配页面上id="panel-1"的元素。

3. 结合代码场景理解
   看HTML里的tab按钮结构：

<button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0">First Tab</button>

这个按钮的aria-controls属性值是panel-1，正好对应下方的tab面板：

<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">...</div>

当你点击这个tab时，target.getAttribute("aria-controls")会拿到panel-1，模板字面量拼接后就生成了选择器#panel-1，querySelector用这个选择器找到对应的面板，再移除hidden属性让它显示出来。

4. 等效的传统写法
   如果不用模板字面量，这段代码可以写成：

.querySelector("#" + target.getAttribute("aria-controls"))

模板字面量只是让字符串拼接的写法更直观、可读性更强。

内容的提问来源于stack exchange，提问作者Naj