javascript中eval解析JSON字符串


Posted in Javascript onFebruary 27, 2016

我们都知道,高级浏览器可以用  JSON.parse() API 将一个 JSON 字符串解析成 JSON 数据,稍微欠妥点的做法,我们可以用 eval() 函数。

var str = '{"name": "hanzichi", "age": 10}';
var obj = eval('(' + str + ')');
console.log(obj); // Object {name: "hanzichi", age: 10}

是否注意到,向 eval() 传参时,str 变量外裹了一层小括号?为什么要这样做?

我们先来看看 eval 函数的定义以及使用。

eval() 的参数是一个字符串。如果字符串表示了一个表达式,eval() 会对表达式求值。如果参数表示了一个或多个 JavaScript 声明, 那么 eval() 会执行声明。不要调用 eval() 来为算数表达式求值; JavaScript 会自动为算数表达式求值。

简单地说,eval 函数的参数是一个字符串,如果把字符串 “noString” 化处理,那么得到的将是正常的可以运行的 JavaScript 语句。

怎么说?举个栗子,如下代码:

var str = "alert('hello world')";
eval(str);

执行后弹出 “hello world”。我们把 str 变量 “noString” 化,粗暴点的做法就是去掉外面的引号,内部调整(转义等),然后就变成了:

alert('hello world')

very good!这是正常的可以运行的 JavaScript 语句!运行之!

再回到开始的问题,为什么 JSON 字符串要裹上小括号。如果不加,是这个样子的:

var str = '{"name": "hanzichi", "age": 10}';
var obj = eval(str); // Uncaught SyntaxError: Unexpected token :

恩,报错了。为什么会报错?试试把 str “noString” 化,执行一下:

{"name": "hanzichi", "age": 10}; 
// Uncaught SyntaxError: Unexpected token :

毫无疑问,一个 JSON 对象或者说是一个对象根本就不是能执行的 JavaScript 语句!等等,试试以下代码:

var str = '{name: "hanzichi"}';
var obj = eval(str);
console.log(obj); // hanzichi

这又是什么鬼?但是给 name 加上 “” 又报错?

var str = '{"name": "hanzichi"}';
var obj = eval(str); // Uncaught SyntaxError: Unexpected token :
console.log(obj);

好吧,快晕了,其实还是可以将 str “nostring” 化,看看是不是能正确执行的 JavaScript 语句。前者的结果是:

{name: "hanzichi"}

这确实是一条合法的 JavaScript 语句。{} 我们不仅能在 if、for 语句等场景使用,甚至可以在任何时候,因为 ES6 之前 JavaScript 只有块级作用域,所以对于作用域什么的并不会有什么冲突。去掉 {} 后 name: "hanzichi"也是合法的语句,一个 label 语句,label 语句在跳出嵌套的循环中非常好用,具体可以参考 label,而作为 label 语句的标记,name 是不能带引号的,标记能放在 JavaScript 代码的任何位置,用不到也没关系。

一旦一个对象有了两个 key,比如 {name: "hanzichi", age: 10} ,ok,两个 label 语句?将 “hanzhichi” 以及 10 分别看做是语句,但是 语句之间只能用封号连接!(表达式之间才能用逗号)。所以改成下面这样也是没有问题的:

var str = '{name: "hanzichi"; age: 10}';
var obj = eval(str); 
console.log(obj); // 10

越扯越远,文章开头代码的错误的原因是找到了,为什么套个括号就能解决呢?简单来说,() 会把语句转换成表达式,称为语句表达式。括号里的代码都会被转换为表达式求值并且返回,对象字面量必须作为表达式而存在。

本文并不会大谈表达式,值得记住的一点是,表达式永远有一个返回值。大部分表达式会包裹在() 内,小括号内不能为空,如果有多个表达式,用逗号隔开,也就是所谓的逗号表达式,会返回最后一个的值。

Javascript 相关文章推荐
JavaScript与函数式编程解释
Apr 27 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
javascript先序遍历DOM树的方法
Feb 27 #Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 #Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 #Javascript
JS原型、原型链深入理解
Feb 27 #Javascript
Javascript中Date类型和Math类型详解
Feb 27 #Javascript
原生javascript实现匀速运动动画效果
Feb 26 #Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 #Javascript
You might like
中国第一家无线电行
2021/03/01 无线电
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
php jsonp单引号转义
2014/11/23 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
PHP学习笔记之session
2018/05/06 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
Javascript 刷新全集常用代码
2009/11/22 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
中年人生感言
2014/02/04 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
放弃继承权公证书
2015/01/23 职场文书
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL