如何按指定顺序从JS对象属性构建字符串并消除条件判断

问题背景 #

现有如下包含姓名信息的JavaScript对象（注：原对象中suffex为拼写错误，修正为suffix以匹配需求）：

const info = {
  first: 'John',
  last: 'Doe',
  middle: 'Henry',
  suffix: 'Sr',
}

需要按照first、middle、last、suffix的固定顺序拼接成完整姓名字符串，期望结果为John Henry Doe Sr。当前实现使用带三元表达式的模板字符串，但希望移除其中的条件判断逻辑：

const name= `${info.first}${
  info.middle ? ' ' + info.middle : ''
} ${info.last}${info.suffix ? ' ' + info.suffix : ''}`

可行优化方案 #

方案一：数组过滤拼接法 #

把需要的字段按顺序放入数组，过滤掉无效值后用空格拼接，完全不需要条件判断：

const name = [
  info.first,
  info.middle,
  info.last,
  info.suffix
].filter(Boolean).join(' ');

原理：filter(Boolean)会自动剔除数组里的所有假值（包括undefined、null、空字符串），不管哪个字段不存在或为空，都会被自动跳过，不会在最终结果里多出空格。

方案二：解构赋值+数组处理 #

如果想要更清晰地看到用到的字段，可以先解构对象，再组成数组处理：

const { first, middle, last, suffix } = info;
const name = [first, middle, last, suffix].filter(Boolean).join(' ');

这种方式可读性更强，字段顺序一目了然。

特殊场景补充 #

如果你的业务里需要保留空字符串（这种情况很少见），可以把过滤逻辑改成精准判断未定义的属性：

const name = [
  info.first,
  info.middle,
  info.last,
  info.suffix
].filter(item => item !== undefined).join(' ');

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