JavaScript 格式字符串的应用


Posted in Javascript onMarch 29, 2010

经过一番设计,终于完成了这个功能。引入了这个js后,就可以自行配置格式字符串来输出各种自定义的日期格式了。

流程图
JavaScript 格式字符串的应用
可以看出,所谓格式字符串,其实就是一个含有特定字符的字符串,然后根据其的实际意义替换成指定的值。
在本文中仅以Date对象作为示例,其实格式字符串的价值不仅于此。到底可以在什么情景下会使用格式字符串呢?希望您在本文的结尾处可以找到答案。
算法介绍
下面我将使用一个示例来说明格式字符串的算法。这个示例将格式化日期的“日”部分,例如2008-8-8,如果格式字符串是“d”,将输出“8”;如果格式字符串是“dd”,将输出“08”;如果格式字符串是“dddd”,将输出“五”;如果格式字符串是“dddd”,将输出“星期五”。其中参数d是一个Date对象,format是一个字符串:

//格式化日 
function FormatDay(d, format){ 
while(format.indexOf("d") > -1){ 
var regex = /[d]+/; 
format = format.replace(regex,function(w){ 
switch(w.length){ 
case 0:break; 
case 1: 
return d.getDate(); 
case 2: 
return d.getDate() < 10 ? "0" + d.getDate() : d.getDate(); 
case 3: 
switch(d.getDay()){ 
case 0: 
return "日"; 
case 1: 
return "一"; 
case 2: 
return "二"; 
case 3: 
return "三"; 
case 4: 
return "四"; 
case 5: 
return "五"; 
case 6: 
return "六"; 
} 
default: 
switch(d.getDay()){ 
case 0: 
return "星期日"; 
case 1: 
return "星期一"; 
case 2: 
return "星期二"; 
case 3: 
return "星期三"; 
case 4: 
return "星期四"; 
case 5: 
return "星期五"; 
case 6: 
return "星期六"; 
} 
} 
}); 
} 
return format; 
}

可以看到,其核心的部分就是:
while (format.indexOf("d") > -1) { 
var regex = /[d]+/; 
format = format.replace(regex, function(w) { 
switch (w.length) { 
case 0: break; 
case 1: 
//todo 
case 2: 
//todo 
case 3: 
//todo 
case x: 
//todo 
default: 
//todo 
} 
}); 
}

解释:
1. 使用while循环,只要格式字符串format中含有特定字符就一直执行下去;
2. 声明一个正则表达式对象/[x]+/,其中x表示特定字符;
3. 使用string对象的replace方法替换特定字符;
4. 根据匹配到的特定字符串的长度,执行不同的操作(在本示例中,“d”、“dd”、“ddd”代表不同的含义)。
格式字符串说明
以508-1-9 14:3:5为例
格式字符串 描述 示例
y 格式化年。年份由世纪+年代组成。 “y”输出8 “yy”输出08 “yyy”输出508 “yyyy”输出0508 “yyyyyy”输出000508
M 格式化月。 “M”输出1 “MM”输出01 “MMM”或更多输出一月
d 格式化日。 “d”输出9 “dd” 输出09 “ddd” 输出一 “dddd” 或更多输出星期一
H,h 格式化小时。其中H表示24小时制,h表示12小时制。 “H”输出14 “HH” 或更多输出14 “h”输出2 “hh” 或更多输出02
m 格式化分钟。 “m”输出3 “mm” 或更多输出03
s 格式化秒 “s”输出5 “ss” 或更多输出05

更多的设置,大家可以自己动手做一下。

示例
引用此js后,在浏览器的控制台中测试结果如下:
JavaScript 格式字符串的应用
如何,有没有心动的感觉……

顺便说一下各浏览器的控制台呼出方式:

浏览器 快捷键
Chrome Ctrl + Shift + J
IE8 F12
FireFox 忘了。FireFox中的控制台不是原生的,是一个叫FireBug的插件。

