避免HTML硬编码到JS中的方法有哪些

在前端开发中，直接将HTML字符串写在JS代码里是很多开发者初期的常见做法，但随着项目规模扩大，这种方式会导致代码冗余、维护困难、逻辑混乱等问题。想要避免HTML硬编码到JS中，有多种可落地的实践方案，下面逐一介绍具体的实现方式和适用场景。

使用ES6模板字符串拆分HTML

对于小型项目或者简单的动态HTML生成场景，可以使用ES6的模板字符串把HTML内容从JS逻辑中拆分出来，单独定义成变量或者函数返回值，这样能让JS逻辑更清晰。

// 定义生成列表项的HTML模板函数
function getListItemHtml(item) {
    return `
        <li class="list-item">
            <span class="item-name">${item.name}</span>
            <span class="item-price">${item.price}</span>
        </li>
    `;
}

// JS逻辑中调用模板函数生成HTML
const dataList = [
    { name: '商品A', price: 99 },
    { name: '商品B', price: 199 }
];
const htmlArr = dataList.map(item => getListItemHtml(item));
document.querySelector('.list-container').innerHTML = htmlArr.join('');

引入前端模板引擎

如果项目中动态HTML的生成逻辑比较复杂，使用模板字符串可能会导致代码可读性下降，这时候可以引入成熟的前端模板引擎，比如art-template、ejs等，通过模板文件分离HTML和JS逻辑。

以art-template为例，首先需要在HTML中定义模板：

<script id="listTpl" type="text/html">
    {{each list item}}
    <li class="list-item">
        <span class="item-name">{{item.name}}</span>
        <span class="item-price">{{item.price}}</span>
    </li>
    {{/each}}
</script>

然后在JS中引入模板引擎，渲染模板生成HTML：

// 引入art-template库后，获取模板内容并渲染
const tplHtml = template('listTpl', {
    list: [
        { name: '商品A', price: 99 },
        { name: '商品B', price: 199 }
    ]
});
document.querySelector('.list-container').innerHTML = tplHtml;

使用前端框架的组件化能力

如果项目已经使用了Vue、React、Angular等前端框架，那么可以直接利用框架的组件化特性，将HTML结构封装到组件内部，完全避免把HTML硬编码到JS逻辑中。

以Vue单文件组件为例，.vue文件天然将模板、逻辑、样式分离：

<template>
    <ul class="list-container">
        <li v-for="item in list" :key="item.name" class="list-item">
            <span class="item-name">{{ item.name }}</span>
            <span class="item-price">{{ item.price }}</span>
        </li>
    </ul>
</template>

<script>
export default {
    data() {
        return {
            list: [
                { name: '商品A', price: 99 },
                { name: '商品B', price: 199 }
            ]
        }
    }
}
</script>

<style scoped>
.list-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
</style>

将HTML放到单独的静态文件中

对于传统的多页面项目，还可以把重复的HTML片段放到单独的静态HTML文件中，通过AJAX请求加载这些片段，再插入到页面中，避免把HTML硬编码到JS里。

// 加载外部HTML片段
function loadHtmlFragment(url, containerSelector) {
    fetch(url)
        .then(res => res.text())
        .then(html => {
            document.querySelector(containerSelector).innerHTML = html;
        })
        .catch(err => console.error('加载HTML片段失败', err));
}

// 调用方法加载列表片段
loadHtmlFragment('/static/fragments/list.html', '.list-container');

不同方案的适用场景对比

可以参考下面的表格选择适合自己项目的方案：

HTMLJavaScript模板引擎前端工程化代码解耦修改时间：2026-06-03 21:56:09