JavaScript签名生成器：双字段为空时如何移除冗余元素

嘿，这个问题我太熟悉了——完全需要针对双字段为空的情况补充判断逻辑，而且其实有更优雅的写法，不一定非要嵌套一堆if/else。

问题根源 #

你当前的逻辑应该是分别处理手机号和传真号：有手机号就输出C: 手机号，有传真就输出F: 传真，然后用|连接两者。但当两个字段都为空时，可能代码里还是把空的手机号前缀和分隔符拼了进去，导致出现多余的C:和|。

更简洁的解决方案 #

不用写复杂的嵌套判断，推荐用数组收集非空内容再拼接的方式，既能避免多余字符，还能让代码更易维护：

// 先初始化一个空数组，用来装非空的字段内容
const contactParts = [];

// 只有当手机号不为空时，才把带前缀的内容加入数组
if (phoneInput.value.trim()) {
  contactParts.push(`C: ${phoneInput.value.trim()}`);
}

// 同理处理传真号
if (faxInput.value.trim()) {
  contactParts.push(`F: ${faxInput.value.trim()}`);
}

// 用" | "拼接数组里的内容——如果数组为空，结果就是空字符串；有内容就自动正确分隔
const signatureContact = contactParts.join(' | ');

这种写法的好处：

• 双字段为空时，signatureContact直接是空串，不会出现任何多余字符
• 以后要加其他字段（比如邮箱），直接加一行if (email) contactParts.push(...)就行，扩展性极强
• 逻辑清晰，比嵌套if/else更易读

为什么原来的逻辑会出错？ #

举个反例，如果原来的代码是类似这样的：

let contactText = '';
if (phone) {
  contactText += `C: ${phone}`;
}
// 这里如果手机号空但传真也空，就会多加一个" | "
if (fax) {
  contactText += contactText ? ' | ' : '';
  contactText += `F: ${fax}`;
}

这种写法就会在双空时，因为contactText初始为空，可能误加分隔符，或者手机号为空时还是输出了C:（如果你的逻辑是不管有没有手机号都先写C:的话）。

所以换成数组收集的方式，从根源上避免了这类问题~

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