这几天在升级自己的MVVM 框架,遇到很多小问题,就在这里统一解决了.
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.replace(/\s/g, ''); // 去掉全部空格
exp = " " + exp; // 在开头加上一个空格
let quickRegex = /([\s\+\-\*\/%&\|\^!~:\[\(<>=\?])([a-z_$][a-z_$0-9]*)/g;
exp = exp.replace(quickRegex, (a, b, c) => {
return b + scopeName + '.' + c;
});
return exp;
}
首先把空格全部去掉,为了和后面的统一,在开头加上一个空格。
第一个正则匹配出犹如"t.e==0 ? f : d"
的表达式中的变量
会被作为c
提取出来,符号作为 b
提取出来。
测试一下
现在已经可以返回一个表达式了,改装一下,让表达式直接在里面执行
function replaceWith(scope, exp) {
exp = exp.replace(/\s/g, ''); // 去掉全部空格
exp = " " + exp; // 在开头加上一个空格
let quickRegex = /([\s\+\-\*\/%&\|\^!~:\[\(<>=\?])([a-z_$][a-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);
}
测试一下
大功告成。
可能中间正则写的不好,还有其他不严密的地方,欢迎园友补充。
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
写在最后
下来就要准备期末考试了,迎接毕业啦。1月末再会! 。
merry Christmas ! & Happy New Year 撒花
Javascript 中 with 的替代方案和String 中的正则方法的更多相关文章
-
从源代码的角度聊聊java中StringBuffer、StringBuilder、String中的字符串拼接
长久以来,我们被教导字符串的连接最好用StringBuffer.StringBuilder,但是我们却不知道这两者之间的区别.跟字符串相关的一些方法中总是有CharSequence.StringBuf ...
-
javascript基础知识梳理-Number与String之间的互相转换【转】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
-
【转】【译】JavaScript魔法揭秘--探索当前流行框架中部分功能的处理机制
推荐语: 今天推荐一篇华为同事的同事翻译的一篇文章,推荐的主要原因是作为一个华为员工居然晚上还能写文章,由不得小钗不佩服!!! 其中的jQuery.angular.react皆是十分优秀的框架,各有特 ...
-
JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构
JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...
-
借助JavaScript中的Dom属性改变Html中Table边框的颜色
借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...
-
借助JavaScript中的时间函数改变Html中Table边框的颜色
借助JavaScript中的时间函数改变Html中Table边框的颜色 <html> <head> <meta http-equiv="Content-Type ...
-
深入理解JavaScript的闭包特性如何给循环中的对象添加事件
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...
-
Java的String中的subString()方法
方法如下: public String substring(int beginIndex, int endIndex) 第一个int为开始的索引,对应String数字中的开始位置, 第二个是截止的索引 ...
-
Here String 中不该进行分词
我们知道,在 Shell 中,一个变量在被展开后,如果它没有被双引号包围起来,那么它展开后的值还会进行一次分词(word splitting,或者叫拆词,分词这个术语已经被搜索引擎相关技术占用了)操作 ...
随机推荐
-
S2总结笔记
第一章:深入.NET框架 1..NET FrameWork两大组件是什么? 解析:.NET 框架类库(FCL:FrameWork Class Library)和公共语言运行时(CLR:common l ...
-
ActionBarSherlock的学习笔记(二) ------------ 创建ActionBarSherlock
将ActionBarSherlock 作为库项目添加到当前的项目中去,然后创建ActionBar,并自定义ActionBar的标题栏 例子如下: import android.os.Bundle; i ...
-
[未完成]关于java基础数据类型中的一些总结
java基本数据类型转换图: 有时候也把char型成为字符型,是加上字符型也是一种特殊的整数类型.
-
XMPPFrameWork IOS 开发(一)xmpp简介
原始地址:XMPPFrameWork IOS 开发(一) XMPP : The Extensible Messaging and Presence Protocol 中文全称: 可扩展通讯和表示协议 ...
-
FastDFS php API
<?php if (!class_exists('FastDFS', false)) { define('FDFS_PROTO_PKG_LEN_SIZE', 8); define('FDFS_P ...
-
Handler processing failed; nested exception is java.lang.NoClassDefFoundError: javax/servlet/jsp/jstl/core/Config解决
出现这个问题往往伴随 HTTP-500错误 报错信息: HTTP Status - Handler processing failed; nested exception is java.lang. ...
-
如何理解Axis?
前言 只有光头才能变强. 回顾前面: 从零开始学TensorFlow[01-搭建环境.HelloWorld篇] 什么是TensorFlow? TensorFlow读写数据 不知道大家最开始接触到axi ...
-
C语言的三目运算符
语法: 表达式1 ? 表达式2 : 表达式3; 等价于 if(表达式1) { 表达式2 } else { 表达式3 }
-
TestLink工具使用手册介绍
工具名称:TestLink 工具介绍:TestLink遵循Apache2开源协议,免费试用.TestLink用于进行测试过程中的管理,通过使用TestLink提供的功能,可以将测试过程从测试需求.试设 ...
-
学大伟业 Day 4 培训总结
今天讲的全是dp... 不多废话,先看一道经典的模板LIS(最长不下降子序列) 一.LIS 给定一个长度为N的数列,求最长上升子序列 例:1 7 2 8 3 4 答案:1 2 3 4 代码: #inc ...