在JavaScript中动态构建包含变量的HTML字符串教程

本教程详细介绍了如何在javascript中安全且高效地动态构建包含变量的html字符串，尤其针对href等属性的场景。我们将探讨传统字符串拼接和es6模板字面量两种核心方法，并通过示例代码演示如何避免常见错误，确保生成的html字符串结构正确且功能正常，同时提供重要的安全和实践建议。

在前端开发中，我们经常需要根据动态数据生成HTML片段。一个常见的场景是在HTML字符串的属性（如href、src）中嵌入JavaScript变量。然而，直接在字符串字面量内部尝试插入JavaScript变量会导致语法错误或意外的行为。本文将详细阐述如何在JavaScript中正确地构建包含动态变量的HTML字符串。

理解问题根源

考虑以下HTML链接字符串，其中包含经纬度信息：

"
New Test

Create"

当我们需要将35.7和-83.55替换为JavaScript变量（例如event.latlng.lat和event.latlng.lng）时，常见的错误尝试如下：

"
New Launch

Create"

这种写法的问题在于，JavaScript解释器会将其视为一个以”

New Launch

%E7%AB%8B%E5%8D%B3%E5%AD%A6%E4%B9%A0%E2%80%9CJava%E5%85%8D%E8%B4%B9%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E6%B7%B1%E5%85%A5%EF%BC%89%E2%80%9D%EF%BC%9B

%E6%AD%A3%E7%A1%AE%E7%9A%84%E5%81%9A%E6%B3%95%E6%98%AF%EF%BC%8C%E6%88%91%E4%BB%AC%E5%BF%85%E9%A1%BB%E5%9C%A8JavaScript%E5%B1%82%E9%9D%A2%E5%AE%8C%E6%88%90%E6%95%B4%E4%B8%AAHTML%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E6%9E%84%E5%BB%BA%EF%BC%8C%E5%B0%86%E5%8F%98%E9%87%8F%E7%9A%84%E5%80%BC%E4%BD%9C%E4%B8%BA%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E4%B8%80%E9%83%A8%E5%88%86%E6%8F%92%E5%85%A5%E3%80%82%E4%BB%A5%E4%B8%8B%E4%BB%8B%E7%BB%8D%E4%B8%A4%E7%A7%8D%E4%B8%BB%E8%A6%81%E6%96%B9%E6%B3%95%E3%80%82

%E6%96%B9%E6%B3%95%E4%B8%80%EF%BC%9A%E4%BC%A0%E7%BB%9F%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%8B%BC%E6%8E%A5%EF%BC%88String%20Concatenation%EF%BC%89

%E8%BF%99%E6%98%AFJavaScript%E4%B8%AD%E6%9C%80%E5%9F%BA%E7%A1%80%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%93%8D%E4%BD%9C%E6%96%B9%E5%BC%8F%EF%BC%8C%E9%80%9A%E8%BF%87+%E8%BF%90%E7%AE%97%E7%AC%A6%E5%B0%86%E5%A4%9A%E4%B8%AA%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%92%8C%E5%8F%98%E9%87%8F%E8%BF%9E%E6%8E%A5%E8%B5%B7%E6%9D%A5%E3%80%82

%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81%EF%BC%9A

%E5%81%87%E8%AE%BE%E6%88%91%E4%BB%AC%E6%9C%89%E4%BB%A5%E4%B8%8B%E5%8F%98%E9%87%8F%EF%BC%9A

const lat = 35.7; // 模拟 event.latlng.latconst lng = -83.55; // 模拟 event.latlng.lng// 使用字符串拼接构建完整的HTML字符串const htmlStringConcatenation = "
New Launch

Create";console.log(htmlStringConcatenation);// 输出: "
New Launch

Create"

