本教程详细介绍了如何在
java
script中安全且高效地动态构建包含变量的
html
字符串，尤其针对href等属性的场景。我们将探讨传统字符串拼接和
es6
模板字面量两种核心方法，并通过示例代码演示如何避免常见错误，确保生成的html字符串结构正确且功能正常，同时提供重要的安全和实践建议。
在
前端
开发中，我们经常需要根据动态数据生成HTML片段。一个常见的场景是在HTML字符串的属性（如href、src）中嵌入JavaScript变量。然而，直接在字符串字面量内部尝试插入JavaScript变量会导致语法错误或意外的行为。本文将详细阐述如何在JavaScript中正确地构建包含动态变量的HTML字符串。
理解问题根源
考虑以下HTML链接字符串，其中包含经纬度信息：
当我们需要将35.7和-83.55替换为JavaScript变量（例如event.latlng.lat和event.latlng.lng）时，常见的错误尝试如下：
这种写法的问题在于，JavaScript解释器会将其视为一个以"
解释：
在这种方法中，我们通过将字符串字面量在变量位置断开，然后使用+运算符将变量的值插入，再与后续的字符串拼接起来。这样，JavaScript会先计算变量的值，然后将其转换为字符串，最终形成一个完整的HTML字符串。
优点：
兼容性好，适用于所有支持JavaScript的环境。
缺点：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
当需要插入的变量较多或HTML结构复杂时，代码会变得冗长且可读性差，容易出错。
引号的匹配和管理可能变得复杂。
方法二：模板字面量（Template Literals - ES6+）
模板字面量是ES6（ECMAScript 2015）引入的新特性，它提供了一种更简洁、更可读的方式来处理字符串，尤其是包含变量和多行文本的字符串。
语法特点：
使用反引号（`）而不是单引号或双引号来定义字符串。
在字符串中，可以直接使用${variable}的语法来嵌入JavaScript表达式或变量。
示例代码：
"New Test
Create""New Launch
Create"New Launch
const lat = 35.7; // 模拟 event.latlng.lat
const lng = -83.55; // 模拟 event.latlng.lng
// 使用字符串拼接构建完整的HTML字符串
const htmlStringConcatenation = "New Launch
Create";
console.log(htmlStringConcatenation);
// 输出: "New Launch
Create"const lat = 35.7; // 模拟 event.latlng.lat
const lng = -83.55; // 模拟 event.latlng.lng
// 使用模板字面量构建完整的HTML字符串
const htmlStringTemplateLiteral = `New Launch
Create`;
console.log(htmlStringTemplateLiteral);
// 输出: "New Launch
Create"// 假设这是你要传递给组件的最终字符串
const finalHtmlString = `New Launch
Create`;
// 假设你有一个组件或函数接收这个字符串
someComponent.renderContent(finalHtmlString);