js字符串转换为对象格式的3种方法

news2025/2/26 4:06:30

背景:

js字符串转换为对象格式,一般都会想到JSON.parse(),但数据不是标准的 JSON 格式的时候会解析出错,这时候就可以使用eval() 函数、new Function()方法来转换。

常用3种将字符串string转为json对象 方法:

var str = '{"name":"小明","age":18}';

var json = JSON.parse(str);//第一种
var json2 = eval("(" + str + ")");//第二种
var json3 = (new Function("return " + str))();//第三种

 打印效果:

 

详细说明:

JSON.parse()

语法:

JSON.parse(text[, reviver]);

//text:必需, 一个有效的 JSON 字符串。
//reviver: 可选,一个转换结果的函数, 将为对象的每个成员调用此函数。

解析前要确保你的数据是标准的 JSON 格式,否则会解析出错。

情况一:有的人可能会习惯写成对象形式的字符串,如:str = '{name:"小明",age:18}'; 结果使用JSON.parse()来转化会报错,因为使用JSON.parse需严格遵守JSON规范。

情况二:JSON.parse使用单引号来套双引号,如果反过来写呢,如:var str = "{'name':'小明', 'age':18}";(相信也不少人习惯用双引号套单引号) 结果使用JSON.parse()来转化也会报错 

eval() 函数

定义和用法:

eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行。

如果参数是一个表达式,eval() 函数将执行表达式。如果参数是Javascript语句,eval()将执行 Javascript 语句。

语法:

eval(string)

参数描述
string必需。要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句。

eval()的返回值

eval()的返回值遵循以下规则:

1.如果eval()的参数不是字符串,那么eval()将直接返回参数。

2.如果eval()的参数是字符串,那么eval()将这个字符串解析成代码后进行执行,并返回最后一行代码执行的结果。

3.如果字符串无法解析成合法的代码,eval()将抛出SyntaxError错误 

new Function()

这个特殊的new Function表面看起来很奇怪,但在实践中显得非常有用。

语法:

let func = new Function(arg1, arg2, ..., body);

历史原因,参数也可以以逗号分隔的列表的形式给出。

这三个意思相同:

new Function('a', 'b', 'return a + b'); // 基础语法
new Function('a,b', 'return a + b'); // 逗号分隔
new Function('a , b', 'return a + b'); // 逗号加空格分隔

使用new Function创建的函数,其[[Environment]]引用全局词法环境,而不是包含该函数的外部词法环境。因此,他们不能使用外层的变量。但这确实很好,因为它可以使我们免于错误。明确地传递参数在架构上是一种更好的方法,并且不会在使用minifiers时不会产生问题。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405420.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何解决 npm ERR! Cannot read properties of null (reading ‘pickAlgorithm‘)报错问题

1、问题描述: 在vue项目中,当我们在终端使用指令:npm install 下载 node_modules (节点_模块) 时出现报错的情况。 node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。 主要是这个原因&…

基于Web的疫情防控管理系统

目 录 1 绪论........................................................................................................... 1 1.1 研究背景..................................................................................................................... 1 1…

前端如何调用后端接口进行数据交互(极简)

前端调用后端接口,获得数据并渲染 一、介绍 一个完善的系统,前后端交互是必不可少的,这个过程可以分成下面几步: 前端向后端发起请求后端接口接收前端的参数后,开始层层调用方法处理数据后端将最终数据返回给前端接…

vue2和vue3的区别(由浅入深)

前言 vue2和vu3之前的区别,一直以来是面试必考题目,如何回答,回答的层次决定了面试者的对于vue2,3的理解,以及对于vue3目前稳定版本发展的方向的了解,即考察使用程度,又考察了学习能力&#xf…

babel安装失败/报错详细解决方案报以下错误: core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended

babel安装失败/报错详细解决方案 **问题:**在VSCode中执行命令 npm install --global babel-cli 报以下错误: core-js2.6.12: core-js❤️.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V…

Vue路由传参,页面刷新后参数丢失原因与解决方法

vue路由传参方法 在编写vue项目时,时常会使用路由在不同页面中传递参数,常见使用方式如下: this.$router.push({path: "/test",query: {a: 1,b: 2} }) 这样我们就传递了两个参数,在 /test 页面 就可以接收这两个参数…

Python 万能代码模版:爬虫代码篇

你好,我是悦创。 很多同学一听到 Python 或编程语言,可能条件反射就会觉得“很难”。但今天的 Python 课程是个例外,因为今天讲的 **Python 技能,不需要你懂计算机原理,也不需要你理解复杂的编程模式。**即使是非开发…

Vite打包性能优化之开启Gzip压缩

在使用 vite 进行项目打包时,默认已经帮我们做了一些优化工作,比如代码的压缩,分包等等。除此之外,我们还有一些可选的优化策略,比如使用 CDN ,开启 Gzip 压缩等。本文会介绍在 vite 中使用插件来开启 Gzip…

