Js公共操作类 之 String 扩展方法介绍(一)

Js公共操作类 之 String 扩展方法介绍(一)

　　本文章介绍一些工作中常见的字符串判断、操作和类型转换，这些扩展方法本身并没有什么特别之处，都是将常见的操作封装起来，这样用起来更加便捷。

封装就是为了能实现快速开发(个人理解)，比如我在做项目中，需要计算两个input 的值相加。一般情况下可能是这样写

1 var sum = parseInt($(“#inputA”).value()) + parseInt($(“#inputB”).value());

　　这样写符合逻辑，但是如果前台没有加输入限制，我在inputA 输入”你好”，inputB输入”我的世界”。 那么上面的这个等式就会等同于

var sum = NaN + NaN;  // parseInt() 转换失败则返回NaN。

此时的sum 就等于了NaN。

　　开发的时候不注意这些细节，后面测试妹妹或者客户大哥发现后还是要做代码处理，必然增加的时间来处这些本应该避免的问题。从而增加了咱们宝贵的业务时间来该BUG。

　　一处代码这样写，不算多。处理下就好了，如果我们的项目中许多地方都牵扯到在前端计算的时候，调整起来就麻烦了，除非你的 Ctrl + C 和 Ctrl + V 的速度已经接近光速。

　　那么我们为什么不写个方法对 parseInt 进行处理呢，当转换结果为NaN 时给返回0，那么上面的输入内容求和就会变成0，则不会是大多数人看不懂的NaN 了。

//一般对 parseInt 简单封装：
    function _ parseInt(str){
        return isNaN(parseInt(this)) ? 0 : parseInt(this);
     }
//使用的时候则是 ：
    var sum = _parseInt($(“#inputA”).value()) + _parseInt($(“#inputB”).value());

 

 　　

这样写就能避免 NaN 的出现了。

         有没有更优雅的写法呢，当然有，就是 对 string 做原型扩展：

　　

1 String. Prototype.toInt = function(){ 
2     return isNaN(parseInt(this)) ? 0 : parseInt(this);
3 }
4 
5 //使用则是：
6 var sum = $(“#inputA”).value().toInt() + $(“#inputB”).value().toInt();

 

这种代码看起来易懂， 写起来跟写作文差不多。就是这么骚气！

         这样，我们可以将更多的复杂的判断和转换通过这种方式给扩展进来。

比如：“isDate”、“toDate”等。

　　下面来看下本js中的 String 原型转换代码。

  1 /*=========================================*/
  2 /*============对string 类型原型扩展================*/
  3 /*=========================================*/
  4 $.extend(String.prototype, {
  5     //支持字符串 format 方法
  6     format: function() {
  7         var args = arguments;
  8         return this.replace(/\{(\d+)\}/g,
  9             function(m, i) {
 10                 return args[i];
 11             });
 12     },
 13     //判断字符串是否为Null或者为空字符串。
 14     //为 空 则返回 true，否则返回false
 15     isNullOrEmpty: function() {
 16         return this === undefined || this === null || this == "";
 17     },
 18     //判断字符串是否为Null或者为空字符串或者全是空格。
 19     //为 空 或者全部是空格 则返回 true，否则返回false
 20     isNullOrWhiteSpace: function() {
 21         return this.isNullOrEmpty() || this.trim().isNullOrEmpty();
 22     },
 23     //判断字符串是否包含指定的内容。val :指定内容
 24     //包含指定内容， 则返回 true，否则返回false
 25     isContains: function(val) {
 26         return this.indexOf(val) > -1;
 27     },
 28     //返回字符串，返回反转后副本，并不改变原有的字符串。
 29     reverse: function() {
 30         var chars = [];
 31         for (var i = this.length - 1; i > -1; i--) {
 32             chars.push(this[i]);
 33         }
 34         return chars.join("");
 35     },
 36     //去除字符串左边的空格，返回处理后副本，并不改变原有的字符串。
 37     ltrim: function() {
 38         return this.replace(/(^\s*)/g, "");
 39     },
 40     //去除字符串右边的空格，返回处理后副本，并不改变原有的字符串。
 41     rtrim: function() {
 42         return this.replace(/(\s*$)/g, "");
 43     },
 44     //判断字符串是否以指定内容开头
 45     //以指定内容开头， 则返回 true，否则返回false
 46     startsWith: function() {
 47         return this.substr(0, arguments[0].length) == arguments[0];
 48     },
 49     //判断字符串是否以指定内容结尾
 50     //以指定内容结尾， 则返回 true，否则返回false
 51     endWith: function() {
 52         return this.substr(this.length - arguments[0].length) == arguments[0];
 53     },
 54     //判断字符串是否是长日期，例如：2015-11-19 23:00:26。
 55     //是 长日期， 则返回 true，否则返回false
 56     isLongDate: function() {
 57         var r = this.replace(/(^\s*)|(\s*$)/g, "").match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/);
 58         if (r == null) { return false; }
 59         var d = new Date(r[1], r[3] - 1, r[4], r[5], r[6], r[7]);
 60         return (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4] && d.getHours() == r[5] && d.getMinutes() == r[6] && d.getSeconds() == r[7]);
 61     },
 62     //判断字符串是否是短日期，例如：2015-11-19。
 63     //是 短日期， 则返回 true，否则返回false
 64     isShortDate: function() {
 65         var r = this.replace(/(^\s*)|(\s*$)/g, "").match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
 66         if (r == null) { return false; }
 67         var d = new Date(r[1], r[3] - 1, r[4]);
 68         return (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4]);
 69     },
 70     //判断字符串是否是日期，例如：2015-11-19。
 71     //是 日期， 则返回 true，否则返回false
 72     isDate: function() {
 73         return this.isShortDate() || this.isLongDate();
 74     },
 75     //判断字符串是否是电话/传真号码
 76     //是 电话/传真号码， 则返回 true，否则返回false
 77     isTelOrFax: function() {
 78         return this.isNullOrEmpty() ? false : /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(this);
 79     },
 80     //判断字符串是否是手机号码
 81     //是 手机号码， 则返回 true，否则返回false
 82     isMobile: function() {
 83         return this.isNullOrEmpty() ? false : /^(13|14|15|17|18)\d{9}$/i.test(this);
 84     },
 85     //判断字符串是否是电子邮箱
 86     //是 手机号码， 则返回 true，否则返回false
 87     isEmail: function() {
 88         return this.isNullOrEmpty() ? false : /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(this);
 89     },
 90     //判断字符串是否是邮编
 91     //是 邮编， 则返回 true，否则返回false
 92     isZip: function() {
 93         return this.isNullOrEmpty() ? false : /^[\d]{6}$/.test(this);
 94     },
 95     isQQ: function() {
 96         return this.isNullOrEmpty() ? false : /^[1-9]\d{5,11}$/i.test(this);
 97     },
 98     //判断字符串是否存在汉字。
 99     //存在汉字， 则返回 true，否则返回false
100     isExistChinese: function() {
101         return this.isNullOrEmpty() ? false : !/^[\x00-\xff]*$/.test(this);
102     },
103     //判断字符串是否全是汉字。
104     //全是汉字， 则返回 true，否则返回false
105     isChinese: function() {
106         return this.isNullOrEmpty() ? false : /^[\u0391-\uFFE5]+$/i.test(this);
107     },
108     //判断字符串是否全是字母。
109     //全是字母， 则返回 true，否则返回false
110     isAbc: function() {
111         return this.isNullOrEmpty() ? false : /^[A-Za-z]+$/i.test(this);
112     },
113     //将字符串日期转换成日期类型
114     //转换成功则返回对应的时间，失败则返回null
115     toDate: function () {
116         try { return new Date(this.replace(/-/g, "\/")); }
117         catch (e) { return null; }
118     },
119     //将字符串转换成对应的bool值
120     //转换成功则返回对应的bool值，失败则返回false
121     toBool: function () {
122         var str = this.isNullOrEmpty() ? false : this.toLowerCase();
123         str = str.trim();
124         return str == "true" || str == "yes" || str == "y" || str == "t" || str == "1" || str == "是";
125     },
126     //将字符串转换成对应的int
127     //转换成功则返回对应的int，失败则返回0
128     toInt: function () {
129         return isNaN(parseInt(this)) ? 0 : parseInt(this);
130     },
131     //将字符串转换成对应的Double
132     //转换成功则返回对应的Double，失败则返回0.0
133     toDouble: function () {
134         return isNaN(parseFloat(this)) ? 0.0 : parseFloat(this);
135     },
136     //将字符串转换成对应的Double
137     //转换成功则返回对应的json，失败则返回null
138     toJson: function () {
139         try{return $.parseJSON(this);}
140         catch (e) { return null; }
141     }
142 });

View Code

编写测试代码：

 1 　　　　 console.log("测试字符串扩展方法");
 2         console.log("测试 ''.isNullOrEmpty() 方法 ：" + jutil.areEqual("".isNullOrEmpty(), true));
 3         console.log("测试 '    '.isNullOrEmpty() 方法 ：" + jutil.areEqual("   ".isNullOrWhiteSpace(), true));
 4         console.log("测试'zhanghs'.isContains('gh') 方法 ：" + jutil.areEqual("zhanghs".isContains("gh"), true));
 5         console.log("测试'zhanghs'.reverse() 方法 ：" + jutil.areEqual("zhanghs".reverse(), "shgnahz"));
 6         console.log("测试'  zhanghs'.ltrim() 方法 ：" + jutil.areEqual("   zhanghs".ltrim(),"zhanghs"));
 7         console.log("测试'  zhanghs   '.rtrim() 方法 ：" + jutil.areEqual("zhanghs   ".rtrim(), "zhanghs"));
 8         console.log("测试'zhanghs   '.startsWith('zha') 方法 ：" + jutil.areEqual("zhanghs   ".startsWith("zha"),true));
 9         console.log("测试'zhanghs'.endWith('ghs') 方法 ：" + jutil.areEqual("zhanghs".endWith("ghs"), true));
10         console.log("测试'2015-05-05 23:02:01'.isLongDate() 方法 ：" + jutil.areEqual('2015-05-05 23:02:01'.isLongDate(),true));
11         console.log("测试'2015-05-05'.isShortDate() 方法 ：" + jutil.areEqual('2015-05-05'.isShortDate(), true));
12         console.log("测试'0558-6699777'.isTelOrFax() 方法 ：" + jutil.areEqual('0558-6699777'.isTelOrFax(), true));
13         console.log("测试'15555555666'.isMobile() 方法 ：" + jutil.areEqual('15555555666'.isMobile(), true));
14         console.log("测试'[email protected]'.isEmail() 方法 ：" + jutil.areEqual('[email protected]'.isEmail(), true));
15         console.log("测试'23660'.isZip() 方法 ：" + jutil.areEqual('23660'.isZip(), false));
16         console.log("测试'136533295'.isQQ() 方法 ：" + jutil.areEqual('136533295'.isQQ(), true));
17         console.log("测试'236张60'.isExistChinese() 方法 ：" + jutil.areEqual('236张60'.isExistChinese(), true));
18         console.log("测试'测试'.isChinese() 方法 ：" + jutil.areEqual('测试'.isChinese(), true));
19         console.log("测试'aBc'.isAbc() 方法 ：" + jutil.areEqual('aBc'.isAbc(), true));
20         console.log("测试'2015-05-05'.toDate() 方法 ：" + '2015-05-05'.toDate());
21         console.log("测试'是'.toBool() 方法 ：" + jutil.areEqual('是'.toBool(), true));
22         console.log("测试'是'.toInt() 方法 ：" + jutil.areEqual('是'.toInt(), 0));
23         console.log("测试'是'.toDouble() 方法 ：" + jutil.areEqual('是'.toDouble(), 0.0));
24         console.log("测试'是'.toJson() 方法 ：" + jutil.areEqual('是'.toJson(), null));

 

从上面看出，都是些司空见惯的方法，经过我们这么一包装，确实能”华丽”不少。直接"".isXXX() 就是判断， "".toXXX()则为类型转换。

示例代码