ES6中如何拼接完整姓名：解决middleName缺失导致的冗余空格问题

开发中最常见的姓名拼接实现，是直接使用ES6模板字符串书写逻辑：
${firstName} ${middleName} ${lastName}

这种方案存在非常明显的边界缺陷：当middleName不存在（值为undefined/null）、或是为空字符串时，拼接生成的姓名字符串会出现无意义的多余间隔空格——比如firstName='李'、lastName='四'，middleName为空时，最终结果会变成"李 四"，完全不符合业务展示要求。

正确的实现方案 #

最简洁、鲁棒性最强的实现思路是 将姓名片段放入数组，过滤无效值后用空格连接，全程依托ES6语法实现：

• 基础版本，适配绝大多数常规业务场景：
  const fullName = [firstName, middleName, lastName].filter(Boolean).join(' ')
  实现逻辑：filter(Boolean)会自动剔除数组中所有无效空值（undefined、null、空字符串、NaN），最后用单个空格连接剩余的有效姓名片段，从根源上避免多余空格的问题。
• 增强版本，兼容脏数据场景：
  如果业务侧可能存在姓名字段录入时带有前后残留空格的情况，可以做进一步逻辑优化：

const fullName = [firstName, middleName, lastName]
  // 兼容字段为null/undefined的情况，先转空值再清理前后空格
  .map(name => (name || '').trim())
  .filter(Boolean)
  .join(' ');

这个版本会先对每个姓名片段做前后空格清理，再过滤无效值拼接，对不规范的录入数据兼容能力更强。如果项目环境支持更新的ES语法，也可以把map里的逻辑简化为name => name?.trim() ?? ''，写法会更简洁。

高维护成本的非推荐写法 #

部分开发者会用逐段条件判断的逻辑实现拼接，但这类写法逻辑冗余、容易漏兜底：

let fullName = firstName;
if (middleName) fullName += ` ${middleName}`;
if (lastName) fullName += ` ${lastName}`;

这种写法一旦firstName本身为空，拼接结果开头就会多出空格，还需要额外补充大量空值判断逻辑，整体维护成本远高于数组实现方案。

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