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 相关文章推荐
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
js函数排序的实例代码
Jul 01 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 Javascript
详解原生JS动态添加和删除类
Mar 26 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
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
再次研究下cache_lite
2007/02/14 PHP
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
php获取url参数方法总结
2014/11/13 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
phpStorm2020 注册码
2020/09/17 PHP
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python全排列操作实例分析
2018/07/24 Python
python Tkinter版学生管理系统
2019/02/20 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
C#面试问题
2016/07/29 面试题
外贸销售员求职的自我评价
2013/11/23 职场文书
我的大学生活职业生涯规划
2014/01/02 职场文书
赡养老人协议书
2014/04/21 职场文书
公务员检讨书
2014/11/01 职场文书
运动会通讯稿200字
2015/07/20 职场文书