ES6中如何在两个字符串间添加空格？寻求更优实现方案

1. CSS控制间距（最推荐） #

把姓名、年龄拆成独立DOM元素，用CSS的间距属性精准控制，这是最易维护、美观的方式：

<!-- 模板示例 -->
<div class="person-info">
  <span>{{ t('Name') }} {{ personName }}</span>
  <span>{{ t('age') }} {{ personAge }}</span>
</div>

/* 方式一：用margin单独控制首个元素右侧间距 */
.person-info span:first-child {
  margin-right: 1.5rem; /* 按需调整间距大小 */
}

/* 方式二：flex布局的gap（更简洁的批量控制） */
.person-info {
  display: flex;
  gap: 1.5rem;
}

2. 使用语义化空白字符 #

如果必须在字符串内控制间距，用单个性价比更高的空白字符替代多个\u00A0：

• 全角空格（\u3000）：宽度等于一个汉字，视觉对齐更舒服
• 半角空格（\u2009）：比普通空格宽，比全角窄，适合紧凑场景

// 全角空格示例
personsList: `${t('Name')} ${personName}\u3000${t('age')} ${personAge}`

// 半角空格示例（双份更接近原效果）
personsList: `${t('Name')} ${personName}\u2009\u2009${t('age')} ${personAge}`

3. 模板字符串直接写空格（需配合CSS） #

如果直接写多个空格，要给容器加上white-space: pre-wrap，避免浏览器自动合并空白：

personsList: `${t('Name')} ${personName}   ${t('age')} ${personAge}`

.persons-list-container {
  white-space: pre-wrap;
}

4. 定义空白常量统一维护 #

如果多处需要相同间距，可定义常量避免硬编码，方便后续统一调整：

const INFO_GAP = '\u3000'; // 或根据需求替换为其他空白字符组合
personsList: `${t('Name')} ${personName}${INFO_GAP}${t('age')} ${personAge}`

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