HTML/JS互转 - HTML与JavaScript在线转换

HTML 与 JavaScript 字符串互转

HTML 代码

JS字符串格式: 单引号拼接双引号拼接模板字符串 (`) 变量赋值

JavaScript 字符串

📖 HTML与JavaScript字符串转换

在Web开发中，经常需要在JavaScript代码中嵌入HTML片段，或者从JS字符串中提取HTML。正确处理引号转义和换行符是关键。

JavaScript 字符串表示方式

方式	语法	特点
单引号	`'string'`	需转义内部单引号，双引号可直接使用
双引号	`"string"`	需转义内部双引号，单引号可直接使用
模板字符串	`string`	ES6+，支持多行和变量插值 ${}

常用转义字符

转义序列	含义	Unicode
`\'`	单引号	\u0027
`\"`	双引号	\u0022
`\\`	反斜杠	\u005C
`\n`	换行符	\u000A
`\r`	回车符	\u000D
`\t`	制表符	\u0009
\`	反引号（模板字符串中）	\u0060

模板字符串（Template Literals）

// ES6 模板字符串示例
const name = '世界';
const html = `
  <div class="greeting">
    <h1>你好，${name}！</h1>
  </div>
`;

// 支持多行，无需手动拼接
// 支持表达式插值 ${expression}
// 内部可直接使用单引号和双引号

现代替代方案

方法	说明	适用场景
模板字符串	ES6原生支持多行字符串	简单的HTML片段
DOM API	createElement / innerHTML	动态创建元素
模板引擎	Handlebars、EJS等	复杂的模板渲染
JSX	React中使用的语法扩展	React组件
Vue模板	.vue文件的template区域	Vue组件

💡 小贴士：在现代JavaScript开发中，建议优先使用模板字符串（反引号 `）来处理多行HTML。它不仅语法更清晰，还支持变量插值。如果项目使用框架（React/Vue/Angular），则应使用框架自带的模板系统而非手动拼接字符串。