JavaScript实用工具函数库，开箱即用-卡卡资源网

一个实用的JavaScript工具函数库，包含字符串、数字、数组、日期、验证等常用工具函数，开箱即用。小白也能轻松上手，复制粘贴就能用！

## 功能特点

– **字符串处理**：去空格、反转、首字母大写、截断
– **数字处理**：随机数、格式化、四舍五入
– **数组处理**：去重、洗牌、分组
– **日期时间**：格式化、时间友好显示
– **验证相关**：邮箱、手机号、URL验证
– **存储相关**：本地存储封装
– **防抖节流**：性能优化利器
– **深拷贝**：对象数组深度复制

## 效果预览

先给大家看看使用后的实际效果，心里有个底：

上图展示了各种工具函数的实际运行效果，每个函数都有示例和输出结果，一目了然。

## 详细使用教程（小白必看）

很多朋友刚接触JavaScript，可能不知道怎么用这个工具库。别担心，我手把手教你，从最基础的步骤开始，保证你一看就会！

### 第一步：准备工作

你只需要一个能写HTML的编辑器就行，推荐新手用：
– **VS Code**（免费好用，功能强大）
– **Sublime Text**（轻量快速）
– 甚至系统自带的记事本都可以！

### 第二步：创建文件

在你的电脑上创建一个文件夹，比如叫 `js-demo`，然后在里面创建两个文件：
1. `utils.js` – 这是工具函数库文件
2. `index.html` – 这是测试页面

### 第三步：复制工具库代码

把下面的完整代码复制到 `utils.js` 文件中，保存好。（完整代码在文章最后面）

### 第四步：创建测试页面

在 `index.html` 文件中，写入以下代码：

“`html
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<title>JS工具函数测试</title>
</head>
<body>
<h1>JavaScript工具函数测试</h1>

<!– 引入工具函数库 –>
<script src=”utils.js”></script>

// 1. 测试字符串处理
console.log(‘=== 字符串处理 ===’);
console.log(‘去空格:’, Utils.trim(‘ hello world ‘));
console.log(‘反转:’, Utils.reverse(‘abcdef’));
console.log(‘首字母大写:’, Utils.capitalize(‘hello’));
console.log(‘截断:’, Utils.truncate(‘这是一段很长很长的文字’, 10));

// 2. 测试数字处理
console.log(‘\n=== 数字处理 ===’);
console.log(‘随机数(1-100):’, Utils.random(1, 100));
console.log(‘格式化数字:’, Utils.formatNumber(1234567.89));
console.log(‘四舍五入:’, Utils.round(3.14159, 2));

// 3. 测试数组处理
console.log(‘\n=== 数组处理 ===’);
console.log(‘去重:’, Utils.unique([1, 2, 2, 3, 3, 3]));
console.log(‘洗牌:’, Utils.shuffle([1, 2, 3, 4, 5]));

// 4. 测试日期时间
console.log(‘\n=== 日期时间 ===’);
console.log(‘格式化日期:’, Utils.formatDate(new Date()));
console.log(‘时间友好显示:’, Utils.timeAgo(Date.now() – 3600000));

// 5. 测试验证
console.log(‘\n=== 验证相关 ===’);
console.log(‘是邮箱吗:’, Utils.isEmail(‘test@example.com’));
console.log(‘是手机号吗:’, Utils.isPhone(‘13812345678’));
console.log(‘是URL吗:’, Utils.isUrl(‘https://www.baidu.com’));
</script>
</body>
</html>
“`

### 第五步：测试效果

1. 双击打开 `index.html` 文件（用浏览器打开）
2. 按 F12 键打开开发者工具
3. 点击”Console”（控制台）标签
4. 你就能看到所有函数的运行结果了！

是不是很简单？只要引入了 `utils.js` 文件，你就可以在任何地方使用 `Utils.函数名()` 来调用这些工具函数了。

### 第六步：常用函数详解

#### 1. 字符串处理

**trim() – 去除首尾空格**
“`javascript
Utils.trim(‘ hello ‘); // 返回 ‘hello’
“`

