如何在jQuery的html()方法中忽略无值的标签/变量？

方法1：用数组收集有效内容 #

这种方式逻辑清晰、易维护，适合字段较多的场景：

const content = [];
// 仅当变量有值时，添加对应段落
if (name) {
  content.push(`<p><span style="font-weight:bold;">Name:</span> ${name}</p>`);
}
if (company) {
  content.push(`<p><span style="font-weight:bold;">Company:</span> ${company}</p>`);
}
if (job) {
  content.push(`<p><span style="font-weight:bold;">Job:</span> ${job}</p>`);
}
if (title) {
  content.push(`<p><span style="font-weight:bold;">Title:</span> ${title}</p>`);
}
if (phone) {
  content.push(`<p><span style="font-weight:bold;">Phone:</span> ${phone}</p>`);
}
if (email) {
  content.push(`<p><span style="font-weight:bold;">Email:</span> ${email}</p>`);
}
if (addressResult) {
  content.push(`<p><span style="font-weight:bold;">Event Loc:</span> ${addressResult}</p>`);
}

$('.modal-body').html(content.join(''));

方法2：模板字符串内嵌入条件判断 #

如果不想额外定义数组，直接在模板字符串里用三元运算符做判断，适合字段较少的场景：

$('.modal-body').html(`
  ${name ? `<p><span style="font-weight:bold;">Name:</span> ${name}</p>` : ''}
  ${company ? `<p><span style="font-weight:bold;">Company:</span> ${company}</p>` : ''}
  ${job ? `<p><span style="font-weight:bold;">Job:</span> ${job}</p>` : ''}
  ${title ? `<p><span style="font-weight:bold;">Title:</span> ${title}</p>` : ''}
  ${phone ? `<p><span style="font-weight:bold;">Phone:</span> ${phone}</p>` : ''}
  ${email ? `<p><span style="font-weight:bold;">Email:</span> ${email}</p>` : ''}
  ${addressResult ? `<p><span style="font-weight:bold;">Event Loc:</span> ${addressResult}</p>` : ''}
`);

方法3：封装工具函数减少重复代码 #

如果有大量格式重复的字段，可以封装一个生成段落的函数，避免代码冗余：

function generateFieldLabel(label, value) {
  // 可根据需求调整判断逻辑，比如排除空字符串但允许0这类有效值
  return value ? `<p><span style="font-weight:bold;">${label}:</span> ${value}</p>` : '';
}

$('.modal-body').html(`
  ${generateFieldLabel('Name', name)}
  ${generateFieldLabel('Company', company)}
  ${generateFieldLabel('Job', job)}
  ${generateFieldLabel('Title', title)}
  ${generateFieldLabel('Phone', phone)}
  ${generateFieldLabel('Email', email)}
  ${generateFieldLabel('Event Loc', addressResult)}
`);

注：默认的“无值”判断会过滤''、undefined、null等假值，如果需要更精准的判断（比如允许数字0但排除空字符串），可以把判断条件改成value !== undefined && value !== null && value !== ''。

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