源代码
下述代码可以在DateExtension.js下载
Date.prototype.ToString = function(format){ 
if(typeof(format) == "string"){ 
return FormatDateTime(this, format); 
} 
return FormatDateTime(this, "yyyy-MM-dd HH:mm:ss"); 
} 
//格式化DateTime对象 
function FormatDateTime(d, format){ 
format = FormatYear(d, format); 
format = FormatMonth(d, format); 
format = FormatDay(d, format); 
format = FormatHour(d, format); 
format = FormatMinute(d, format); 
format = FormatSecond(d, format); 
return format; 
} 
//格式化年 
function FormatYear(d, format){ 
var fullYear = d.getFullYear(); //完整的年份 
var century = Math.floor(fullYear / 100); //世纪 
var year = fullYear % 100; //年代 
while(format.indexOf("y") > -1){ 
var regex = /[y]+/; 
format = format.replace(regex,function(w){ 
//格式字符串如果是"y"或者"yy"时,只返回年代。否则返回世纪+年代 
switch(w.length){ 
case 0:break; 
case 1: 
return year; 
case 2: 
return year < 10 ? "0" + year : year; 
default: 
var yearPart = year < 10 ? "0" + year : year; 
var centuryPart = ""; 
for(var i = 0; i < w.length - 2 - century.toString().length; i++){ 
centuryPart += "0"; 
} 
centuryPart += century; 
return centuryPart + yearPart; 
} 
}); 
} 
return format; 
} 
//格式化月 
function FormatMonth(d, format){ 
var month = d.getMonth() + 1; 
while(format.indexOf("M") > -1){ 
var regex = /[M]+/; 
format = format.replace(regex,function(w){ 
switch(w.length){ 
case 0:break; 
case 1: 
return month; 
case 2: 
return month < 10 ? "0" + month : month; 
default: 
switch(month){ 
case 1: 
return "一月"; 
case 2: 
return "二月"; 
case 3: 
return "三月"; 
case 4: 
return "四月"; 
case 5: 
return "五月"; 
case 6: 
return "六月"; 
case 7: 
return "七月"; 
case 8: 
return "八月"; 
case 9: 
return "九月"; 
case 10: 
return "十月"; 
case 11: 
return "十一月"; 
case 12: 
return "十二月"; 
} 
} 
}); 
} 
return format; 
} 
//格式化日 
function FormatDay(d, format){ 
while(format.indexOf("d") > -1){ 
var regex = /[d]+/; 
format = format.replace(regex,function(w){ 
switch(w.length){ 
case 0:break; 
case 1: 
return d.getDate(); 
case 2: 
return d.getDate() < 10 ? "0" + d.getDate() : d.getDate(); 
case 3: 
switch(d.getDay()){ 
case 0: 
return "日"; 
case 1: 
return "一"; 
case 2: 
return "二"; 
case 3: 
return "三"; 
case 4: 
return "四"; 
case 5: 
return "五"; 
case 6: 
return "六"; 
} 
default: 
switch(d.getDay()){ 
case 0: 
return "星期日"; 
case 1: 
return "星期一"; 
case 2: 
return "星期二"; 
case 3: 
return "星期三"; 
case 4: 
return "星期四"; 
case 5: 
return "星期五"; 
case 6: 
return "星期六"; 
} 
} 
}); 
} 
return format; 
} 
//格式化小时 
//H:24小时制 
//h:12小时制 
function FormatHour(d, format){ 
while(format.indexOf("H") > -1){ 
var regex = /[H]+/; 
format = format.replace(regex,function(w){ 
switch(w.length){ 
case 0:break; 
case 1: 
return d.getHours(); 
default: 
return d.getHours() < 10 ? "0" + d.getHours() : d.getHours(); 
} 
}); 
} 
while(format.indexOf("h") > -1){ 
var regex = /[h]+/; 
format = format.replace(regex,function(w){ 
switch(w.length){ 
case 0:break; 
case 1: 
return d.getHours() > 12 ? d.getHours() - 12 : d.getHours(); 
default: 
var t = d.getHours() > 12 ? d.getHours() - 12 : d.getHours(); 
return t < 10 ? "0" + t : t; 
} 
}); 
} 
return format; 
} 
//格式化分钟 
function FormatMinute(d, format){ 
while(format.indexOf("m") > -1){ 
var regex = /[m]+/; 
format = format.replace(regex,function(w){ 
switch(w.length){ 
case 0:break; 
case 1: 
return d.getMinutes(); 
default: 
return d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes(); 
} 
}); 
} 
return format; 
} 
//格式化秒 
function FormatSecond(d, format){ 
while(format.indexOf("s") > -1){ 
var regex = /[s]+/; 
format = format.replace(regex,function(w){ 
switch(w.length){ 
case 0:break; 
case 1: 
return d.getSeconds(); 
default: 
return d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds(); 
} 
}); 
} 
return format; 
}

本文使用到的资源
DateExtension.js下载
W3C School浏览
有关Date对象的更多支持浏览
js实现的日期操作类DateTime函数代码

pdf版下载地址

Javascript 相关文章推荐
js实现div弹出层的方法
Nov 20 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 Javascript
js DataSet数据源处理代码
Mar 29 #Javascript
javascript 节点遍历函数
Mar 28 #Javascript
javascript 类型判断代码分析
Mar 28 #Javascript
js chrome浏览器判断代码
Mar 28 #Javascript
JavaScript 学习笔记一些小技巧
Mar 28 #Javascript
JavaScript 学习笔记二 字符串拼接
Mar 28 #Javascript
jQuery 美元符冲突的解决方法
Mar 28 #Javascript
You might like
第十四节--命名空间
2006/11/16 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
php支付宝APP支付功能
2020/07/29 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
js获取图片长和宽度的代码
2009/11/24 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
js中开关变量使用实例
2017/02/24 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
vue-axios使用详解
2017/05/10 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
Python通过解析网页实现看报程序的方法
2014/08/04 Python
python反转列表的三种方式解析
2019/11/08 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
自我鉴定书范文
2013/10/02 职场文书
电气技术员岗位职责
2013/11/19 职场文书
安全生产责任书
2014/03/12 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
六查六看剖析材料
2014/10/06 职场文书
信用卡工资证明范本
2014/10/17 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
幼儿园国培研修日志
2015/11/13 职场文书