如何在网页段落中正确打印嵌套对象且不影响其他数据类型

我需要在网页段落中展示一组数据（非控制台输出），示例原始数据如下：

["accept", "#PID<0.395.0>", {"id": "N1", "num": 1}, "Appeltaart"]

期望的展示格式：

[accept, #PID<0.395.0>, {id: N1, num: 1}, Appeltaart]

但遇到两个问题：

• 直接输出时，嵌套对象会显示为[object Object]，还丢失了列表格式：

accept, #PID<0.395.0>,[object Object], Appeltaart

• 使用JSON.stringify()预处理后，所有值都会被添加引号，不符合期望：

["accept", "#PID<0.395.0>", {"id": "N1", "num": 1}, "Appeltaart"]

请问如何实现符合期望的输出效果？

可以写一个递归函数，针对数组、对象、字符串等不同类型做针对性处理，既保留结构，又去掉不必要的引号：

function formatData(data) {
  // 处理数组
  if (Array.isArray(data)) {
    const formattedItems = data.map(item => formatData(item)).join(', ');
    return `[${formattedItems}]`;
  }
  // 处理对象（排除null）
  else if (typeof data === 'object' && data !== null) {
    const formattedEntries = Object.entries(data).map(([key, value]) => {
      return `${key}: ${formatData(value)}`;
    }).join(', ');
    return `{${formattedEntries}}`;
  }
  // 处理字符串：直接返回，不添加引号
  else if (typeof data === 'string') {
    return data;
  }
  // 处理数字、布尔等原始类型
  else {
    return String(data);
  }
}

// 使用示例
const originalData = ["accept", "#PID<0.395.0>", {"id": "N1", "num": 1}, "Appeltaart"];
const formattedText = formatData(originalData);

// 将结果插入网页的代码块中
document.querySelector('pre code').textContent = formattedText;

效果说明 #

运行上述代码后，formattedText的值就是你期望的格式：

[accept, #PID<0.395.0>, {id: N1, num: 1}, Appeltaart]

扩展说明 #

如果你的数据里存在需要保留引号的特殊字符串（比如包含空格、标点的内容），可以在字符串处理分支里添加判断逻辑：

else if (typeof data === 'string') {
  // 若字符串包含空格或特殊符号，添加引号；否则直接返回
  if (/[\s{}[\],:]/.test(data)) {
    return `"${data}"`;
  }
  return data;
}

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