javascript下string.format函数补充

 更新时间:2010年08月24日 02:11:24   作者:  
在上一篇中,自谦懒人的咚锵留言指出楼猪改写的format函数在参数输入11个后不起作用了
又重新阅读了一遍Andrew的原文,在原文下面的评论中,赫然发现也有人早提出参数个数的问题,同样懒惰的楼猪直接拷贝原文评论答复了一下,同时还发现说漏了很重要的一个注意点Array.prototype.slice。
下面统一补充说明一下:

1、string.format的参数个数
在Andrew的原文中,已经有人指出:

eric d. Hi, thanks for that brilliant article. Made a lot of things a lot clearer!
Note: new RegExp("%([1-" + arguments.length + "])", "g"); will fail passed 9 arguments (the regexp would be "%([1-10])" so it will only match %0 and %1).

I think an easy fix would be something like:
function format(string) { var args = arguments; var pattern = new RegExp("%([0-9]+)", "g"); return String(string).replace(pattern, function(match, index) { if (index == 0 || index >= args.length) throw "Invalid index in format string"; return args[index]; }); };
(Sorry for nitpicking, I understand it was only an example and brevety is the main objective, but its a great function to have)

Posted on: January 20th 2009, 12:01 am

这个留言的家伙给足了作者面子,称“I understand it was only an example and brevety is the main objective, but its a great function to have”。原来,原文中定义的正则表达式能够验证的数字范围是...原来如此啊,哈哈,楼猪心虚的笑了。

2、Array.prototype.slice
将arguments转换成Array的方法是通过Array.prototype.slice.call(arguments);方式转换的,也就是说类数组方式的对象都可以通过slice的方式实现到Array的转换,说到类数组对象的转换,真的很有必要重新记录总结一下Array的原型方法slice。
(1)、常见用法
楼猪在早前的这篇里通过一段代码一带而过介绍过slice方法:slice(start,end):返回数组对象的一个子集,索引从start开始(包括 start),到end结束(不包括end),原有数组不受影响。其实我们可以大胆猜测slice函数内部应该是定义了一个数组变量,然后通过循环,将数组对应索引值push进变量,最后return这个Array变量。
(2)、“不是Array,我们也想要变成Array”
不是Array,但是有length属性,可以根据索引取值,比如本文中的arguments,我们可以通过下面的方式转换为真实数组:

复制代码 代码如下:

function test() {
var args = Array.prototype.slice.call(arguments);
alert(args.length);
args.push("jeff"); //push
args.push("wong");
alert(args.length); //2
alert(args.pop()); //pop
alert(args.length); //1
}
test();

我们看到push和pop方法都起作用了。同样,Nodelist也有类似特性。怎么样将NodeList转换成Array?看过楼猪原文的读者可能会觉得这都是陈词滥调,还是多说一句,在IE下,Array.prototype.slice.call(nodelist)就不是那么回事了,最后再贴一次将NodeList转换为Array并且兼容ie和其他浏览器的方法结束本文:
复制代码 代码如下:

var nodelist =something;//一个NodeList变量
var arr = null; //数组
try { //ie
arr = new Array();
for (var i = 0; i < nodelist.length; i++) {
arr.push(nodelist[i]);
}
} catch (e) {//其他浏览器
arr = Array.prototype.slice.call(nodelist);
}

作者:Jeff Wong

相关文章

  • js取两个数组的交集|差集|并集|补集|去重示例代码

    js取两个数组的交集|差集|并集|补集|去重示例代码

    求两个集合的补集、交集、差集、并集等等在实际应用中经常会使用到,下面与大家分享下具体的实现代码,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • JavaScript定义函数的三种实现方法

    JavaScript定义函数的三种实现方法

    这篇文章主要介绍了JavaScript定义函数的三种实现方法的相关资料,希望通过本文大家能够掌握三种定义函数的方法,需要的朋友可以参考下
    2017-09-09
  • 原生js实现点击轮播切换图片

    原生js实现点击轮播切换图片

    这篇文章主要为大家详细介绍了原生js点击轮播切换图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • Webpack中使用环境变量的各种正确姿势

    Webpack中使用环境变量的各种正确姿势

    我们在开发项目中都会遇到这种场景,区分开发环境、生产环境、测试环境,不同场景请求不同的接口Api,这时候项目中配置的「环境变量」就登场啦,这篇文章主要给大家介绍了关于Webpack中使用环境变量的各种正确姿势,需要的朋友可以参考下
    2021-09-09
  • js arguments.callee的应用代码

    js arguments.callee的应用代码

    arguments.callee的使用方法,具体大家自己测试了
    2009-05-05
  • javaScript实现鼠标在文字上悬浮时弹出悬浮层效果

    javaScript实现鼠标在文字上悬浮时弹出悬浮层效果

    这篇文章主要为大家详细介绍了javaScript实现鼠标在文字上悬浮时弹出悬浮层效果的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-03-03
  • jquery+css3实现网页背景花瓣随机飘落特效

    jquery+css3实现网页背景花瓣随机飘落特效

    在qq空间可以自定义一些插件,装饰空间,大家通常就是复制代码到空间粘贴,会实现非常美观的效果,有的会随机飘落一些花瓣,那么这种效果用代码怎么实现的呢,下面小编给大家详解jquery实现网页背景花瓣随机飘落特效,需要的朋友可以参考下
    2015-08-08
  • 复杂的javascript窗口分帧解析

    复杂的javascript窗口分帧解析

    这篇文章主要为大家详细解析了复杂的javascript窗口分帧,什么是窗口分帧,JavaScript中帧窗口之间的关系,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • js+h5 canvas实现图片验证码

    js+h5 canvas实现图片验证码

    这篇文章主要为大家详细介绍了js+h5 canvas实现图片验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • 页面点击小红心js实现代码

    页面点击小红心js实现代码

    有时候我们经常看到有些blog出现一些点击页面出现小红心的效果,很是喜欢,这里就为大家分享一下代码直接引用即可
    2018-05-05

最新评论