JavaScript模板字符串默认保留换行与空格，需有意识控制：用trim()和replace(/\s+/g,' ')清理空白；String.raw避免转义干扰；自定义标签函数compact实现智能压缩；注释式换行提升可读性。
JavaScript 模板字符串（Template Literals）天然保留换行符和内部空格，这在写多行 HTML 或对齐结构化文本时很直观，但也常导致意外的空白字符混入结果中。解决的关键不是“去掉所有换行”，而是有意识地控制——该保留的保留，该压缩的压缩。
用 trim() 和 replace() 清理首尾与多余空白
最常用、最直接的方式是链式调用 trim() 去除首尾空白，再用正则替换连续空白为单个空格：
const html = `
<div>
<p>Hello</p>
<span>World</span>
</div>
`.trim().replace(/\s+/g, ' '); // → "<div> <p>Hello</p> <span>World</span> </div>"注意：\s+ 会把换行、制表符、多个空格全换成一个空格，适合纯文本或简单 HTML；若需保留标签间合理空隙（如 inline 元素），可改用 /\n\s+/g 只处理换行及后续缩进。
用 String.raw 避免转义干扰，再手动格式化
当模板里含反斜杠（如正则、路径、CSS）时，普通模板字符串会误解析 \n、\t。此时用 String.raw 保持原始字符，后续再统一处理空白：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const rawHtml = String.raw`
<ul>
<li>A</li>
<li>B</li>
</ul>
`.trim().replace(/^[ \t]+$/gm, '').replace(/\n\s*/g, ''); // 移除每行开头缩进+换行这里 /^[ \t]+$/gm 匹配纯由空格/制表符组成的空行，/\n\s*/g 把换行加其后缩进全删掉，实现“紧凑单行输出”。
用带逻辑的 函数标签（Tagged Template） 实现智能压缩
定义一个自定义标签函数，在插值前就对静态部分做标准化处理：
function compact(strings, ...values) {
let result = '';
strings.forEach((str, i) => {
// 对每个静态片段：去首尾空、合并中间空白、移除空行
const cleanStr = str
.replace(/^\s+|\s+$/g, '') // 去首尾空
.replace(/\n\s*\n/g, '\n') // 合并连续空行
.replace(/[ \t]+\n/g, '\n') // 清掉行末缩进
.replace(/\n[ \t]+/g, '\n'); // 清掉行首缩进
result += cleanStr + (values[i] ?? '');
});
return result;
}
<p>const name = 'Alice';
const msg = compact<code> Hello, ${name}! Welcome to the app. </code>; // → "Hello, Alice! Welcome to the app."这种方案把格式逻辑封装起来，调用时完全无感，适合项目中统一规范模板输出。
开发阶段小技巧：用 注释式换行 绕过语法限制
如果只是想让代码易读，又不想让换行进最终字符串，可用 JS 注释代替物理换行（仅限不涉及动态插值的静态片段）：
const css = `body{margin:0;padding:0;}/*
*/header{height:60px;}/*
*/main{font-size:16px;}`;虽然略显取巧，但在构建工具未介入时，能快速避免模板内换行污染，且不影响语法高亮和可读性。
