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 自定义的联动下拉框
Feb 07 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
js取模(求余数)隔行变色
May 15 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 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控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
python连接MySQL数据库实例分析
2015/05/12 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
Python实现中值滤波去噪方式
2019/12/18 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
工程总经理工作职责
2013/12/09 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis