JavaScript中换行符\n不生效求助：字符串奇偶长度分类场景

问题概述 #

编写了一个对句子中字符串按长度奇偶分类的函数，但使用\n无法实现换行效果，预期输出两行内容，实际输出为一行。

代码问题分析 #

1. 未定义变量错误：代码中使用了未声明的strings变量，应替换为传入的参数t。
2. 换行符渲染问题：\n在HTML环境中不会被解析为换行（HTML默认忽略空白字符），如果setOutput是用于更新组件状态并渲染到DOM，直接用\n不会生效；若为控制台输出，\n有效，但你的场景显然是DOM渲染。
3. 数组拼接格式问题：直接拼接数组${even}会默认用逗号分隔，建议用join(', ')手动控制分隔符，格式更规范。

解决方法 #

根据渲染场景选择以下方案：

• 方案1：用HTML换行标签<br>替代\n：适合直接渲染到DOM的场景。
• 方案2：用<pre>标签包裹输出内容：<pre>标签会保留文本的原始格式（包括换行和空格），适合需要保留排版的场景。

修正后的代码 #

方案1：使用<br>实现换行 #

const evenOddLength = (t: string) => {
  const text = t.split(' ')
  const even: string[] = []
  const odd: string[] = []

  for(let i = 0; i < text.length; i++) {
    if(text[i].length % 2 === 0) {
      even.push(text[i])
    } else {
      odd.push(text[i])
    }
  }

  setOutput(`Even string: [ ${even.join(', ')} ],<br>Odd string: [ ${odd.join(', ')} ]`)
}

方案2：使用<pre>保留格式 #

const evenOddLength = (t: string) => {
  const text = t.split(' ')
  const even: string[] = []
  const odd: string[] = []

  for(let i = 0; i < text.length; i++) {
    if(text[i].length % 2 === 0) {
      even.push(text[i])
    } else {
      odd.push(text[i])
    }
  }

  setOutput(`<pre>Even string: [ ${even.join(', ')} ],\nOdd string: [ ${odd.join(', ')} ]</pre>`)
}

验证结果 #

修正后输出符合预期：

Even string: [ String, be, iterated, loop ],
Odd string: [ The, Array, can, using, the, for ]

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