如何解决JS模板字面量使用trim()后仍残留多余制表符与空格的问题

trim() 方法仅能清除模板字符串首尾的空白字符，字符串内部每一行开头的缩进空格、制表符不属于首尾范围，不会被 trim() 处理，这就是你输出第一行正常、第二行仍残留缩进的原因。

下面是三种常用的处理方案，你可以根据自己的编码习惯选择：

• 方案1：不保留代码缩进（最简单直接）
  写模板字符串时，内部内容不要跟随外层函数的缩进层级，直接顶格写即可，修改后代码如下：

  var lineOne = `
  

${i} bottles of beer on the wall, ${i} bottles of beer.
Take one down pass it around, ${i - 1} bottles of beer on the wall.
`.trim();

缺点是会破坏代码整体的缩进美观度，适合短模板字符串使用。

- 方案2：使用通用去缩进工具函数
你可以自己实现一个简易的去缩进工具函数，自动匹配模板内的最小缩进量批量清除，不破坏代码原有缩进结构：
```js
// 通用去缩进函数
function dedent(str) {
  const lines = str.split('\n')
  // 移除开头的空行
  if (lines[0].trim() === '') lines.shift()
  // 计算所有非空行的最小缩进量
  const minIndent = Math.min(
    ...lines
      .filter(line => line.trim())
      .map(line => line.match(/^\s*/)[0].length)
  )
  // 移除每行对应长度的缩进后拼接，最后清除首尾空白
  return lines.map(line => line.slice(minIndent)).join('\n').trim()
}

// 业务代码中直接调用即可
var lineOne = dedent(`
              ${i} bottles of beer on the wall, ${i} bottles of beer.
              Take one down pass it around, ${i - 1} bottles of beer on the wall.
              `)

• 方案3：正则批量替换固定缩进
  如果你确定模板内每行的固定缩进长度，可以用多行正则批量清除，比如你的示例中每行开头有16个空格，写法如下：

  var lineOne = `
                ${i} bottles of beer on the wall, ${i} bottles of beer.
                Take one down pass it around, ${i - 1} bottles of beer on the wall.
                `.replace(/^\s{16}/gm, '').trim()
  

  其中正则的 g 代表全局匹配，m 代表多行匹配，可以命中每一行开头的空白字符。

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