JS中with的替代方法与String中的正则方法详解


Posted in Javascript onDecember 23, 2016

with 语法

在代码中,要执行这么一个函数

function computeExpression(exp, scope) {
 try {
  with (scope) {
   return eval(exp);
  }
 } catch (e) {
  console.error('ERROR', e);
 }
}

要求在scope 作用域中执行,什么意思???

比如

scope = {a:10,b:5};
exp = a*b;

要求计算结果为15,这种情况,常规情况下要使用 with语法。

但是:

js的解释器需要检查with块中的变量是否属于with包含的对象,这将使with语句执行速度大大下降,并且导致js语句很难被优化。

在严格模式中,with语法是被禁用的。

而我使用ES6语法来编写这个库的,默认启用了严格模式了。所以不得已,自己模拟了一个with 的语法。

先看代码

function replaceWith(scopeName, exp) {
 exp = " " + exp.trim();
 let quickRegex = /([\s\+\-\*\/%&\|\^!\*~]\s*?)([a-zA-Z_$][a-zA-Z_$0-9]*?)/g;
 exp = exp.replace(quickRegex, (a, b, c) => {
  return b + scopeName + '.' + c;
 });
 return exp;
}

首先把首位的空格全部去掉,为了和后面的统一,在开头加上一个空格。

第一个正则匹配出犹如"t.e==0 ? f : d"的表达式中的变量会被作为c提取出来,符号作为 b提取出来。

测试一下

JS中with的替代方法与String中的正则方法详解

现在已经可以返回一个表达式了,改装一下,让表达式直接在里面执行

function replaceWith(scope, exp) {
 exp = " " + exp.trim();
 let quickRegex = /([\s\+\-\*\/%&\|\^!\*~]\s*?)([a-zA-Z_$][a-zA-Z_$0-9]*?)/g;
 exp = exp.replace(quickRegex, (a, b, c) => {
  return b + 'scope.' + c;
 });
 let func = new Function("scope", "return " + exp);
 return func(scope);
}

测试一下

JS中with的替代方法与String中的正则方法详解

大功告成。

可能中间正则写的不好,还有其他不严密的地方,欢迎园友补充。

String 原型上的正则方法

好久都没怎么写过大量代码了,看到 Sring.prototype.split(//); 这个正则表达式,竟然把分割符号都给加到数组中了,很惊讶,在MDN上学了一下。顺便做个整理,算是补充吧。

String.prototype.split(separator,[limit])

separator:指定用来分割字符串的字符(串)。separator 可以是一个字符串或正则表达式。 如果忽略 separator,则返回整个字符串的数组形式。如果 separator 是一个空字符串,则 str 将会把原字符串中每个字符的数组形式返回。

limit一个整数,限定返回的分割片段数量。split 方法仍然分割每一个匹配的 separator,但是返回的数组只会截取最多 limit 个元素。

当找到一个 seperator 时,separator 会从字符串中被移除,返回存进一个数组当中的子字符串。如果忽略 separator 参数,则返回的数组包含一个元素,该元素是原字符串。如果 separator 是一个空字符串,则 str 将被转换为由字符串中字符组成的一个数组。

注意:

Note: 当字符串为空时,split 返回一个包含一个空字符串的数组,而不是一个空数组。

如果 separator 是一个正则表达式,且包含捕获括号(capturing parentheses),则每次匹配到 separator 时,捕获括号匹配的结果将会插入到返回的数组中。

var myString = "hello world";
var splits = myString.split(();

console.log(splits);

输出

["hello world"]

var myString = "Hello 1 word. Sentence number 2.";
var splits = myString.split(/(\d)/);

console.log(splits);

输出

Hello ,1, word. Sentence number ,2,.

String.prototype.replace()

这个方法开始已经用到,就不再介绍。

String.prototype.match(Regex)

当字符串匹配到正则表达式(regular expression)时,match() 方法会提取匹配项。

如果正则表达式没有 g 标志,返回和 RegExp.exec(str) 相同的结果。而且返回的数组拥有一个额外的 input 属性,该属性包含原始字符串。另外,还拥有一个 index 属性,该属性表示匹配结果在原字符串中的索引(以0开始)。

"1aef2af3ef4 5".match(/[a-z]*(\d)/)

输出

["1", "1"]

如果正则表达式包含 g 标志,则该方法返回一个包含所有匹配结果的数组。如果没有匹配到,则返回 null。

注意,如果加g, 则分组无用

"1aef2af3ef4 5".match(/[a-z]*(\d)/g)

输出

["1", "aef2", "af3", "ef4", "5"]

String.prototype.search(Regex)

search() 方法执行一个查找,看该字符串对象与一个正则表达式是否匹配。

如果匹配成功,则 search() 返回正则表达式在字符串中首次匹配项的索引。否则,返回 -1。

类似于正则表达式的 test 方法 。

"aeg56".search(/[a-z]\d+/)

输出

2

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
跟我学习javascript的循环
Nov 18 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
vue实现简单loading进度条
Jun 06 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 Javascript
Bootstrap源码解读排版(1)
Dec 23 #Javascript
简单实现JS倒计时效果
Dec 23 #Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 #Javascript
jquery dataview数据视图插件使用方法
Dec 23 #Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 #Javascript
Bootstrap源码解读按钮(5)
Dec 23 #Javascript
基于bootstrap的选择框插件icheck
Dec 23 #Javascript
You might like
thinkphp模板用法和内容输出实例
2014/11/28 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
python使用Tesseract库识别验证
2018/03/21 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
python基于property()函数定义属性
2020/01/22 Python
基于python3实现倒叙字符串
2020/02/18 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
少儿节目主持串词
2014/04/02 职场文书
活动总结格式范文
2014/04/26 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
世界遗产的导游词
2015/02/13 职场文书
政协委员个人总结
2015/03/03 职场文书
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server