如何优化字段缺失场景下重复编写innerHTML渲染模板的问题

优化方案 #

你可以通过模板字符串内嵌条件判断、或者配置化字段的方式消除重复代码，后者扩展性更强，后续新增可选字段不需要改动渲染逻辑。

轻量优化版（适合字段较少的场景）

直接在模板里判断可选字段是否存在，存在就渲染对应内容，去掉重复的if-else分支：

const searchResultShow = data => {
    const parentDiv = document.getElementById('result-details');
    parentDiv.innerText = "";
    data.docs.forEach(book => {
        // 提前提取所有字段，加空值保护避免数组为空时报错
        const bookName = book.title;
        const authorname = book.author_name?.[0] ?? '未知作者';
        const publisher = book.publisher?.[0] ?? '未知出版社';
        const firstPublish = book.first_publish_year;

        const newElem = document.createElement('div');
        newElem.classList.add('col');
        // 模板内用三元表达式判断可选字段是否渲染
        newElem.innerHTML = `
            <h4>Name: ${bookName}</h4>
            <h4>Author Name: ${authorname}</h4>
            <h4>Publisher: ${publisher}</h4>
            ${firstPublish ? `<h4>First Publish Year: ${firstPublish}</h4>` : ''}
        `;
        parentDiv.appendChild(newElem);
    })
}

高扩展配置化版（适合后续可能新增多字段的场景）

把所有要展示的字段整理成统一配置，遍历生成内容，新增字段只要修改配置即可：

const searchResultShow = data => {
    const parentDiv = document.getElementById('result-details');
    parentDiv.innerText = "";
    // 字段配置列表，所有字段的展示规则都在这里维护
    const fieldConfig = [
        { label: 'Name', getValue: book => book.title },
        { label: 'Author Name', getValue: book => book.author_name?.[0] ?? '未知作者' },
        { label: 'Publisher', getValue: book => book.publisher?.[0] ?? '未知出版社' },
        { label: 'First Publish Year', getValue: book => book.first_publish_year, optional: true },
        // 后续新增可选字段直接加配置即可，不用改渲染逻辑
        // { label: '页数', getValue: book => book.page_count, optional: true }
    ];

    data.docs.forEach(book => {
        const newElem = document.createElement('div');
        newElem.classList.add('col');
        // 遍历配置生成每一行HTML
        const contentHtml = fieldConfig.map(field => {
            const value = field.getValue(book);
            // 可选字段无值时跳过渲染
            if (field.optional && !value) return '';
            return `<h4>${field.label}: ${value}</h4>`;
        }).join('');
        newElem.innerHTML = contentHtml;
        parentDiv.appendChild(newElem);
    })
}

以上两种方案都修复了你原有代码中<h4>开头、</h3>结尾的标签不匹配问题，同时加了空值保护，避免author_name、publisher字段为空时代码抛出异常。

内容的提问来源于stack exchange，提问作者mir abir hossain