### 如何在 HTML 中
使用 JavaScript
模板字符串
#### 利用事件监听器和 AJAX 请求更新页面内容
当希望利用
模板字符串动态生成HTML并将其插入到DOM节点中时，可以通过编写JavaScript代码实现这一功能。例如，在点击按钮触发AJAX请求获取数据之后，再通过
模板字符串创建表格行，并最终把这些新创建的内容设置给指定的DOM元素。
```javascript
$('#btn'
)[0].addEventListener
('click', function
() {
$.get
('/student/getCourse', function
(data
) {
let content = data.map
(item =>
`<tr>
<td>
${item.courseName}</td>
<td>
${item.courseScore}</td>
</tr>`
).join
(''
);
document.querySelector
('tbody'
).innerHTML = content;
}
);
}
);
```
此段脚本展示了如何结合
jQuery库发起GET请求取得课程列表信息，并运用ES6引入的反引号（\`）定义的
模板字串语法来拼接含有变量插值的新表单结构[^2]。
#### 创建复杂 DOM 结构
除了简单的文本替换外，还可以借助
模板字符串轻松地建立更为复杂的文档对象模型片段：
```html
<div id="container"></div>
<script type="text/javascript">
const title = 'My Courses';
const courses = [
{ name: 'Mathematics', score: 95 },
{ name: 'Physics', score: 87 }
];
//
使用模板标签函数构建安全的HTML内容
function safeHtml
(strings, ...values
){
const escapedValues = values.map
(value =>
typeof value === 'string' ? value.replace
(/</g,'<'
).replace
(/>/g,'>'
) : value
);
return strings.reduce
((acc, str,i
)=>
acc + str +
(escapedValues[i] || ''
), ''
);
}
document.getElementById
('container'
).innerHTML =
safeHtml`<h1>
${title}</h1><ul>
${
courses.map
(course=>`<li>Subject:
${course.name}, Score:
${course.score}</li>`
).join
(''
)
}</ul>`;
</script>
```
上述例子不仅说明了怎样把数组映射成一系列列表项，还示范了一种防止XSS攻击的
方法——即自定义
模板标记函数`safeHtml
()`用于转义潜在危险字符[^3]。
#### 插入多行文本与表达式求值
对于那些需要跨越多行显示的文字或是包含条件判断、循环逻辑的情况来说，
模板字符串同样适用。下面的例子演示了一个带有if语句控制流以及for...of迭代过程的场景：
```html
<pre id="output"></pre>
<script type="text/javascript">
let outputText = `
User Information:
Name: John Doe
Age: 30
Roles:
${
(() => {
const roles = ['Admin', 'Editor'];
let roleList = '';
for
(let role of roles
){
roleList += `-
${role}\n`;
}
return roleList;
}
)()}
`;
document.getElementById
('output'
).textContent=outputText;
</script>
```
这里采用立即执行匿名函数的方式实现了较为复杂的业务需求，同时保持了良好的可读性和维护性[^1]。
博客围绕jQuery展开，虽未给出具体内容，但jQuery是前端开发中常用的库，能简化HTML文档遍历、事件处理、动画设计等操作，在前端开发领域有重要作用。
扫一扫
3562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
