基于 Prototype 扩展的 JavaScript 常用工具函数库

核心功能概览

本工具库主要覆盖以下三个数据类型的扩展能力：

• Array 原型：提供元素检索方法，快速定位指定值在数组中的索引位置。
• Date 原型：实现日期格式化的灵活定制，以及日期之间的差值计算、周期加减运算。
• String 原型：增强字符串处理能力，包括中英文混合长度统计、精准截取、大小写敏感匹配以及多态空格去除。

日期处理扩展详解

日期操作是前端开发中最复杂的环节之一。本库通过正则替换和数学运算，提供了从格式化到逻辑计算的完整解决方案。

第1步：实现日期格式化

目的：将 Date 对象转换为符合特定模版规则的字符串，支持年、月、日、时、分、秒及星期的动态替换。

入口：Date.prototype.format(formatStr)

动作：定义一组星期映射数组，利用 replace 方法配合正则表达式进行逐步替换。注意区分全角/半角格式（如 YYYY 与 YY，MM 与 M），以确保补零规则正确应用。

/**
 * 日期格式化
 * @param {formatStr} 格式模版，支持 yyyy, MM, dd, hh 等标识
 * @returns {string} 格式化后的日期字符串
 */
Date.prototype.format = function(formatStr){
    var str = formatStr;
    var Week = ['日','一','二','三','四','五','六'];
    // 年份替换
    str=str.replace(/yyyy|YYYY/,this.getFullYear());
    str=str.replace(/yy|YY/,(this.getYear() % 100)>9?(this.getYear() % 100).toString():'0' + (this.getYear() % 100));
    // 月份替换
    str=str.replace(/MM/,(this.getMonth()+1)>9?(this.getMonth()+1).toString():'0' + (this.getMonth()+1));
    str=str.replace(/M/g,this.getMonth());
    // 星期替换
    str=str.replace(/w|W/g,Week[this.getDay()]);
    // 日期替换
    str=str.replace(/dd|DD/,this.getDate()>9?this.getDate().toString():'0' + this.getDate());
    str=str.replace(/d|D/g,this.getDate());
    // 时间替换
    str=str.replace(/hh|HH/,this.getHours()>9?this.getHours().toString():'0' + this.getHours());
    str=str.replace(/h|H/g,this.getHours());
    str=str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():'0' + this.getMinutes());
    str=str.replace(/m/g,this.getMinutes());
    str=str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():'0' + this.getSeconds());
    str=str.replace(/s|S/g,this.getSeconds());
    return str;
}

第2步：执行日期加减运算

目的：根据指定的时间单位（年、月、周、天、小时等）和数量，生成新的 Date 对象。

入口：Date.prototype.dateAdd(strInterval, Number)

参数：strInterval 支持 'y'(年), 'm'(月), 'd'(日), 'w'(周), 'h'(时), 'n'(分), 's'(秒) 等；Number 为变化量。

完成状态：返回一个新的 Date 实例，原对象不受影响。

/**
 * 日期计算
 * @param {strInterval} 时间间隔类型
 * @param {Number} 数量
 * @returns 计算后的新日期对象
 */