**reverse() – 反转字符串**
“`javascript
Utils.reverse(‘abc’); // 返回 ‘cba’
“`

**capitalize() – 首字母大写**
“`javascript
Utils.capitalize(‘hello’); // 返回 ‘Hello’
“`

**truncate() – 截断文字**
“`javascript
Utils.truncate(‘这是一段很长的文字’, 5); // 返回 ‘这是一段…’
“`

#### 2. 数字处理

**random() – 生成随机数**
“`javascript
Utils.random(1, 100); // 返回1到100之间的随机整数
“`

**formatNumber() – 格式化数字（加千分位）**
“`javascript
Utils.formatNumber(1234567.89); // 返回 ‘1,234,567.89’
“`

**round() – 四舍五入**
“`javascript
Utils.round(3.14159, 2); // 返回 3.14
“`

#### 3. 数组处理

**unique() – 数组去重**
“`javascript
Utils.unique([1, 2, 2, 3]); // 返回 [1, 2, 3]
“`

**shuffle() – 数组洗牌（打乱顺序）**
“`javascript
Utils.shuffle([1, 2, 3, 4, 5]); // 返回打乱后的数组
“`

**groupBy() – 数组分组**
“`javascript
const people = [
{ name: ‘张三’, age: 20 },
{ name: ‘李四’, age: 20 },
{ name: ‘王五’, age: 25 }
];
Utils.groupBy(people, ‘age’);
// 返回 { ’20’: […], ’25’: […] }
“`

#### 4. 日期时间

**formatDate() – 格式化日期**
“`javascript
Utils.formatDate(new Date()); // 返回 ‘2024-01-01 12:00:00’
Utils.formatDate(new Date(), ‘YYYY年MM月DD日’); // 自定义格式
“`

**timeAgo() – 友好的时间显示**
“`javascript
Utils.timeAgo(Date.now() – 60000); // 返回 ‘1分钟前’
Utils.timeAgo(Date.now() – 86400000); // 返回 ‘1天前’
“`

#### 5. 验证相关

**isEmail() – 验证邮箱**
“`javascript
Utils.isEmail(‘test@example.com’); // 返回 true
Utils.isEmail(‘not-email’); // 返回 false
“`

**isPhone() – 验证手机号**
“`javascript
Utils.isPhone(‘13812345678’); // 返回 true
“`

**isUrl() – 验证网址**
“`javascript
Utils.isUrl(‘https://www.baidu.com’); // 返回 true
“`

#### 6. 本地存储

**setStorage() – 保存数据**
“`javascript
Utils.setStorage(‘username’, ‘小明’);
Utils.setStorage(‘userInfo’, { name: ‘小明’, age: 18 });
“`

**getStorage() – 读取数据**
“`javascript
Utils.getStorage(‘username’); // 返回 ‘小明’
Utils.getStorage(‘userInfo’); // 返回对象
“`

**removeStorage() – 删除数据**
“`javascript
Utils.removeStorage(‘username’);
“`

#### 7. 防抖节流（进阶）

**debounce() – 防抖（停止操作后才执行）**
“`javascript
// 比如搜索框输入，停止输入500毫秒后才搜索
const search = Utils.debounce(function(keyword) {
console.log(‘搜索:’, keyword);
}, 500);
“`

**throttle() – 节流（每隔一段时间执行一次）**
“`javascript
// 比如滚动事件，每隔200毫秒才执行一次
const onScroll = Utils.throttle(function() {
console.log(‘滚动中…’);
}, 200);
“`

### 常见问题解答

**Q: 为什么我调用Utils的时候提示未定义？**
A: 检查一下是不是没有引入utils.js文件，或者引入的顺序错了。一定要先引入utils.js，再在后面的script中使用。

**Q: 这些函数能在Vue/React中使用吗？**
A: 当然可以！你可以把utils.js放到项目里，然后import导入就行，用法是一样的。

**Q: 存储的数据会消失吗？**
A: localStorage存储的数据会一直保存在浏览器里，除非用户手动清除缓存或者卸载浏览器。

## 完整代码

下面是完整的utils.js代码，直接复制就能用：

