JavaScript如何根据数值是否大于0动态生成数据展示语句

核心思路是不要单独提取数值做过滤，而是全程保留字段和数值的绑定关系，从根源上避免过滤后找不到对应字段描述的问题，全程不需要写大量分支判断。

实现步骤 #

• 先维护一份字段key到展示文本的映射配置，把字段标识和用户看到的文案解耦，后续改文案、加新字段、做多语言适配都只需要改这份配置
• 用Object.entries()把接口返回的对象转成[字段key, 数值]格式的条目数组，直接过滤掉数值小于等于0的条目，过滤后的每一项都同时保留了字段标识和对应值，不会丢失对应关系
• 把过滤后的有效条目转成对应描述短语，再按照自然语言规则拼接即可，逻辑只需要根据有效条目的长度处理连接符，不需要针对单个字段写判断

完整代码示例 #

// 字段展示文案配置，可根据业务需求灵活调整
const fieldLabelMap = {
  red: "red posts",
  blue: "blue posts",
  yellow: "yellow posts",
  green: "green posts"
}

function buildResultText(apiData) {
  // 过滤值大于0的有效字段，保留键值对应关系
  const validItems = Object.entries(apiData).filter(([_, count]) => count > 0)

  // 处理无有效数据的边界场景
  if (validItems.length === 0) return "We found no matching posts."

  // 生成每个字段对应的描述短语
  const phraseParts = validItems.map(([fieldKey, count]) => {
    return `${count} ${fieldLabelMap[fieldKey]}`
  })

  // 按英文表达习惯拼接，自动处理逗号、and的位置
  let content
  if (phraseParts.length === 1) {
    content = phraseParts[0]
  } else {
    const lastPart = phraseParts.at(-1)
    const frontParts = phraseParts.slice(0, -1).join(", ")
    content = `${frontParts}, and ${lastPart}`
  }

  return `We found ${content}.`
}

// 测试示例数据
const mockData = {red: 100, blue: 200, yellow: 0, green: 400}
console.log(buildResultText(mockData))
// 输出：We found 100 red posts, 200 blue posts, and 400 green posts.

// 其他场景测试
console.log(buildResultText({red: 30, blue:0, yellow:0, green:0}))
// 输出：We found 30 red posts.
console.log(buildResultText({red:0, blue:15, yellow:25, green:0}))
// 输出：We found 15 blue posts, and 25 yellow posts.

方案优势 #

• 无冗余分支判断：不管接口返回多少个字段、哪些字段值为0，逻辑都能自动适配，不需要针对单个字段写if判断
• 易维护：字段增减、文案修改只需要调整fieldLabelMap配置，核心拼接逻辑不需要改动
• 边界覆盖全：自动适配0个、1个、多个有效字段的场景，生成的语句符合日常表达习惯

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