Date.prototype.dateAdd = function(strInterval, Number) {
    var dtTmp = this;
    switch (strInterval) {
        case 's': return new Date(Date.parse(dtTmp) + (1000 * Number));
        case 'n': return new Date(Date.parse(dtTmp) + (60000 * Number));
        case 'h': return new Date(Date.parse(dtTmp) + (3600000 * Number));
        case 'd': return new Date(Date.parse(dtTmp) + (86400000 * Number));
        case 'w': return new Date(Date.parse(dtTmp) + ((86400000 * 7) * Number));
        case 'q': return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number*3, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
        case 'm': return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
        case 'y': return new Date((dtTmp.getFullYear() + Number), dtTmp.getMonth(), dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
    }
}

第3步：计算日期差值

目的：获取两个日期之间在指定维度上的差异结果。

入口：Date.prototype.dateDiff(strInterval, dtEnd)

参数：dtEnd 可以是 Date 对象或有效日期字符串。若传入字符串，内部会自动转换。strInterval 定义了返回值单位，如 's' 为秒数，'d' 为天數，'m' 为月数差。

/**
 * 比较日期差
 * @param {strInterval} 日期类型：'y、m、d、h、n、s、w'
 * @param {dtEnd} 结束日期
 * @returns {int} 比较结果
 */
Date.prototype.dateDiff = function(strInterval, dtEnd) {
    var dtStart = this;
    if (typeof dtEnd == 'string' ) {
        dtEnd = StringToDate(dtEnd);
    }
    switch (strInterval) {
        case 's':return parseInt((dtEnd - dtStart) / 1000);
        case 'n':return parseInt((dtEnd - dtStart) / 60000);
        case 'h':return parseInt((dtEnd - dtStart) / 3600000);
        case 'd':return parseInt((dtEnd - dtStart) / 86400000);
        case 'w':return parseInt((dtEnd - dtStart) / (86400000 * 7));
        case 'm':return (dtEnd.getMonth()+1)+((dtEnd.getFullYear()-dtStart.getFullYear())*12) - (dtStart.getMonth()+1);
        case 'y':return dtEnd.getFullYear() - dtStart.getFullYear();
    }
}

字符串操作扩展详解

针对前端表单验证和数据清洗需求，补充了原生字符串方法未涵盖的功能。

第1步：字符串截取与长度统计

目的：解决中英文混合字符长度统计不准的问题，并提供左取、右取功能。

入口：String.prototype.len(), String.prototype.left(num, mode), String.prototype.right(num, mode)

说明：len() 通过正则匹配非 ASCII 字符来修正长度；left/right 支持按字节或字符模式截取，当 mode 存在时自动处理中文双字节问题。

/**
 * 取得字符串长度（兼容中英文）
 * @returns {int} 字符长度
 */
String.prototype.len = function() {
    var arr=this.match(/[^ -]/ig); // 注意：原文使用了 \\x00-\\xff，此处保留原逻辑但建议在实际环境中注意编码
    return this.length+(arr==null?0:arr.length);
};

/**
 * 字符串左取指定个数的字符
 * @param {num} 获取个数
 * @param {mode} 模式标志
 * @returns {string}
 */
String.prototype.left = function(num,mode) {
    if(!/\d+/.test(num)) return(this);
    var str = this.substr(0,num);
    if(!mode) return str;
    var n = str.len() - str.length;
    num = num - parseInt(n/2);
    return this.substr(0,num);
};

/**
 * 字符串右取指定个数的字符
 * @param {num} 获取个数
 * @param {mode} 模式标志
 * @returns {string}
 */
String.prototype.right = function(num,mode) {
    if(!/\d+/.test(num)) return(this);
    var str = this.substr(this.length-num);
    if(!mode) return str;
    var n = str.len() - str.length;
    num = num - parseInt(n/2);
    return this.substr(this.length-num);
};

第2步：空格去除与内容匹配

目的：自动化清理用户输入中的空白符，并统计子串出现次数。

入口：String.prototype.trim(), String.prototype.matchCount(str, mode)

参数：matchCount 的 mode 参数若为真，则忽略大小写进行匹配。

/**
 * 去除左右空格
 * @returns {string}
 */
String.prototype.trim = function() {
    return this.replace(/(^\s*)|(\s*$)/g,"");
};

/**
 * 去除左空格
 * @returns {string}
 */
String.prototype.lTrim = function() {
    return this.replace(/(^\s*)/g, "");
};

/**
 * 去除右空格
 * @returns {string}
 */
String.prototype.rTrim = function() {
    return this.replace(/(\s*$)/g, "");
};

/**
 * 统计字符串包含子串的个数
 * @param {string} str 子字符串
 * @param {bool} mode 是否忽略大小写
 * @returns {int} 匹配个数
 */
String.prototype.matchCount = function(str,mode) {
    return eval("this.match(/("+str+")/g"+(mode?"i":"").+").length");
};

数组与其他辅助功能

第1步：数组元素检索

目的：在不依赖第三方库的情况下，快速查找元素索引。

入口：Array.prototype.contains(o)

结果：找到返回索引值（从0开始），未找到返回 -1。

/**
 * 检索数组元素
 * @param {o} 被检索的元素值
 * @returns {int} 元素索引
 */
Array.prototype.contains = function(o) {
    var index = -1;
    for(var i=0;i

第2步：日期信息提取与闰年判断

此外，库中还提供了 datePart() 用于提取日期的特定部分（如仅获取月份或星期），isLeapYear() 用于判断当前日期所在年份是否为闰年，以及 daysOfMonth() 获取当月天数。这些方法均基于前述基础方法进行组合调用，可根据需要直接使用。

简要总结

上述代码片段构成了一套完整的 JavaScript 原型扩展工具集。通过将功能挂载至 Array、Date 和 String 的原型上，开发者可以以更自然的方式调用这些方法。在使用前，请确保在页面加载初期或模块初始化阶段引入此段代码。以上就是基于 Prototype 扩展的 JavaScript 常用函数库的详细内容，更多关于 JavaScript 前端工具集的资料请关注本站其它相关文章！