%E8%A7%A3%E9%87%8A%EF%BC%9A%0A%E5%9C%A8%E8%BF%99%E7%A7%8D%E6%96%B9%E6%B3%95%E4%B8%AD%EF%BC%8C%E6%88%91%E4%BB%AC%E9%80%9A%E8%BF%87%E5%B0%86%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%AD%97%E9%9D%A2%E9%87%8F%E5%9C%A8%E5%8F%98%E9%87%8F%E4%BD%8D%E7%BD%AE%E6%96%AD%E5%BC%80%EF%BC%8C%E7%84%B6%E5%90%8E%E4%BD%BF%E7%94%A8+%E8%BF%90%E7%AE%97%E7%AC%A6%E5%B0%86%E5%8F%98%E9%87%8F%E7%9A%84%E5%80%BC%E6%8F%92%E5%85%A5%EF%BC%8C%E5%86%8D%E4%B8%8E%E5%90%8E%E7%BB%AD%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%8B%BC%E6%8E%A5%E8%B5%B7%E6%9D%A5%E3%80%82%E8%BF%99%E6%A0%B7%EF%BC%8CJavaScript%E4%BC%9A%E5%85%88%E8%AE%A1%E7%AE%97%E5%8F%98%E9%87%8F%E7%9A%84%E5%80%BC%EF%BC%8C%E7%84%B6%E5%90%8E%E5%B0%86%E5%85%B6%E8%BD%AC%E6%8D%A2%E4%B8%BA%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%8C%E6%9C%80%E7%BB%88%E5%BD%A2%E6%88%90%E4%B8%80%E4%B8%AA%E5%AE%8C%E6%95%B4%E7%9A%84HTML%E5%AD%97%E7%AC%A6%E4%B8%B2%E3%80%82

%E4%BC%98%E7%82%B9%EF%BC%9A

%E5%85%BC%E5%AE%B9%E6%80%A7%E5%A5%BD%EF%BC%8C%E9%80%82%E7%94%A8%E4%BA%8E%E6%89%80%E6%9C%89%E6%94%AF%E6%8C%81JavaScript%E7%9A%84%E7%8E%AF%E5%A2%83%E3%80%82

%E7%BC%BA%E7%82%B9%EF%BC%9A

%E5%BD%93%E9%9C%80%E8%A6%81%E6%8F%92%E5%85%A5%E7%9A%84%E5%8F%98%E9%87%8F%E8%BE%83%E5%A4%9A%E6%88%96HTML%E7%BB%93%E6%9E%84%E5%A4%8D%E6%9D%82%E6%97%B6%EF%BC%8C%E4%BB%A3%E7%A0%81%E4%BC%9A%E5%8F%98%E5%BE%97%E5%86%97%E9%95%BF%E4%B8%94%E5%8F%AF%E8%AF%BB%E6%80%A7%E5%B7%AE%EF%BC%8C%E5%AE%B9%E6%98%93%E5%87%BA%E9%94%99%E3%80%82%E5%BC%95%E5%8F%B7%E7%9A%84%E5%8C%B9%E9%85%8D%E5%92%8C%E7%AE%A1%E7%90%86%E5%8F%AF%E8%83%BD%E5%8F%98%E5%BE%97%E5%A4%8D%E6%9D%82%E3%80%82

%E6%96%B9%E6%B3%95%E4%BA%8C%EF%BC%9A%E6%A8%A1%E6%9D%BF%E5%AD%97%E9%9D%A2%E9%87%8F%EF%BC%88Template%20Literals%20-%20ES6+%EF%BC%89

%E6%A8%A1%E6%9D%BF%E5%AD%97%E9%9D%A2%E9%87%8F%E6%98%AFES6%EF%BC%88ECMAScript%202015%EF%BC%89%E5%BC%95%E5%85%A5%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7%EF%BC%8C%E5%AE%83%E6%8F%90%E4%BE%9B%E4%BA%86%E4%B8%80%E7%A7%8D%E6%9B%B4%E7%AE%80%E6%B4%81%E3%80%81%E6%9B%B4%E5%8F%AF%E8%AF%BB%E7%9A%84%E6%96%B9%E5%BC%8F%E6%9D%A5%E5%A4%84%E7%90%86%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%8C%E5%B0%A4%E5%85%B6%E6%98%AF%E5%8C%85%E5%90%AB%E5%8F%98%E9%87%8F%E5%92%8C%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2%E3%80%82

