参考Vue字符串模板写法，原生JavaScript如何优雅将模板赋值给变量？

当然可以！你提到的两种思路都是解决原生JS里写冗长HTML字符串痛点的绝佳方案，我给你详细拆解下每种方法的用法和适用场景：

1. ES6模板字符串：最直接的原生解决方案 #

这应该是日常开发里用得最多的方式了，完美解决了传统字符串换行、插值繁琐的问题。

对比一下两种写法的差异：

// 传统字符串写法：冗长、易出错，换行还要加转义
var myHtml = "<div class='row'><h1>Hello</h1><p>This is a very long paragraph that would look messy in a single line. Adding variables like " + userName + " makes it even harder to read.</p></div>";

// 模板字符串写法：格式清晰，支持自然换行和变量插值
const userName = "Alice";
const myHtml = `
  <div class='row'>
    <h1>Hello, ${userName}!</h1>
    <p>This is a very long paragraph that can span multiple lines naturally.
    You can embed variables or even expressions using ${} syntax — no more string concatenation hell.</p>
  </div>
`;

优点：原生JS支持，无需依赖DOM元素，编写和维护成本低，支持变量/表达式插值。
缺点：如果HTML结构特别复杂（比如包含嵌套组件、大量动态逻辑），纯字符串写法还是不如可视化的模板直观，且没法享受编辑器的HTML语法高亮和错误提示。

2. <template>元素：适合复杂HTML结构的可视化方案 #

如果你的HTML内容超长、结构复杂，或者需要复用模板，<template>元素绝对是更好的选择——它允许你在HTML中直观编写模板内容，再通过JS获取使用。

步骤1：在HTML中定义模板 #

<template id="myComplexTemplate">
  <div class='row'>
    <h1>Welcome to my page</h1>
    <div class="content">
      <p>This is a complex template with nested elements.</p>
      <ul>
        <li>Dynamic item 1</li>
        <li>Dynamic item 2</li>
      </ul>
    </div>
  </div>
</template>

步骤2：在JS中获取并使用模板 #

有两种常用方式：

// 方式1：提取HTML字符串（和你原来的需求匹配）
const template = document.getElementById('myComplexTemplate');
const myHtml = template.innerHTML;

// 方式2：克隆模板内容（更安全，适合直接插入DOM，避免XSS风险）
const templateContent = template.content.cloneNode(true);
// 直接插入到页面中
document.body.appendChild(templateContent);

优点：HTML内容与JS逻辑分离，编写时能享受编辑器的HTML语法高亮和提示，适合复杂结构，克隆节点的方式比字符串插入更安全（避免HTML解析带来的XSS问题）。
缺点：需要在HTML中预先定义模板，无法完全在JS文件内编写，更适合静态结构或需要复用的场景。

补充：Vue项目中的特殊用法 #

如果你是在Vue项目里，用ref获取<template>会更便捷：

<template>
  <div>
    <!-- 定义模板 -->
    <template ref="myHtmlBlock">
      <div class='row'>This is my text</div>
    </template>
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取模板HTML字符串
    const templateHtml = this.$refs.myHtmlBlock.innerHTML;
    // 或者克隆模板节点直接使用
    const clonedContent = this.$refs.myHtmlBlock.content.cloneNode(true);
    // 后续业务逻辑处理
  }
}
</script>

总结 #

• 短到中等长度的HTML：优先用ES6模板字符串，简单直接。
• 超长/复杂HTML结构：用<template>元素，可视化编写更高效，克隆节点的方式更安全。

内容的提问来源于stack exchange，提问作者senty