JavaScript中join处理后的换行字符串存入对象后显示异常的解决方法

为什么会显示\n而非实际换行？ #

你的exampleArray本身是正确包含换行符的字符串，问题出在控制台的对象序列化显示逻辑：当你打印整个对象时，控制台会以"字符串原始内容"的形式展示属性值，把转义字符（比如\n）直接显示出来，而非渲染成实际换行，但字符串本身的换行是真实存在的。

解决办法分两种场景： #

1. 在控制台看到实际换行

直接打印对象的value属性即可，控制台会自动渲染换行：

console.log(theObj.value);

这样输出就会和之前单独打印exampleArray一样：

Hello

world

example

2. 在HTML页面中显示实际换行

如果是要在网页上展示这个字符串的换行，有两种常用方式：

• 方式一：把字符串中的\n替换成HTML的换行标签<br>：

const displayText = theObj.value.replace(/\n/g, '<br>');
// 之后将displayText插入到DOM中

• 方式二：给承载文本的DOM元素添加CSS样式，让它识别\n为换行：

.text-container {
  white-space: pre-line; /* 或者pre-wrap，根据需求选择 */
}

这样直接把theObj.value插入到该元素中，就能显示实际换行。

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