js识别字符串中换行符

问题：

在JavaScript中打印后端（服务端）获取包含\n,\t,\r等字符串，打印或使用会直接当作字符串输出，不会实现换行，回车等效果。

复现：

JavaScript中打印

const str1 = "好好好\n\n好好好"
const api_str = res.data // 通过调用接口获得的字符串
console.log("str1 type==",typeof str1);
console.log("api_str type==",typeof api_str);
console.log("str1==",str1);
console.log("api_str==",api_str);

输出：

str1 type== string
api_str type== string
str1== 好好好
好好好
api_docs== 好好好\n\n好好好

可以看出虽然两个变量都是字符串类型，但是输出的结果却不相同，str1有换行的效果，从后端获取的字符却没有效果，而是直接打印出来\n\n。

原因：

在JavaScript中使用字符串时，会根据字符串的内容来处理换行符\n。如果字符串是直接写在代码中的（比如变量str1），换行符\n会被转义，所以在控制台中你可以看到它们的效果，即换行。

然而，如果字符串是从其他地方（如服务器的响应）获取的，而这个字符串包含了转义字符（如\n），它们不会自动被转义。所以，当你打印变量res.api_docs时，\n被当作普通字符的一部分输出，而不是被解释为换行符。

解决：

如果你想让在服务端获取的字段中的\n表现出换行效果，你可以在打印之前将字符串中的\n转换成真正的换行，比如使用res.api_docs.replace(/\\n/g, '\n')。这样，它会将字符串中的转义字符\n替换成真正的换行符。

确保所有的转义序列（不只是\n）都被正确处理，你可以使用一个函数来将字面上的转义字符转换为它们对应的特殊字符。以下是一个可以处理常见转义序列的函数：

function decodeEscapeSequence(str) {
  return str
    .replace(/\\n/g, '\n') // 换行符
    .replace(/\\r/g, '\r') // 回车符
    .replace(/\\t/g, '\t') // 制表符
    .replace(/\\b/g, '\b') // 退格符
    .replace(/\\f/g, '\f') // 换页符
    .replace(/\\'/g, '\'') // 单引号
    .replace(/\\"/g, '\"') // 双引号
    .replace(/\\\\/g, '\\'); // 反斜杠
}

// 使用方法
console.log("api_str==", decodeEscapeSequence(res.api_str));

这个函数通过替换字符串中的字面转义序列来生成正确的特殊字符。你可以根据需要扩展该函数以处理更多的转义序列。

注意：

如果res.api_str是从不受信任的来源获取的，直接在页面上渲染这些转换后的字符串可能会引起安全问题（例如XSS攻击）。因此，在处理完转义字符后，如果你需要在Web页面上显示这些内容，请确保对其进行适当的清理或使用安全的文本渲染方法，如React的dangerouslySetInnerHTML，并配合DOMPurify这样的库来净化内容。