Prototype源码浅析 String部分(四)之补充


Posted in Javascript onJanuary 16, 2012
替换 interpolate  | sub |  scan |  truncate | gsub
interpolate : 将字符串看作一个模板,并使用 object 的属性填充它。
sub : 将字符串中前指定个个与 pattern 指定的模式匹配的子串用 replacement 替换
scan : 遍历字符串中与参数 pattern 指定的模式匹配的所有子串。返回原始字符串本身。
truncate : 将字符串截短为指定的长度(包含后缀部分), 并添加一个后缀。
gsub :将字符串中所有与 pattern 指定的模式匹配的值全部用 replacement 替换掉

上面的方法中,最重要的一个方法是gsub,具体说明参见《浅析Prototype的模板类--Template》
sub除了可以限定次数外,其他与gsub完全一致。

function sub(pattern, replacement, count) { 
replacement = prepareReplacement(replacement); 
count = Object.isUndefined(count) ? 1 : count; 
return this.gsub(pattern, function(match) { 
if (--count < 0) return match[0]; 
return replacement(match); 
}); 
}

scan也是一样的,不过scan最后返回的是字符串本身而已。
interpolate 是将字符串当做模板来用,核心还是gsub
truncate 是唯一有点区别的(我现在依稀感觉我分错类了)。
以字符串'fuck the gfw'为例,truncate 的执行'fuck the gfw'.truncate(10,'****')的步骤是:
1、获得前面10 - '****'.length个字符 'fuck t'
2、拼上后缀'****',得到 'fuck t****',长度为10.
处理很简单,源码也简单:
function truncate(length, truncation) { 
length = length || 30;//默认长度30 
truncation = Object.isUndefined(truncation) ? '...' : truncation;//默认后缀... 
return this.length > length ? 
this.slice(0, length - truncation.length) + truncation : String(this); 
}

另:Prototype的一个方便之处就是随时可以抽取有用的代码作为单独的部分或者收为自己用。下面是单独提出来的模板方法。

function Template(template, pattern){ 
this.template = template; 
this.pattern = pattern || /(^|.|\r|\n)(#\{(.*?)\})/; 
} 
Template.prototype = (function(){ 
function evaluate(obj){ 
return gsub.call(this,function(match){ 
if(obj == null){ 
return match[0] + ''; 
} 
var before = match[1] || ''; 
if(before == '\\'){ 
return match[2]; 
} 
var ctx = obj; 
var expr = match[3]; 
var pattern = /^([^.[]+|\[((?:.*?[^\\])?)\])(\.|\[|$)/; 
match = pattern.exec(expr); 
if (match == null){ 
return before; 
} 
while (match != null) { 
var comp = match[1].search(/^\[/) != -1 ? match[2].replace(/\\\\]/g, ']') : match[1]; 
ctx = ctx[comp]; 
if (null == ctx || '' == match[3]) break; 
expr = expr.substring('[' == match[3] ? match[1].length : match[0].length); 
match = pattern.exec(expr); 
} 
return before + (ctx === null ? '' : String(ctx)); 
}); 
} 
function gsub(replacement){ 
var pattern = this.pattern; 
var result = ''; 
var match = null; 
var source = this.template; 
if (!(pattern.length || pattern.source)) { 
replacement = replacement(''); 
return replacement + source.split('').join(replacement) + replacement; 
} 
while (source.length > 0) { 
if (match = source.match(pattern)) { 
result += source.slice(0, match.index); 
result += replacement(match) === null ? '' : String(replacement(match)); 
source = source.slice(match.index + match[0].length); 
}else { 
result += source; 
source = ''; 
} 
} 
return result; 
} 
return { 
constructor : Template, 
evaluate : evaluate 
} 
})();

var template = new Template('my age is : #{name.age}'); 
console.log(template.evaluate({name : {age : 24}}));//my age is : 24

String部分(完)
Javascript 相关文章推荐
javascript indexOf函数使用说明
Jul 03 Javascript
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
JS图片懒加载技术实现过程解析
Jul 27 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 Javascript
vscode自定义vue模板的实现
Jan 27 Vue.js
Prototype源码浅析 String部分(二)
Jan 16 #Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 #Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 #Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 #Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 #Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 #Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 #Javascript
You might like
说明的比较细的php 正则学习实例
2008/07/30 PHP
深入php处理整数函数的详解
2013/06/09 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
python地震数据可视化详解
2019/06/18 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
简单的Python调度器Schedule详解
2019/08/30 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
如何理解Python中的变量
2020/06/01 Python
python 进程池pool使用详解
2020/10/15 Python
如何一键升级Python所有包
2020/11/05 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
个人自荐书范文
2015/03/09 职场文书
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript