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 相关文章推荐
JavaScript 事件参考手册
Dec 24 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
微信小程序图片自适应实现解析
Jan 21 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
利用PHP和AJAX创建RSS聚合器的代码
2007/03/13 PHP
删除数组元素实用的PHP数组函数
2008/08/18 PHP
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
python实现跨文件全局变量的方法
2014/07/07 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
中国梦的演讲稿
2014/01/08 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
白血病捐款倡议书
2014/05/14 职场文书
另类冲刺标语
2014/06/24 职场文书
生日宴会祝酒词
2015/08/10 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
python spilt()分隔字符串的实现示例
2021/05/21 Python
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android