vue-router路由懒加载

路由懒加载指的是打包部署时将资源按照对应的页面进行划分,需要的时候加载对应的页面资源,而不是把所有的页面资源打包部署到一块。避免不必要资源加载。(参考vue项目实现路由按需加载(路由懒加载)的3种方式_小胖梅的博客-CSDN博客_vue懒加载…

原生微信小程序/uniapp使用空格占位符无效解决方法

最近碰到一个需求&#xff0c;在一个<text>文本中的前后添加空格占位符&#xff0c;总所周知&#xff0c;我并不会前端&#xff0c;于是我查看了原生微信小程序以及uniapp官方文档&#xff0c;得到了以下答案&#xff1a; 原生微信小程序官方文档 uniapp官方文档 从文档…

毕业设计-基于微信小程序的校园二手闲置物品交易系统

目录 前言 课题背景与简介 实现设计思路 一、需求分析 二、微信小程序云开发框架及其设计流程 三、功能测试以及性能测试 四、总结 实现效果样例 更多帮助 前言 &#x1f4c5;大四是整个大学期间最忙碌的时光,一边要忙着备考或实习为毕业后面临的就业升学做准备,一边要…

如何创建一个vue项目(详细步骤)

一、环境准备 1、安装 node.js 下载地址&#xff1a;https://nodejs.org/en/ 2、检查是否安装成功&#xff1a;输出版本号说明安装成功 二、搭建 vue 环境 1、全局安装脚手架 vue-cli 在命令行输入&#xff1a; npm install vue-cli -g &#xff08;vue-lcli2) npm install…

前端面试题及答案整理(2022最新版)

收集整理2022年最新前端面试题及答案&#xff0c;方便平时翻看记忆&#xff0c;欢迎各位大佬们补充。 一般来说&#xff0c;把下面基础中的高频题写熟练就差不多了。当然去面大厂这些远远不够&#xff0c;还要再刷一些算法题。 基础 高频 1.手写 instanceof // 原理&#x…

【Node.js实战】一文带你开发博客项目(使用假数据处理)

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;也会涉及到服务端 &#x1f4c3;个人状态&#xff1a; 在校大学生一枚&#xff0c;已拿 offer&#xff08;秋招&#xff09; &#x1f947;推荐学习&…

另一种解决Failed to execute goal on project xxx: Could not resolve dependencies for project com的方法

周青的日常问题记录 项目场景&#xff1a; 学习硅谷电商毕设项目_微服务版本&#xff0c;建站练手。进行到商城前端服务开发的用户服务 store-front-user阶段&#xff0c;pom文件导入依赖报错。 问题描述 报错为 Unresolved dependency: com.atguigu:store-commons:jar:1.0.0…

【 Apifox】Apifox接口设计

Apifox官网地址&#xff1a;http://apifox.cn/a103abcc 文章目录一、接口设计 (接口文档)二、如何定义接口&#xff1f;三、接口路径四、基础信息五、请求参数1.Params 参数2.Body 参数3.Body 参数类型六、参数中使用环境变量&#xff08;或全局变量/临时变量&#xff09;七、返…

VSCode中ESLint插件修复+配置教程

文章目录vscodeeslint插件配置教程如果不好用排查1: 如果出现后面回车符问题排查2: 保存时好了但是一瞬间代码又回来了排查3: 右下角是否开启eslint服务排查4: 如果保存还是变回去了排查5: ESLint不生效排查6: 如果都用心走了一遍, 还不行额外说明-新文件还是末尾换行问题vscod…

vue.config.js配置proxy代理解决跨越;proxy代理报404;

像我们本地的vue项目运行起来&#xff0c;访问的地址一般是localhost&#xff0c;这个时候请求后台的接口&#xff0c;端口号也不一致&#xff0c;肯定就会存在跨域问题&#xff0c;所以我们要是想正常访问接口的话&#xff0c;就需要解决掉跨域问题。 本文我们是在vue.config.…

New Promise() 基础

阅读目录console.dir(Promise) 打印resolve 做用reject 的用法catch 的用法all 方法的用法console.dir(Promise) 打印 Promise 是一个构造函数&#xff0c;本身身上有 all、reject、resolve 这几个方法&#xff0c;原型上有 then、catch 等方法。 所以 Promise new 出来的对象…

VUE使用Three.js实现模型,点击交互,相机旋转视角跟随移动(Threejs中使用Tweenjs,含demo源码)

目录 一、Three.js是什么&#xff1f; 二、VUE简单使用Three.js步骤 1.npm安装 2.template模板 3.引入库 4.定义全局变量 5.初始化场景 6.初始化相机 7.初始化灯光 8.初始化渲染器 9.创建模型(这里我搭建的模型是一个简单双面货架模型) 10.根据浏览器窗口自适应 11…