前端开发必备：常用工具函数合集
在日常前端开发中，我们经常需要用到各种工具函数。这些函数能够提高开发效率，减少重复代码。今天分享一些实用的工具函数，可以直接用在项目中。
基础工具函数
首先，我们创建一个工具对象，把这些函数集中管理：
const utils = {
// 验证邮箱格式
validateEmail(inputStr) {
return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(inputStr)
},
// 验证手机号码（中国大陆）
validateMobile(inputStr) {
return /^1[3-9]\d{9}$/.test(inputStr)
},
// 验证固定电话
validateTelephone(inputStr) {
return /^(0\d{2,3}-)?\d{7,8}$/.test(inputStr)
},
// 验证URL地址
validateURL(inputStr) {
return /^https?:\/\/.+\..+/.test(inputStr)
}
}设备检测函数
检测用户使用的设备和浏览器很有用，特别是在做响应式设计时：
// 获取用户代理信息
const userAgent = navigator.userAgent.toLowerCase()
const deviceUtils = {
// 检查是否为微信浏览器
isWeChat() {
return /micromessenger/.test(userAgent)
},
// 检查是否为QQ浏览器
isQQBrowser() {
return /qqbrowser/.test(userAgent)
},
// 检查是否为移动设备
isMobile() {
return /android|webos|iphone|ipod|blackberry/.test(userAgent)
},
// 检查是否为PC设备
isPC() {
return !this.isMobile()
},
// 检查是否为iOS设备
isIOS() {
return /iphone|ipad|ipod/.test(userAgent)
},
// 检查是否为Android设备
isAndroid() {
return /android/.test(userAgent)
}
}dom操作函数
这些函数帮助处理网页元素和用户交互：
const domUtils = {
// 移除html标签
stripHTML(html) {
const div = document.createElement('div')
div.innerHTML = html
return div.textContent || div.innerText || ''
},
// 动态加载JavaScript文件
loadScript(url) {
return new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.onload = resolve
script.onerror = reject
document.head.appendChild(script)
})
},
// 获取滚动位置
getScrollPosition(element = window) {
if (element === window) {
return {
x: window.pageXOffset,
y: window.pageYOffset
}
}
return {
x: element.scrollLeft,
y: element.scrollTop
}
},
// 平滑滚动到顶部
scrollToTop() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop > 0) {
window.requestAnimationFrame(this.scrollToTop)
window.scrollTo(0, scrollTop - scrollTop / 8)
}
},
// 复制文本到剪贴板（现代方法）
async copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text)
return true
} catch (err) {
// 降级方案
const textArea = document.createElement('textarea')
textArea.value = text
document.body.appendChild(textArea)
textArea.select()
const result = document.execCommand('copy')
document.body.removeChild(textArea)
return result
}
}
}数据处理函数
处理数组、数字等数据的实用函数：
const dataUtils = {
// 数组去重
unique(arr) {
return [...new Set(arr)]
},
// 检查元素是否在数组中
inArray(arr, item) {
return arr.includes(item)
},
// 数组随机排序（洗牌算法）
shuffle(array) {
const result = [...array]
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
},
// 检测密码强度
checkPasswordStrength(password) {
let strength = 0
if (password.length < 6) return 0
if (/[0-9]/.test(password)) strength++
if (/[a-z]/.test(password)) strength++
if (/[A-Z]/.test(password)) strength++
if (/[^a-zA-Z0-9]/.test(password)) strength++
return strength
},
// 数字转中文（简易版）
numberToChinese(num) {
const digits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
const units = ['', '十', '百', '千', '万']
if (num < 10) return digits[num]
if (num < 20) return num === 10 ? '十' : '十' + digits[num % 10]
let result = ''
let str = num.toString()
for (let i = 0; i < str.length; i++) {
const digit = parseInt(str[i])
const unit = units[str.length - i - 1]
if (digit !== 0) {
result += digits[digit] + unit
}
}
return result
}
}使用方法
在项目中创建一个 utils.js 文件，导出所有工具函数：
// utils.js
export { utils, deviceUtils, domUtils, dataUtils }在需要的页面中引入：
import { utils, deviceUtils } from './utils.js'
// 使用示例
console.log(utils.validateEmail('test@example.com')) // true
console.log(deviceUtils.isWeChat()) // false
console.log(dataUtils.checkPasswordStrength('Abc123!')) // 4测试示例
可以在HTML中测试这些函数：
<div class="test-card">
<h3>邮箱验证测试</h3>
<input type="text" id="emailTest" placeholder="输入邮箱地址">
<button onclick="testEmail()">验证邮箱</button>
<div id="emailResult"></div>
</div>
<script>
function testEmail() {
const email = document.getElementById('emailTest').value
const isValid = utils.validateEmail(email)
const result = document.getElementById('emailResult')
if (isValid) {
result.textContent = '✅ 邮箱格式正确'
result.className = 'success'
} else {
result.textContent = '❌ 邮箱格式错误'
result.className = 'error'
}
}
</script>使用建议
按需引入：不需要全部引入，只引入用到的函数
错误处理：在实际使用中添加适当的错误处理
类型检查：可以加入参数类型验证
性能优化：对于频繁使用的函数，考虑性能优化
注意事项
正则表达式可能需要根据具体需求调整
设备检测基于用户代理，可能不够准确
剪贴板api需要HTTPS环境
数字转换函数处理范围有限，复杂需求需要更完善的实现
这些工具函数覆盖了前端开发的常见需求，可以直接使用，也可以根据项目需求进行修改。合理使用工具函数能够显著提高开发效率，减少重复工作。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
