可通过全局变量、data属性、隐藏input、闭包模块四种方法在html中读取javaScript变量值：全局变量直接挂载window；data属性中转避免污染；hidden input适合表单；闭包模块封装getter确保安全访问。
如果您在HTML页面中需要读取javascript中定义的变量值，则可能是由于变量作用域或执行时机导致无法直接访问。以下是获取JavaScript变量值的多种方法：
一、通过全局变量直接访问
将JavaScript变量声明在全局作用域（即不使用let、const或var在函数内声明），使其成为window对象的属性，可在HTML中通过内联事件或script标签直接引用。
1、在<script>标签中定义全局变量：<strong><font color="green">var userName = "张三";</script>
2、在html元素中使用内联事件调用该变量：
立即学习“Java免费学习笔记（深入）”；
3、在后续<script>中直接输出：<strong><font color="green">document.write("当前用户：" + userName);</script>
二、通过dom元素data属性中转
利用HTML元素的data-*自定义属性作为JavaScript与HTML之间的数据桥梁，避免全局污染，提升可维护性。
1、在JavaScript中设置data属性：document.body.setAttribute(“data-user-id”, “1001”);
2、在HTML中通过getAttribute读取：
3、在script中填充内容：document.getElementById(“uid”).textContent = document.body.getAttribute(“data-user-id”);
三、通过隐藏input元素传递值
使用type=”hidden”的input元素作为JavaScript变量值的容器，HTML结构可直接绑定其value属性，适合表单场景。
1、在HTML中插入隐藏输入框：
2、在JavaScript中赋值：document.getElementById(“jsValueHolder”).value = userInfo.email;
3、在其他HTML位置通过id引用该值：
邮箱：
4、同步显示：document.getElementById(“emailDisplay”).textContent = document.getElementById(“jsValueHolder”).value;
四、通过自定义HTML属性配合dataset API
利用HTML5 dataset特性，将JavaScript变量写入元素的data-*属性，并通过element.dataset接口安全读取，支持驼峰命名转换。
1、为元素添加data属性：
2、在JavaScript中读取并更新：const app = document.getElementById(“app”); const name = app.dataset.userName;
3、将值渲染到页面指定位置：document.querySelector(“#nameOutput”).innerText = name;
五、通过立即执行函数暴露只读访问接口
使用IIFE封装变量，仅暴露安全的getter方法，防止外部篡改，同时允许HTML通过函数调用获取值。
1、定义带私有变量的IIFE：const UserStore = (function() { let _token = “abc123”; return { getToken: () => _Token }; })();
2、在HTML按钮中调用getter：
3、在页面加载后初始化显示：document.addEventListener(“DOMContentLoaded”, () => { document.getElementById(“tokenView”).textContent = UserStore.getToken(); });