“`javascript
/**
* JavaScript实用工具函数库
* 包含字符串、数字、数组、日期、验证等常用工具函数
*/
const Utils = {

// ========== 字符串处理 ==========

/**
* 去除字符串首尾空格
* @param {string} str
* @returns {string}
*/
trim(str) {
return str.replace(/^\s+|\s+$/g, ”);
},

/**
* 反转字符串
* @param {string} str
* @returns {string}
*/
reverse(str) {
return str.split(”).reverse().join(”);
},

/**
* 首字母大写
* @param {string} str
* @returns {string}
*/
capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
},

/**
* 截断字符串
* @param {string} str
* @param {number} len 截断长度
* @returns {string}
*/
truncate(str, len) {
if (str.length <= len) return str;
return str.slice(0, len) + ‘…’;
},

// ========== 数字处理 ==========

/**
* 生成指定范围的随机整数
* @param {number} min 最小值
* @param {number} max 最大值
* @returns {number}
*/
random(min, max) {
return Math.floor(Math.random() * (max – min + 1)) + min;
},

/**
* 格式化数字（千分位）
* @param {number} num
* @returns {string}
*/
formatNumber(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ‘,’);
},

/**
* 四舍五入
* @param {number} num
* @param {number} decimals 小数位数
* @returns {number}
*/
round(num, decimals = 0) {
return Number(Math.round(num + ‘e’ + decimals) + ‘e-‘ + decimals);
},

// ========== 数组处理 ==========

/**
* 数组去重
* @param {Array} arr
* @returns {Array}
*/
unique(arr) {
return […new Set(arr)];
},

/**
* 数组洗牌（打乱顺序）
* @param {Array} arr
* @returns {Array}
*/
shuffle(arr) {
const result = […arr];
for (let i = result.length – 1; i > 0; i–) {
const j = Math.floor(Math.random() * (i + 1));
[result[i], result[j]] = [result[j], result[i]];
}
return result;
},

/**
* 数组分组
* @param {Array} arr
* @param {string} key 分组的键
* @returns {Object}
*/
groupBy(arr, key) {
return arr.reduce((group, item) => {
(group[item[key]] = group[item[key]] || []).push(item);
return group;
}, {});
},

// ========== 日期时间 ==========

/**
* 格式化日期
* @param {Date} date
* @param {string} format 格式字符串
* @returns {string}
*/
formatDate(date, format = ‘YYYY-MM-DD HH:mm:ss’) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, ‘0’);
const day = String(date.getDate()).padStart(2, ‘0’);
const hour = String(date.getHours()).padStart(2, ‘0’);
const minute = String(date.getMinutes()).padStart(2, ‘0’);
const second = String(date.getSeconds()).padStart(2, ‘0’);

return format
.replace(‘YYYY’, year)
.replace(‘MM’, month)
.replace(‘DD’, day)
.replace(‘HH’, hour)
.replace(‘mm’, minute)
.replace(‘ss’, second);
},

/**
* 友好的时间显示
* @param {number} timestamp 时间戳
* @returns {string}
*/
timeAgo(timestamp) {
const now = Date.now();
const diff = now – timestamp;

const minute = 60 * 1000;
const hour = 60 * minute;
const day = 24 * hour;
const week = 7 * day;
const month = 30 * day;
const year = 365 * day;

if (diff < minute) {
return ‘刚刚’;
} else if (diff < hour) {
return Math.floor(diff / minute) + ‘分钟前’;
} else if (diff < day) {
return Math.floor(diff / hour) + ‘小时前’;
} else if (diff < week) {
return Math.floor(diff / day) + ‘天前’;
} else if (diff < month) {
return Math.floor(diff / week) + ‘周前’;
} else if (diff < year) {
return Math.floor(diff / month) + ‘个月前’;
} else {
return Math.floor(diff / year) + ‘年前’;
}
},

// ========== 验证相关 ==========

/**
* 验证邮箱
* @param {string} email
* @returns {boolean}
*/
isEmail(email) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
},

/**
* 验证手机号
* @param {string} phone
* @returns {boolean}
*/
isPhone(phone) {
return /^1[3-9]\d{9}$/.test(phone);
},

/**
* 验证URL
* @param {string} url
* @returns {boolean}
*/
isUrl(url) {
try {
new URL(url);
return true;
} catch {
return false;
}
},

// ========== 存储相关 ==========

/**
* 保存本地存储
* @param {string} key
* @param {*} value
*/
setStorage(key, value) {
if (typeof value === ‘object’) {
localStorage.setItem(key, JSON.stringify(value));
} else {
localStorage.setItem(key, value);
}
},

/**
* 读取本地存储
* @param {string} key
* @returns {*}
*/
getStorage(key) {
const value = localStorage.getItem(key);
try {
return JSON.parse(value);
} catch {
return value;
}
},

/**
* 删除本地存储
* @param {string} key
*/
removeStorage(key) {
localStorage.removeItem(key);
},

// ========== 防抖节流 ==========

/**
* 防抖
* @param {Function} fn
* @param {number} delay 延迟时间（毫秒）
* @returns {Function}
*/
debounce(fn, delay = 300) {
let timer = null;
return function(…args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
},

/**
* 节流
* @param {Function} fn
* @param {number} delay 间隔时间（毫秒）
* @returns {Function}
*/
throttle(fn, delay = 300) {
let lastTime = 0;
return function(…args) {
const now = Date.now();
if (now – lastTime >= delay) {
lastTime = now;
fn.apply(this, args);
}
};
},

// ========== 其他 ==========

/**
* 深拷贝
* @param {*} obj
* @returns {*}
*/
deepClone(obj) {
if (obj === null || typeof obj !== ‘object’) {
return obj;
}
if (obj instanceof Date) {
return new Date(obj.getTime());
}
if (obj instanceof Array) {
return obj.map(item => this.deepClone(item));
}
const result = {};
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
result[key] = this.deepClone(obj[key]);
}
}
return result;
}
};

// 支持模块化导出
if (typeof module !== ‘undefined’ && module.exports) {
module.exports = Utils;
}
“`

