JavaScript中如何保留函数返回结果中的空格字符

JavaScript 原生的字符串拼接（+运算符、模板字符串）本身不会自动过滤任何空格、换行、制表符类的空白字符，出现空格丢失基本都是代码逻辑错误或者渲染层规则导致的。

现有代码的问题 #

你当前写的固定插入中间空格的逻辑，没有处理「参数本身首尾带空格」的场景，会出现多余空格；如果后续为了处理空值随意给参数加去空格逻辑，还会直接把传入的空格参数过滤掉。

正确实现 #

按照你给出的预期运行效果，实现时只要遵循两个原则：不随意对入参做trim()类去空白操作、根据参数首尾是否已有空格判断要不要加中间间隔空格，就能完整保留所有传入的空格字符：

function concatString(val1, val2) {
  // 兜底处理null/undefined入参，避免拼接出"null""undefined"这类异常值
  const str1 = String(val1 ?? '')
  const str2 = String(val2 ?? '')

  // 第二个参数为空直接返回第一个参数
  if (!str2) return str1
  // 第一个参数末尾、第二个参数开头已经有空格时，不需要额外插入间隔空格
  const needInsertGap = !str1.endsWith(' ') && !str2.startsWith(' ')
  
  return str1 + (needInsertGap ? ' ' : '') + str2
}

效果验证 #

concatString('test', 'ok') // 输出 'test ok'，符合预期
concatString('test', ' ') // 输出 'test '，传入的空格完整保留，符合预期
concatString('hello ', 'world') // 输出 'hello world'，不会出现多余空格
concatString('foo', '  bar') // 输出 'foo  bar'，参数自带的前导空格完整保留

常见空格丢失的避坑点 #

• 不要随意对入参调用trim()/trimStart()/trimEnd()方法，除非业务明确要求去除首尾空白，否则传入的纯空格、前后导空格都会被直接删除。
• 不要用「值是否为falsy」直接判定参数为空后跳过拼接，纯空格字符串' '是长度为1的真值，但如果先做了trim处理就会变成空串被误判为无效值，导致空格丢失。
• 如果拼接后的字符串渲染到HTML页面时看起来空格“消失”，不是JS拼接的问题：HTML默认会合并文本节点里的连续空白为单个空格、忽略元素首尾空白，给对应DOM元素加CSS属性white-space: pre-wrap就能正常显示所有空白字符。

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