动态构建HTML字符串：在JavaScript中安全嵌入变量的技巧

本教程详细讲解了如何在javascript中将变量动态地嵌入到html字符串中，以构建可用的超链接或其他html内容。文章将阐述传统字符串拼接和现代模板字面量两种方法，并强调其正确语法，帮助开发者避免常见的引用错误，确保生成的html字符串功能完整。

在Web开发中，我们经常需要根据动态数据生成HTML内容。一个常见场景是在HTML字符串中嵌入JavaScript变量，例如为链接的href属性动态设置参数。然而，如果不了解正确的语法，这种操作很容易导致字符串中断或生成无效的HTML。

理解常见的陷阱

开发者在尝试将JavaScript变量直接嵌入到HTML字符串时，常犯的错误是将变量的拼接操作误置于字符串字面量内部。例如，以下尝试是无效的：

// 错误示例：试图在字符串字面量内部进行变量拼接
// 假设 event.latlng.lat 和 event.latlng.lng 已经获取到
const brokenLinkString = "<h2>New Launch</h2><br><a href='/map/create-new?lat='+ event.latlng.lat + '&lng=' + event.latlng.lng +'>Create</a>";
// 结果：href属性会被错误解析为 '/map/create-new?lat='，因为单引号过早关闭了字符串字面量。

问题在于JavaScript的字符串字面量由引号（单引号或双引号）界定。一旦遇到匹配的引号，字符串字面量就结束了。在上面的例子中，'/map/create-new?lat=' 是一个完整的字符串字面量，后面的 + event.latlng.lat + '&lng=' + event.latlng.lng 不再是 href 属性值的一部分，而是与 <h2>...</h2> 字符串进行拼接的JavaScript表达式，这导致了语法和逻辑上的错误。

要正确地将变量嵌入到HTML字符串中，我们需要在JavaScript层面进行字符串的拼接操作。

立即学习“Java免费学习笔记（深入）”；

方法一：使用标准字符串拼接（+ 运算符）

这是最直观的拼接方式，通过 + 运算符将多个字符串片段和变量连接起来。关键在于，变量必须位于字符串字面量之外，作为独立的表达式参与拼接。

// 假设 event.latlng.lat 和 event.latlng.lng 已经获取到
const latitude = event.latlng.lat;   // 示例值：35.7
const longitude = event.latlng.lng; // 示例值：-83.55

const htmlString = "<h2>New Launch</h2><br><a href='/map/create-new?lat=" + latitude + "&lng=" + longitude + "'>Create</a>";

console.log(htmlString);
// 预期输出：
// "<h2>New Launch</h2><br><a href='/map/create-new?lat=35.7&lng=-83.55'>Create</a>"

注意事项：

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

36

查看详情

• 确保每个字符串片段都用引号正确地包围。
• 变量名直接写在 + 运算符之间。
• 如果字符串中包含变量，并且变量本身可能包含特殊HTML字符（如 < > & " '），则需要进行HTML实体编码以防止跨站脚本攻击（XSS）或其他渲染问题。在本例中，latitude 和 longitude 是数字，通常不需要编码，但对于用户输入或其他文本内容，这一点至关重要。

方法二：使用模板字面量（Template Literals，推荐）

ES6（ECMAScript 2015）引入的模板字面量提供了一种更简洁、更易读的方式来创建包含嵌入表达式的字符串。它们使用反引号（`）而不是单引号或双引号，并通过 ${expression} 语法嵌入变量或任何JavaScript表达式。

// 假设 event.latlng.lat 和 event.latlng.lng 已经获取到
const latitude = event.latlng.lat;   // 示例值：35.7
const longitude = event.latlng.lng; // 示例值：-83.55

const htmlString = `<h2>New Launch</h2><br><a href='/map/create-new?lat=${latitude}&lng=${longitude}'>Create</a>`;

console.log(htmlString);
// 预期输出：
// "<h2>New Launch</h2><br><a href='/map/create-new?lat=35.7&lng=-83.55'>Create</a>"

模板字面量的优势：

• 可读性强： HTML结构和变量一目了然，无需频繁切换引号和 + 运算符。
• 多行支持： 模板字面量可以跨越多行，方便编写复杂的HTML结构而无需使用 \n 或 \ 进行转义。
• 表达式嵌入： ${} 中可以放入任何JavaScript表达式，而不仅仅是变量。

实践应用与安全考量

生成这样的HTML字符串后，你可以将其赋值给DOM元素的 innerHTML 属性，或者将其作为参数传递给需要HTML字符串的第三方组件（正如原问题中所述，需要将此字符串传递给一个组件）。

// 示例：将生成的HTML字符串插入到DOM中（如果需要）
const container = document.getElementById('some-container');
if (container) {
    container.innerHTML = htmlString;
}

// 示例：作为参数传递给组件
// someComponent.render(htmlString);

重要安全提示： 如果 latitude 或 longitude（或任何嵌入到HTML中的变量）是来自用户输入或不可信源的数据，务必在使用前对其进行HTML实体编码（Sanitization）。否则，恶意用户可以通过注入脚本（XSS攻击）来破坏你的网站或窃取用户数据。对于纯数字或已知安全的数据，通常无需编码。

总结

在JavaScript中动态构建HTML字符串并嵌入变量，核心在于正确处理字符串的拼接。无论是使用传统的 + 运算符还是更现代、更推荐的模板字面量，理解字符串字面量的边界和变量的插入方式至关重要。模板字面量以其简洁和可读性，成为现代JavaScript项目中构建动态HTML字符串的首选方法。通过遵循这些最佳实践，开发者可以高效且安全地生成复杂的动态Web内容。

以上就是动态构建HTML字符串：在JavaScript中安全嵌入变量的技巧的详细内容，更多请关注php中文网其它相关文章！