## 总结

这个JavaScript工具函数库非常实用，做项目的时候经常会用到这些函数。不用每次都自己写，直接拿来用就行，能省很多时间。

代码都是原生JS写的，不依赖任何框架，不管是原生项目、Vue、React都能用。新手也能轻松上手，复制粘贴就能用！

如果你觉得有用，记得收藏一下，以后做项目的时候直接拿来用就行！

一个实用的JavaScript工具函数库，包含字符串、数字、数组、日期、验证等常用工具函数，开箱即用。

## 包含功能

– 字符串处理（trim、reverse、capitalize、truncate）
– 数字处理（random、formatNumber、round）
– 数组处理（unique、shuffle、groupBy）
– 日期时间（formatDate、timeAgo）
– 验证相关（isEmail、isPhone、isUrl）
– 存储相关（setStorage、getStorage、removeStorage）
– 防抖节流（debounce、throttle）
– 深拷贝（deepClone）

## 核心代码

// 字符串处理
function trim(str) {
    return str.replace(/^\s+|\s+$/g, '');
}

function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

function truncate(str, len = 30) {
    return str.length > len ? str.slice(0, len) + '...' : str;
}

// 数字处理
function random(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function formatNumber(num) {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

// 数组处理
function unique(arr) {
    return [...new Set(arr)];
}

function shuffle(arr) {
    return arr.sort(() => Math.random() - 0.5);
}

// 验证相关
function isEmail(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

function isPhone(phone) {
    return /^1[3-9]\d{9}$/.test(phone);
}

function isUrl(url) {
    return /^https?:\/\/.+/.test(url);
}

// 防抖节流
function debounce(fn, delay = 300) {
    let timer = null;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => fn.apply(this, args), delay);
    };
}

function throttle(fn, delay = 300) {
    let last = 0;
    return function(...args) {
        const now = Date.now();
        if (now - last > delay) {
            last = now;
            fn.apply(this, args);
        }
    };
}

// 深拷贝
function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') return obj;
    const clone = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            clone[key] = deepClone(obj[key]);
        }
    }
    return clone;
}

文章版权归作者所有，未经允许请勿转载。

THE END