%E8%AF%AD%E6%B3%95%E7%89%B9%E7%82%B9%EF%BC%9A

%E4%BD%BF%E7%94%A8%E5%8F%8D%E5%BC%95%E5%8F%B7%EF%BC%88%60%EF%BC%89%E8%80%8C%E4%B8%8D%E6%98%AF%E5%8D%95%E5%BC%95%E5%8F%B7%E6%88%96%E5%8F%8C%E5%BC%95%E5%8F%B7%E6%9D%A5%E5%AE%9A%E4%B9%89%E5%AD%97%E7%AC%A6%E4%B8%B2%E3%80%82%E5%9C%A8%E5%AD%97%E7%AC%A6%E4%B8%B2%E4%B8%AD%EF%BC%8C%E5%8F%AF%E4%BB%A5%E7%9B%B4%E6%8E%A5%E4%BD%BF%E7%94%A8%24%7Bvariable%7D%E7%9A%84%E8%AF%AD%E6%B3%95%E6%9D%A5%E5%B5%8C%E5%85%A5JavaScript%E8%A1%A8%E8%BE%BE%E5%BC%8F%E6%88%96%E5%8F%98%E9%87%8F%E3%80%82

%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81%EF%BC%9A

const lat = 35.7; // 模拟 event.latlng.latconst lng = -83.55; // 模拟 event.latlng.lng// 使用模板字面量构建完整的HTML字符串const htmlStringTemplateLiteral = `
New Launch

