如何在模板字符串中插入换行？两种尝试方法均无效

嘿，别着急，我来帮你搞定这个问题！首先得明确：JavaScript的模板字面量（`包裹的字符串）本身就原生支持多行内容，你只需要在模板内容里直接换行就行。你的两种尝试没生效，要么是写法没到位，要么是后续显示的时候没处理好换行~

正确创建多行模板字符串的方法 #

直接在`包裹的内容里换行，不需要额外转义或拆分代码行：

// 基础写法：直接在模板内换行
const templateString = `this is my template
string`;

// 更易读的缩进写法
const templateString = `
This is the first line of content
This is the second line
And here's the third line
`;

此时templateString的内容已经包含了换行符\n，你可以用console.log(templateString)直接看到多行输出，或者用templateString.includes('\n')验证换行符确实存在。

为什么你的两种尝试没生效？ #

咱们逐个拆解问题：

• 第一种：拆分代码行但模板内容没换行
  你写的代码：

  const templateString = `this is my template string`；
  

  这里只是把代码语句拆成了两行，但模板字符串的内容本身是连续的，没有换行符，所以最终字符串自然还是一行。要让字符串变成多行，必须在`包裹的内容里手动换行，而不是拆分代码语句。

• 第二种：模板内换行但显示时没处理
  你写的代码：

  const templateString = `this is my template
   string`；
  

  其实这个字符串本身已经是多行的了！如果你用console.log(templateString)打印，肯定能看到两行内容。但如果是在HTML页面中展示，HTML会默认把换行符当成空格处理，导致看起来还是一行。这时候需要做两个处理之一：

  // 方法1：把换行符转换成HTML的<br>标签
  const htmlString = templateString.replace(/\n/g, '<br>');
  
  // 方法2：给DOM元素设置CSS属性保留换行
  const targetElement = document.getElementById('your-element');
  targetElement.style.whiteSpace = 'pre-wrap';
  targetElement.textContent = templateString;
  

额外小技巧 #

如果模板里的缩进会被保留在字符串中，导致内容有多余空格，可以用trim()去掉首尾的空白字符：

const templateString = `
  This is line 1 with indent
  This is line 2 with indent
`.trim();
// 结果会去掉首尾的换行和空格，只保留内容里的缩进

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