如何在JavaScript中基于双变量生成条件字符串（避免大量if else）

嘿，这个问题我太有共鸣了！一堆嵌套的if-else不仅看着乱糟糟，后续维护或者加新变量时还容易出错。给你分享几个更简洁规范的实现思路，代码可读性和扩展性都会提升不少👇

方案1：数组收集片段 + 智能拼接 #

核心思路是把每个URL对应的文本片段单独处理，收集到数组里，最后根据实际情况用合适的分隔符拼接。这样不用再穷举所有组合情况：

// 先初始化url变量
const url1 = containsData1 ? "http://test" : null;
const url2 = containsData2 ? "http://test2" : null;

// 收集每个URL对应的文本片段
const textSegments = [];
textSegments.push(url1 ? `The url 1 is ${url1}` : "There isnt data for url1");
textSegments.push(url2 ? `Url2 is ${url2}` : "There isnt data for url2");

// 根据两个URL的存在状态选择分隔符
const finalString = url1 && url2 
  ? textSegments.join(" and ") 
  : textSegments.join(". ");

这个方案的好处是逻辑拆分清晰，每个URL的文本生成独立，以后要加url3的话，只需要多推一个片段到数组里，完全不用修改拼接逻辑，扩展性拉满。

方案2：状态映射对象（适合固定少变量场景） #

如果确定只有2个URL、4种状态组合，可以把每种状态和对应的文案直接映射到对象里，彻底消除if-else：

const url1 = containsData1 ? "http://test" : null;
const url2 = containsData2 ? "http://test2" : null;

// 用布尔值组合作为key，映射对应的文案
const messageTemplates = {
  "true-true": `The url 1 is ${url1} and url 2 is ${url2}`,
  "false-true": `There isnt data for url1. Url2 is ${url2}`,
  "true-false": `The url 1 is ${url1}. There isnt data for url2`,
  "false-false": "There isnt data for url1. There isnt data for url2"
};

// 生成当前状态的key，直接取值
const stateKey = `${!!url1}-${!!url2}`;
const finalString = messageTemplates[stateKey];

这种方式的优点是所有状态和文案一目了然，适合变量少、状态固定的场景。但如果以后要加第三个URL，状态会变成8种，映射对象会变得臃肿，这时候就不推荐了。

方案3：函数式片段生成（最高复用性） #

把生成单个URL文本的逻辑封装成函数，后续不管加多少个URL，只需要调用函数生成片段即可：

// 封装通用的URL文本生成函数
const getUrlText = (urlLabel, urlValue) => {
  return urlValue ? `The ${urlLabel} is ${urlValue}` : `There isnt data for ${urlLabel}`;
};

const url1 = containsData1 ? "http://test" : null;
const url2 = containsData2 ? "http://test2" : null;

// 生成所有片段
const segments = [
  getUrlText("url 1", url1),
  getUrlText("url2", url2)
];

// 拼接逻辑和方案1一致
const finalString = url1 && url2 
  ? segments.join(" and ") 
  : segments.join(". ");

这个方案的复用性最强，以后拓展到url3、url4时，只需要新增一行getUrlText调用，完全不用改其他逻辑。如果你的业务后续可能有扩展需求，这个方案是最优解。

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