前端开发常用JavaScript工具函数汇总

作者:函数茶馆时间:2026-10-28 04:35:23浏览:629

本文整理了一系列前端开发中高频使用的JavaScript工具函数。内容涵盖从URL中提取特定参数、实现页面跳转、数字格式化为千分位及两位小数、验证数字类型,以及生成标准格式的当前日期字符串和基于时间的唯一代码。这些代码片段可直接嵌入项目,解决常见的数据处理与格式转换需求。

URL参数解析与页面跳转

在Web开发中,经常需要从当前页面的URL中提取特定的查询参数。以下代码展示了如何通过正则表达式解析location.href来获取指定参数名的值。


实现代码如下:

 
function getUrlPara(paraName)
{ 
var sUrl = location.href;
var sReg = "(?://?|&){1}" + paraName + "=([^&]*)";
var re = new RegExp(sReg, "gi");
re.exec(sUrl);
return RegExp.$1;
} 

有时需要通过JavaScript动态改变页面地址,实现客户端页面的跳转。


实现代码如下:

 
var pn = $("#gotopagenum").val();//#gotopagenum是文本框的id属性
location.href = "NewList.aspx?pagenum="+pn;//location.href实现客户端页面的跳转

数字格式化与类型校验

在处理金额或大数值时,通常需要将数字格式化为千分位显示,以提高可读性。


实现代码如下:

 
function Convert(money)
{ 
var s = money; //获取小数型数据
s += "";
if (s.indexOf(".") == -1) s += ".00"; //如果没有小数点,在后面补个小数点和00
if (/\.\d$/.test(s)) s += "0"; //正则判断
while (/\d{4}(\.|,)/.test(s)) //符合条件则进行替换
s = s.replace(/(\d)(\d{3}(\.|,))/, "$1,$2"); //每隔3位添加一个
return s;
} 

在前端表单验证或数据校验场景中,常需判断输入字符串是否为有效数字。


实现代码如下:

 
function IsNumeric(txt) {
if (txt == "") {
return false;
} 
if (txt.indexOf(",") > 0) {
txt = txt.replace(",", "");
} 
if (isNaN(txt)) {
return false;
} 
else {
return true;
} 
} 

金融或电商应用中,常需将数字格式化为保留两位小数的字符串。


实现代码如下:

 
function changeTwoDecimal_f(x) {
var f_x = parseFloat(x);
if (isNaN(f_x)) {
alert('function:changeTwoDecimal->parameter error');
return false;
} 
f_x = Math.round(f_x * 100) / 100;
var s_x = f_x.toString();
var pos_decimal = s_x.indexOf('.');
if (pos_decimal < 0) {
pos_decimal = s_x.length;
s_x += '.';
} 
while (s_x.length <= pos_decimal + 2) {
s_x += '0';
} 
return s_x;
} 

JavaScript提供了parseFloat和parseInt函数,用于将字符串转换为浮点数或整数,是基础的数据类型转换工具。



日期处理与时间戳生成

在后台管理或查询系统中,常需预置当前日期的查询条件,例如默认显示本月1日至今天的范围。


实现代码如下:

 
var now = new Date();
var year = now.getYear();
if (now.getYear() < 1900) {
year = now.getYear() + 1900;
} 
var month = now.getMonth() + 1;
var day = now.getDate();
if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;
$("#txtDate1").val(year.toString() + "-" + month.toString() + "-01");
$("#txtDate2").val(year.toString() + "-" + month.toString() + "-" + day.toString());

在某些场景下,需要生成一个基于当前时间的唯一标识符,以替代GUID。以下函数通过拼接年月日时分秒及毫秒生成时间戳代码。


实现代码如下:

 
function NowTimeCode()
{ 
var Result="";
var now = new Date();
var year = now.getYear();
if (now.getYear() < 1900) {
year = now.getYear() + 1900;
} 
var month = now.getMonth() + 1;
var day = now.getDate();
var hour = now.getHours();
var minutes = now.getMinutes();
var second = now.getSeconds();
var millisecond = now.getMilliseconds();
if (month < 10) month = "0" + month;
if (day < 10) day = "0"+ day;
if (hour < 10) hour = "0"+ hour;
if (minutes < 10) minutes = "0"+ minutes;
if (second < 10) second = "0"+ second;
if (millisecond < 10)
millisecond = "00"+ millisecond;
else
{ 
if (millisecond < 100)
{ 
millisecond = "0"+ millisecond;
} 
} 
Result = year.toString() + month.toString() + day.toString() + hour.toString() + minutes.toString() + second.toString() + millisecond.toString();
return Result;
} 
作者最新文章