为什么String跟JSON不是同个东西?

很多人会误解JSON仅仅是序列化后的String,但这样的表述并不完全准确。JSON本质上是以字符串(String)形式表示的数据交换格式,但它不仅仅是一个字符串,而是具有特定语法和结构的字符串。

很经常遇到的一个场景:

后端:我给你返回了一段JSON,你转化下再遍历吧。

等前端拿到的时候傻眼了。

前端:喂,真的是JSON?

后端: 千真万确!

那么JSON跟String怎么区分?

  1. 本质

    • String:是一个基本数据类型,用于表示一系列字符(例如文本、数字、符号等)。在前端中,字符串是用单引号(')、双引号(")或反引号(```)括起来的字符序列。
    • JSON:是一种轻量级的数据交换格式。它易于人阅读和编写,同时也易于浏览器解析和生成。在前端中,JSON对象通常被解析为对象、数组、字符串、数字、布尔值或null
  2. 用途

    • String:在前端开发中,字符串用于存储和表示文本数据。它们可以被用于各种目的,包括显示给用户、与其他服务器通信、处理文本数据等。
    • JSON:JSON主要用于存储和交换数据。它经常被用于在服务器和客户端之间传输数据。JSON数据可以很容易地被JavaScript解析,使其成为开发中非常流行的数据格式。
  3. 语法

    • String:在JavaScript中,字符串的语法相对简单,只需要用引号("")将字符序列括起来即可。
    • JSON:JSON的语法更加严格,因为它需要遵循特定的格式。例如,所有的字符串都必须用双引号括起来,对象的键也必须是双引号括起来的字符串。此外,JSON不支持JavaScript中的一些功能,如函数和undefined
  4. 转换

    • 在开发中,我们可以很容易地将JSON字符串解析为JavaScript对象(使用JSON.parse()方法),或者将JavaScript对象转换为JSON字符串(使用JSON.stringify()方法)。

下面是一个简单的例子来说明这种区别:

ini 复制代码
// 这是一个字符串  
let str = "Hello, World!";  
  
// 这是一个JSON字符串(注意双引号和对象的格式)  
let jsonStr = '{"name": "张三", "age": 30, "city": "上海"}';  
  
// 将JSON字符串解析为JavaScript对象  
let obj = JSON.parse(jsonStr);  
console.log(obj.name); // 输出 "张三"  
  
// 将JavaScript对象转换为JSON字符串  
let jsonStr2 = JSON.stringify(obj);  
console.log(jsonStr2); // 输出 '{"name":"张三","age":30,"city":"上海"}'

在这个例子中,str是一个字符串,而jsonStr是一个JSON字符串。通过JSON.parse()方法,我们可以将jsonStr解析为一个JavaScript对象obj。同样地,通过JSON.stringify()方法,我们可以将obj转换回一个JSON字符串jsonStr2

再来个标准的JSON对象跟String伪对象的区别:

javascript 复制代码
      const stringObj = "{'text': 'string obj'}";
      const jsonObj = '{"text": "JSON Obj"}';

      console.log(
       "stringObj: " + typeof stringObj
      )

      console.log(
        "jsonObj: " + typeof jsonObj
      )

      console.log(
        "jsonObj: ", JSON.parse(jsonObj)
      )

      console.log(
        "stringObj: ", JSON.parse(stringObj)  // 报错,不是一个正规格式的JSON
      )

这两个"JSON"看起来很相似,stringObj 是一个字符串字面量,其内容是一个看起来像 JSON 但实际上是用单引号包裹键和字符串值的非标准 JSON 格式。在 JavaScript 中,JSON 对象的键和字符串值通常使用双引号。

那么当后端返回一个string的伪JSON时,我们该怎么去解决呢

typescript 复制代码
const strJson = <T>(
  str: string
): T => {

  if(typeOf(str) !== 'string') {
    return str as any
  }

  try {
    return JSON.parse(str)
  } catch {
    return (new Function(`return ${str}`)())
  }
}

接受一个参数,如果本身不是string则直接返回,如果 JSON.parse(str) 抛出异常(即 str 不是一个有效的 JSON 字符串),函数会捕获这个异常,并尝试通过创建一个新的函数并执行它来处理 str。有同学就会说这个直接执行str不安全,可以多加几道防护去过滤。

注意:可以使用eval代替new Function

我们拿上面例子2为例,看能不能处理这个伪JSON

arduino 复制代码
  console.log(strJson(stringObj))
  console.log(strJson(jsonObj))

这当然是可以的啦,再也不怕拿到伪JSON

相关推荐
类人_猿44 分钟前
ASP.NET Web(.Net Framework) Http服务器搭建以及IIS站点发布
前端·iis·asp.net·.net·http站点服务器
组态软件4 小时前
web组态软件
前端·后端·物联网·编辑器·html
前端Hardy4 小时前
HTML&CSS:MacBook Air 3D 动画跃然屏上
前端·javascript·css·3d·html
loey_ln5 小时前
观察者模式和发布订阅模式
javascript·观察者模式·react.js
cnsxjean7 小时前
SpringBoot集成Minio实现上传凭证、分片上传、秒传和断点续传
java·前端·spring boot·分布式·后端·中间件·架构
ZL_5677 小时前
uniapp中使用uni-forms实现表单管理,验证表单
前端·javascript·uni-app
沉浮yu大海7 小时前
Vue.js 组件开发:构建可重用且高效的 UI 块
前端·vue.js·ui
代码欢乐豆7 小时前
软件工程第13章小测
服务器·前端·数据库·软件工程
sunly_8 小时前
Flutter:启动屏逻辑处理02:启动页
android·javascript·flutter
EasyNTS8 小时前
H5流媒体播放器EasyPlayer.js网页直播/点播播放器如果H.265视频在播放器上播放不流畅,可以考虑的解决方案
javascript·音视频·h.265