Create`;console.log(htmlStringTemplateLiteral);// 输出: "
New Launch

Create"

%E8%A7%A3%E9%87%8A%EF%BC%9A%0A%E6%A8%A1%E6%9D%BF%E5%AD%97%E9%9D%A2%E9%87%8F%E4%BD%BF%E5%BE%97%E5%9C%A8%E5%AD%97%E7%AC%A6%E4%B8%B2%E4%B8%AD%E5%B5%8C%E5%85%A5%E5%8F%98%E9%87%8F%E5%8F%98%E5%BE%97%E9%9D%9E%E5%B8%B8%E7%9B%B4%E8%A7%82%E3%80%82%E4%BD%A0%E5%8F%AA%E9%9C%80%E5%B0%86%E5%8F%98%E9%87%8F%E6%88%96%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%8C%85%E8%A3%B9%E5%9C%A8%24%7B%7D%E4%B8%AD%EF%BC%8CJavaScript%E5%BC%95%E6%93%8E%E4%BC%9A%E8%87%AA%E5%8A%A8%E5%B0%86%E5%85%B6%E6%B1%82%E5%80%BC%E5%B9%B6%E6%8F%92%E5%85%A5%E5%88%B0%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E7%9B%B8%E5%BA%94%E4%BD%8D%E7%BD%AE%E3%80%82

%E4%BC%98%E7%82%B9%EF%BC%9A

%E5%8F%AF%E8%AF%BB%E6%80%A7%E5%BC%BA%EF%BC%9A%20%E4%BB%A3%E7%A0%81%E6%9B%B4%E6%B8%85%E6%99%B0%EF%BC%8C%E6%9B%B4%E6%8E%A5%E8%BF%91%E6%9C%80%E7%BB%88%E7%9A%84HTML%E7%BB%93%E6%9E%84%E3%80%82%E7%AE%80%E6%B4%81%EF%BC%9A%20%E9%81%BF%E5%85%8D%E4%BA%86%E5%A4%A7%E9%87%8F%E7%9A%84+%E8%BF%90%E7%AE%97%E7%AC%A6%E5%92%8C%E5%BC%95%E5%8F%B7%E3%80%82%E6%94%AF%E6%8C%81%E5%A4%9A%E8%A1%8C%EF%BC%9A%20%E6%A8%A1%E6%9D%BF%E5%AD%97%E9%9D%A2%E9%87%8F%E5%8F%AF%E4%BB%A5%E7%9B%B4%E6%8E%A5%E5%8C%85%E5%90%AB%E6%8D%A2%E8%A1%8C%E7%AC%A6%EF%BC%8C%E6%97%A0%E9%9C%80%E4%BD%BF%E7%94%A8%5Cn%E3%80%82

%E7%BC%BA%E7%82%B9%EF%BC%9A

%E9%9C%80%E8%A6%81ES6%E5%8F%8A%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC%E7%9A%84JavaScript%E7%8E%AF%E5%A2%83%E6%94%AF%E6%8C%81%EF%BC%88%E7%8E%B0%E4%BB%A3%E6%B5%8F%E8%A7%88%E5%99%A8%E5%92%8CNode.js%E9%80%9A%E5%B8%B8%E9%83%BD%E5%B7%B2%E6%94%AF%E6%8C%81%EF%BC%89%E3%80%82

%E5%AE%9E%E9%99%85%E5%BA%94%E7%94%A8%E4%B8%8E%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9

%E5%8F%98%E9%87%8F%E6%9D%A5%E6%BA%90%EF%BC%9A%20%E5%9C%A8%E5%AE%9E%E9%99%85%E5%BA%94%E7%94%A8%E4%B8%AD%EF%BC%8Clat%E5%92%8Clng%E5%8F%AF%E8%83%BD%E6%9D%A5%E8%87%AA%E7%94%A8%E6%88%B7%E4%BA%A4%E4%BA%92%EF%BC%88%E5%A6%82event.latlng%EF%BC%89%E3%80%81API%E5%93%8D%E5%BA%94%E6%88%96%E8%AE%A1%E7%AE%97%E7%BB%93%E6%9E%9C%E3%80%82%E7%A1%AE%E4%BF%9D%E8%BF%99%E4%BA%9B%E5%8F%98%E9%87%8F%E5%9C%A8%E6%9E%84%E5%BB%BAHTML%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%97%B6%E6%98%AF%E5%8F%AF%E7%94%A8%E7%9A%84%E3%80%82

%E5%AE%89%E5%85%A8%E6%80%A7%EF%BC%88XSS%E9%98%B2%E6%8A%A4%EF%BC%89%EF%BC%9A%20%E5%BD%93%E4%BD%A0%E5%B0%86%E7%94%A8%E6%88%B7%E8%BE%93%E5%85%A5%E6%88%96%E5%85%B6%E4%BB%96%E5%A4%96%E9%83%A8%E6%95%B0%E6%8D%AE%E6%8F%92%E5%85%A5%E5%88%B0HTML%E5%AD%97%E7%AC%A6%E4%B8%B2%E4%B8%AD%E6%97%B6%EF%BC%8C%E5%8A%A1%E5%BF%85%E5%B0%8F%E5%BF%83%E8%B7%A8%E7%AB%99%E8%84%9A%E6%9C%AC%E6%94%BB%E5%87%BB%EF%BC%88XSS%EF%BC%89%E3%80%82%E5%A6%82%E6%9E%9Clat%E6%88%96lng%E7%AD%89%E5%8F%98%E9%87%8F%E5%8F%AF%E8%83%BD%E5%8C%85%E5%90%AB%E6%81%B6%E6%84%8F%E8%84%9A%E6%9C%AC%EF%BC%8C%E7%9B%B4%E6%8E%A5%E6%8F%92%E5%85%A5%E4%BC%9A%E5%AF%BC%E8%87%B4%E5%AE%89%E5%85%A8%E6%BC%8F%E6%B4%9E%E3%80%82

%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%EF%BC%9A%20%E5%AF%B9%E4%BA%8E%E4%BB%BB%E4%BD%95%E6%9D%A5%E8%87%AA%E4%B8%8D%E5%8F%AF%E4%BF%A1%E6%BA%90%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%9C%A8%E5%B0%86%E5%85%B6%E6%8F%92%E5%85%A5HTML%E4%B9%8B%E5%89%8D%EF%BC%8C%E5%BA%94%E8%BF%9B%E8%A1%8C%E9%80%82%E5%BD%93%E7%9A%84HTML%E5%AE%9E%E4%BD%93%E7%BC%96%E7%A0%81%E6%88%96%E4%BD%BF%E7%94%A8%E4%B8%93%E9%97%A8%E7%9A%84%E5%BA%93%E8%BF%9B%E8%A1%8C%E5%87%80%E5%8C%96%E3%80%82%E4%BE%8B%E5%A6%82%EF%BC%8C%E5%A6%82%E6%9E%9C%E5%8F%98%E9%87%8F%E4%B8%AD%E5%8F%AF%E8%83%BD%E5%8C%85%E5%90%AB%E6%A0%87%E7%AD%BE%EF%BC%8C%E7%BC%96%E7%A0%81%E5%90%8E%E4%BC%9A%E5%8F%98%E6%88%90%EF%BC%8C%E4%BB%8E%E8%80%8C%E9%81%BF%E5%85%8D%E8%A2%AB%E6%B5%8F%E8%A7%88%E5%99%A8%E8%A7%A3%E6%9E%90%E4%B8%BA%E5%8F%AF%E6%89%A7%E8%A1%8C%E4%BB%A3%E7%A0%81%E3%80%82%E5%9C%A8%E6%88%91%E4%BB%AC%E7%9A%84%E7%BB%8F%E7%BA%AC%E5%BA%A6%E7%A4%BA%E4%BE%8B%E4%B8%AD%EF%BC%8C%E7%94%B1%E4%BA%8E%E5%AE%83%E4%BB%AC%E6%98%AF%E6%95%B0%E5%80%BC%EF%BC%8C%E9%80%9A%E5%B8%B8%E9%A3%8E%E9%99%A9%E8%BE%83%E4%BD%8E%EF%BC%8C%E4%BD%86%E5%85%BB%E6%88%90%E5%AE%89%E5%85%A8%E7%BC%96%E7%A0%81%E7%9A%84%E4%B9%A0%E6%83%AF%E8%87%B3%E5%85%B3%E9%87%8D%E8%A6%81%E3%80%82

%E7%BB%84%E4%BB%B6%E9%9B%86%E6%88%90%EF%BC%9A%20%E6%A0%B9%E6%8D%AE%E5%8E%9F%E5%A7%8B%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0%EF%BC%8C%E8%BF%99%E4%B8%AAHTML%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%9C%80%E7%BB%88%E4%BC%9A%E8%A2%AB%E4%BC%A0%E9%80%92%E7%BB%99%E4%B8%80%E4%B8%AA%E7%BB%84%E4%BB%B6%E3%80%82%E6%97%A0%E8%AE%BA%E4%BD%A0%E9%80%89%E6%8B%A9%E5%93%AA%E7%A7%8D%E6%96%B9%E6%B3%95%EF%BC%8C%E6%9C%80%E7%BB%88%E9%83%BD%E6%98%AF%E7%94%9F%E6%88%90%E4%B8%80%E4%B8%AA%E7%AC%A6%E5%90%88%E8%A6%81%E6%B1%82%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%8C%E7%84%B6%E5%90%8E%E5%B0%86%E5%85%B6%E4%BD%9C%E4%B8%BA%E5%8F%82%E6%95%B0%E4%BC%A0%E9%80%92%E7%BB%99%E7%9B%AE%E6%A0%87%E7%BB%84%E4%BB%B6%E6%88%96API%E3%80%82

// 假设这是你要传递给组件的最终字符串const finalHtmlString = `
New Launch

