TypeScript优雅拼接字符串变量与数组（避多余空格、支持多元素）

优雅的一行解决方案 #

这绝对是最简洁且健壮的实现方式，完美解决你提到的所有问题，还能轻松扩展：

const myString = ['result:', var1, ...arr1, var2].filter(Boolean).join(' ');

思路拆解 #

• 统一收集元素：用数组字面量把固定前缀、字符串变量、数组元素（通过扩展运算符...arr1展开成单个元素）全部整合到一个数组里，后续要加更多变量或数组，直接往数组里追加即可
• 自动过滤空内容：filter(Boolean)会自动剔除所有假值（空字符串''、undefined、null等），确保只有非空内容进入拼接环节
• 安全拼接分隔：最后用join(' ')把剩余元素用单个空格连接，天然避免了连续空格和末尾空格的问题

场景验证 #

举几个实际场景看看效果：

• 当var1=''，arr1=[]，var2='final' → 结果：'result: final'
• 当var1='hello'，arr1=['world', '', 'test']，var2='' → 结果：'result: hello world test'
• 当所有变量/数组都为空 → 结果：'result:'（如果连前缀都可能为空，把'result:'换成对应变量即可）

这种方式不仅一行搞定，扩展性也极强——要加var3或者arr2？直接改成['result:', var1, ...arr1, var2, var3, ...arr2].filter(Boolean).join(' ')就行，完全不用额外写空值判断逻辑。

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