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 相关文章推荐
jquery ajax 登录验证实现代码
Sep 23 Javascript
Jquery 动态添加按钮实现代码
May 06 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
vue实现跨域的方法分析
May 21 Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 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
php下通过POST还是GET来传值
2008/06/05 PHP
php模块memcache和memcached区别分析
2011/06/14 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
基于php判断客户端类型
2016/10/14 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
JS 自动安装exe程序
2008/11/30 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
python书籍信息爬虫实例
2018/03/19 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
财务会计实习报告体会
2013/12/20 职场文书
大四学生思想汇报
2014/01/13 职场文书
幼儿园校车司机的岗位职责
2014/01/30 职场文书
学生期末评语大全
2014/04/30 职场文书
施工安全标语
2014/06/07 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
导游词之西安骊山
2019/12/03 职场文书
MySQL索引是啥?不懂就问
2021/07/21 MySQL
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
讲解Python实例练习逆序输出字符串
2022/05/06 Python