ES6中能否使用{}语法在HTML中引用JavaScript变量？

嘿，这个问题问得很实在！先直接给你结论：你不能直接在普通原生HTML里用{test}引用JS模块里的变量——浏览器根本不认识这种语法，只会把它当成普通文本显示。要把ES6变量的值插入到HTML里，得用特定的方法，下面我给你拆解几种常用的方案：

1. 基础DOM操作：textContent/innerHTML #

这是最传统也最通用的方式，核心思路就是先拿到HTML元素，再把变量值赋值给元素的内容。

比如先在HTML里准备一个容器：

<div id="test-target"></div>

然后在你的ES6模块里写：

const test = 'abc';
// 优先用textContent，更安全（避免XSS风险）
document.getElementById('test-target').textContent = test;

// 如果需要插入带HTML结构的内容，再用innerHTML
// document.getElementById('test-target').innerHTML = `<strong>${test}</strong>`;

小贴士：textContent只会插入纯文本，innerHTML会解析HTML标签，后者要注意防范恶意代码注入的风险。

2. ES6模板字符串+DOM操作 #

如果要插入的内容包含复杂的HTML结构，用ES6的模板字符串会更方便，它支持直接嵌入变量：

const test = 'abc';
// 用模板字符串拼接HTML内容，变量直接用${}嵌入
const renderedHtml = `
  <div class="test-box">
    <p>这是ES6变量的值：<span>${test}</span></p>
  </div>
`;
document.getElementById('test-target').innerHTML = renderedHtml;

这种方式比手动拼接字符串简洁太多，也不容易出错。

3. 现代方案：Web Components（自定义元素） #

如果是做组件化开发，Web Components是原生的解决方案，能让你把变量和HTML封装成可复用的组件：

先写一个ES模块文件（比如test-component.js）：

class TestComponent extends HTMLElement {
  connectedCallback() {
    // 组件挂载到DOM时执行
    const test = 'abc';
    // 直接用模板字符串渲染内容
    this.innerHTML = `<p>组件内的变量值：${test}</p>`;
  }
}

// 注册自定义元素
customElements.define('test-component', TestComponent);

然后在HTML里引入模块并使用：

<script type="module" src="test-component.js"></script>
<test-component></test-component>

浏览器会自动渲染这个自定义元素，变量值也会被插入到对应的位置。

4. 前端框架的插值语法（Vue/React等） #

如果你用Vue、React这类框架，它们本身就支持类似{test}的插值语法——但这是框架封装的能力，不是原生HTML的特性。

比如React组件：

import React from 'react';

function TestPage() {
  const test = 'abc';
  // React里用{}嵌入变量
  return <div>变量值：{test}</div>;
}

Vue组件：

<template>
  <div>变量值：{{ test }}</div>
</template>

<script setup>
const test = 'abc';
</script>

框架会在编译阶段把这些插值语法转换成底层的DOM操作，帮你完成变量到HTML的映射。

为什么不能直接用{test}？ #

原生HTML没有内置的变量插值语法，{test}在普通HTML里就是一串纯文本，浏览器不会去尝试解析它对应的JS变量。只有模板引擎（比如Handlebars、EJS）或者前端框架，才会在构建/运行阶段把{test}替换成实际的变量值，再生成浏览器能识别的HTML。

最后提醒一句：如果用ES模块，记得给script标签加上type="module"属性，不然浏览器会把它当成普通脚本解析，可能出现变量作用域的问题。

内容的提问来源于stack exchange，提问作者Eshan I.