ES6模板字面量：如何添加条件多行并移除多余缩进？

云上老周

2026-5-11

解决方法：用数组过滤+拼接消除空行与多余缩进

你的问题本质是模板字符串中条件分支会插入空字符串和多余缩进，进而产生无效的空行和多余空格。最简洁直接的方案是把每个条件内容放到数组中，过滤掉空值后再用换行符拼接，这样既能自动移除空行，又能避免多余缩进。

基础实现（针对你的JSX模板场景）

const reactComponentJSX = [
  condition1 ? '<Menu/>' : '',
  condition2 ? '<p>Welcome to my app</p>' : '',
  condition3 ? '<Body/>' : '',
  condition4 ? '<h1>Good bye</h1>' : ''
].filter(Boolean).join('\n');

原理说明：

filter(Boolean) 会自动剔除数组中的空字符串、null、undefined 等假值，只保留条件为真时的有效内容。
join('\n') 把所有有效内容用换行符连接，生成的结果完全符合你的期望：没有多余空行，每行内容也没有额外缩进。

当 condition1 和 condition4 为 false 时，最终输出就是：

<p>Welcome to my app</p>
<h1>Good bye</h1>

延伸场景1：JSX组件中条件渲染标签

如果是在React组件的render方法（或函数式组件）里直接写条件JSX，同样可以用数组过滤的思路：

function MyApp() {
  return (
    <div className="app-container">
      {[
        condition1 && <Menu key="menu" />,
        condition2 && <p key="welcome">Welcome to my app</p>,
        condition3 && <Body key="body" />,
        condition4 && <h1 key="goodbye">Good bye</h1>
      ].filter(Boolean)}
    </div>
  );
}

注意：JSX数组需要给每个元素加唯一key属性，避免React的警告。

延伸场景2：条件导入库

生成JSX文件时的条件导入也可以用同样的方式处理：

const importStatements = [
  conditionReact ? 'import React from "react";' : '',
  conditionRouter ? 'import { BrowserRouter } from "react-router-dom";' : '',
  conditionAxios ? 'import axios from "axios";' : ''
].filter(Boolean).join('\n');

这样生成的导入语句干净整洁，不会有多余的空行。

进阶方案：自定义模板标签函数（可选）

如果需要更复杂的格式化（比如统一缩进、处理嵌套内容），可以自定义一个模板标签函数来处理字符串：

function cleanTemplate(strings, ...values) {
  // 拼接所有内容
  let result = strings.reduce((acc, str, i) => acc + str + (values[i] || ''), '');
  // 移除多余空行和每行开头的缩进
  return result.replace(/^\s*\n/gm, '').trim();
}

// 使用方式
const reactComponentJSX = cleanTemplate`
  ${condition1 ? '<Menu/>' : ''}
  ${condition2 ? '<p>Welcome to my app</p>' : ''}
  ${condition3 ? '<Body/>' : ''}
  ${condition4 ? '<h1>Good bye</h1>' : ''}
`;

这个函数会自动移除所有开头的空行和每行的前置空格，不过对于你的基础场景，数组过滤的方法已经足够简单高效。

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