Create`;// 假设你有一个组件或函数接收这个字符串someComponent.renderContent(finalHtmlString);

%E6%80%BB%E7%BB%93

%E5%9C%A8JavaScript%E4%B8%AD%E5%8A%A8%E6%80%81%E6%9E%84%E5%BB%BA%E5%8C%85%E5%90%AB%E5%8F%98%E9%87%8F%E7%9A%84HTML%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%97%B6%EF%BC%8C%E6%A0%B8%E5%BF%83%E5%9C%A8%E4%BA%8E%E7%90%86%E8%A7%A3JavaScript%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%93%8D%E4%BD%9C%E6%9C%BA%E5%88%B6%E3%80%82%E7%9B%B4%E6%8E%A5%E5%9C%A8%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%AD%97%E9%9D%A2%E9%87%8F%E5%86%85%E9%83%A8%E5%B5%8C%E5%85%A5JavaScript%E5%8F%98%E9%87%8F%E6%98%AF%E6%97%A0%E6%95%88%E7%9A%84%E3%80%82%E6%88%91%E4%BB%AC%E5%BF%85%E9%A1%BB%E4%BD%BF%E7%94%A8JavaScript%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%8B%BC%E6%8E%A5%EF%BC%88+%E8%BF%90%E7%AE%97%E7%AC%A6%EF%BC%89%E6%88%96%E6%9B%B4%E7%8E%B0%E4%BB%A3%E7%9A%84%E6%A8%A1%E6%9D%BF%E5%AD%97%E9%9D%A2%E9%87%8F%EF%BC%88%E5%8F%8D%E5%BC%95%E5%8F%B7%E5%92%8C%24%7B%7D%E8%AF%AD%E6%B3%95%EF%BC%89%E6%9D%A5%E5%9C%A8%E8%BF%90%E8%A1%8C%E6%97%B6%E6%9E%84%E9%80%A0%E5%87%BA%E5%AE%8C%E6%95%B4%E7%9A%84HTML%E5%AD%97%E7%AC%A6%E4%B8%B2%E3%80%82%E5%AF%B9%E4%BA%8E%E5%A4%A7%E5%A4%9A%E6%95%B0%E7%8E%B0%E4%BB%A3%E5%BA%94%E7%94%A8%EF%BC%8C%E6%8E%A8%E8%8D%90%E4%BD%BF%E7%94%A8%E6%A8%A1%E6%9D%BF%E5%AD%97%E9%9D%A2%E9%87%8F%EF%BC%8C%E5%9B%A0%E4%B8%BA%E5%AE%83%E6%8F%90%E4%BE%9B%E4%BA%86%E6%9B%B4%E5%A5%BD%E7%9A%84%E5%8F%AF%E8%AF%BB%E6%80%A7%E5%92%8C%E5%BC%80%E5%8F%91%E4%BD%93%E9%AA%8C%E3%80%82%E5%90%8C%E6%97%B6%EF%BC%8C%E5%88%87%E8%AE%B0%E5%9C%A8%E5%A4%84%E7%90%86%E4%BB%BB%E4%BD%95%E5%8A%A8%E6%80%81%E5%86%85%E5%AE%B9%E6%97%B6%EF%BC%8C%E5%A7%8B%E7%BB%88%E5%B0%86%E5%AE%89%E5%85%A8%E6%80%A7%E6%94%BE%E5%9C%A8%E9%A6%96%E4%BD%8D%EF%BC%8C%E9%98%B2%E8%8C%83%E6%BD%9C%E5%9C%A8%E7%9A%84XSS%E6%94%BB%E5%87%BB%E3%80%82

“>

以上就是在JavaScript中动态构建包含变量的HTML字符串教程的详细内容，更多请关注创想鸟其它相关文章！