如何在JavaScript中解析.json文件数据并实现多行JSON格式化编写

方案1：直接导入外部格式化JSON文件（推荐） #

将你需要的格式化JSON内容单独存为后缀为.json的文件（比如命名为gameFrames.json），不需要做任何转义，直接按你期望的缩进格式编写即可，根据运行环境选择对应导入方式：

• Node.js CommonJS环境
  直接通过require导入，自动完成解析，无需手动调用JSON.parse：

  const frameData = require('./gameFrames.json')
  

• ES Module 环境（浏览器原生ESM、Vite/Webpack等前端工程）
  导入时指定json类型断言即可：

  import frameData from './gameFrames.json' assert { type: 'json' }
  

• 无构建工具的普通静态浏览器页面
  通过fetch异步读取文件内容：

  fetch('./gameFrames.json')
    .then(res => res.json())
    .then(frameData => {
      // 此处可直接使用解析完成的数据
      console.log(frameData)
    })
  

方案2：在JS文件内直接编写格式化数据 #

如果不需要单独维护JSON文件，可选择以下两种方式：

• 使用模板字符串包裹JSON内容
  用反引号`代替普通单/双引号包裹JSON，支持直接换行不会触发语法报错，之后再解析即可：

  const nameJson = `
  [
      {
        "Name": "Name1",
        "Fair": 16,
        "Fair_OS": -12,
        "UPB": 3,
        "UPB_OS": "-99"
      },
      {
        "Name": "Name2",
        "Fair": 14,
        "FairOS": -7,
        "UPB": 14,
        "UPB_OS": "-99"
      }
  ]
  `
  const frameData = JSON.parse(nameJson)
  

• 直接编写JS对象字面量（最简便）
  你需要的JSON结构本身就是合法的JS对象语法，不需要包裹为字符串也不需要手动解析，直接编写即可，VSCode支持自动格式化：

  const frameData = [
      {
        Name: "Name1",
        Fair: 16,
        Fair_OS: -12,
        UPB: 3,
        UPB_OS: "-99"
      },
      {
        Name: "Name2",
        Fair: 14,
        FairOS: -7,
        UPB: 14,
        UPB_OS: "-99"
      }
  ]
  // 可直接调用数据，无需额外解析步骤
  console.log(frameData[0].Name)
  

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