A collection of useful utilities: throttle, debounce, date formatting, device detection, money formatting, decimal calculations, Excel processing and more
npm install react-util-tools一个实用的 JavaScript/TypeScript 工具库集合,包含节流防抖、日期处理、设备检测、金额格式化、高精度计算等常用功能。
✨ 功能丰富 - 涵盖日常开发中的常用工具函数
🌳 Tree Shaking - 支持按需导入,只打包使用的代码
📘 TypeScript - 完整的类型支持
📦 零配置 - 开箱即用
🎯 高质量 - 基于成熟的第三方库封装
``bash`
npm install react-util-tools
`typescript
import {
throttle,
formatMoney,
formatDate,
getOS,
Decimal
} from '@dj49846917/react-tools'
// 节流函数
const handleScroll = throttle(() => {
console.log('scrolling...')
}, 1000)
// 金额格式化
const price = formatMoney(1234.56) // "¥1,234.56"
// 日期格式化
const date = formatDate(new Date(), 'yyyy-MM-dd') // "2024-11-10"
// 设备检测
const os = getOS() // "MacOS" | "Windows" | "iOS" | "Android" ...
// 高精度计算
const total = new Decimal('0.1').plus('0.2') // Decimal(0.3)
`
- 节流函数
- debounce() - 防抖函数$3
- getQueryParam() - 获取单个参数
- getAllQueryParams() - 获取所有参数
- getQueryParamAll() - 获取同名参数数组$3
- setCookie() - 设置 Cookie
- getCookie() - 获取 Cookie
- removeCookie() - 删除 Cookie
- hasCookie() - 检查 Cookie 是否存在
- getAllCookies() - 获取所有 Cookie
- clearAllCookies() - 清除所有 Cookie$3
- getOS() - 获取操作系统
- getBrowser() - 获取浏览器类型
- getBrowserEngine() - 获取浏览器内核
- isMobile() / isTablet() / isDesktop() - 设备类型判断
- isIOS() / isAndroid() / isWeChat() - 平台判断
- 更多...$3
- formatMoney() - 金额格式化
- parseMoney() - 金额反格式化
- formatNumber() - 数字格式化
- formatMoneyToChinese() - 金额转中文大写
- formatPercent() - 百分比格式化
- maskEmail() - 邮箱脱敏
- unmaskEmail() - 邮箱解脱敏$3
基于 date-fns 封装的日期工具:
- formatDate() - 格式化日期
- formatRelativeTime() - 相对时间(如"3分钟前")
- getDaysDiff() - 计算天数差
- addDaysToDate() - 增加天数
- getStartOfDay() / getEndOfDay() - 一天的开始/结束
- 更多...#### UTC 时区工具
-
formatUTC() - UTC 时间格式化
- toUTC() / fromUTC() - 时区转换
- getUTCYearStartTimestamp() - 年份第一天时间戳
- getUTCWeeksInYear() - 获取一年有多少周
- getUTCWeekStart() / getUTCWeekEnd() - 获取周的开始/结束时间
- 更多...$3
基于 decimal.js 的高精度十进制运算:
- 解决 JavaScript 浮点数精度问题
- 支持任意精度的加减乘除
- 适用于金融计算、科学计算等场景#### Decimal Utils - 高精度计算工具函数
-
add() - 加法运算
- subtract() - 减法运算
- multiply() - 乘法运算
- divide() - 除法运算
- equals() - 判断相等
- greaterThan() / lessThan() - 大小比较
- round() / ceil() / floor() - 取整
- abs() / negate() - 绝对值/取反$3
基于 SheetJS (xlsx) 的 Excel 文件处理工具:
- XLSX - 完整的 SheetJS 对象
- readExcelFile() - 读取 Excel 文件
- exportJSONToExcel() - 导出 JSON 为 Excel
- workbookToJSON() - WorkBook 转 JSON
- jsonToWorkbook() - JSON 转 WorkBook
- readExcelToJSON() - 直接读取为 JSON
- 支持多种格式(.xlsx, .xls, .csv 等)
- 完整保留 SheetJS 所有功能$3
强大的字符串处理工具集合:
- camelCase() / snakeCase() / kebabCase() - 命名转换
- truncate() / padStart() / padEnd() - 字符串操作
- maskPhone() / maskIdCard() / maskBankCard() - 数据脱敏
- isValidPhone() / isValidEmail() / isValidUrl() - 格式验证
- randomString() / uuid() - 随机生成
- toBase64() / fromBase64() - Base64 编解码
- escapeHtml() / stripHtml() - HTML 处理
- 更多...使用示例
$3
`typescript
import { throttle, debounce } from '@dj49846917/react-tools'// 滚动事件节流
const handleScroll = throttle(() => {
console.log('scrolling...')
}, 1000)
// 搜索输入防抖
const handleSearch = debounce((keyword: string) => {
console.log('searching:', keyword)
}, 500)
`$3
`typescript
import { getQueryParam, getAllQueryParams } from '@dj49846917/react-tools'// URL: ?id=123&name=test
const id = getQueryParam('id') // "123"
const params = getAllQueryParams() // { id: "123", name: "test" }
`$3
`typescript
import { setCookie, getCookie, removeCookie } from '@dj49846917/react-tools'// 设置 Cookie
setCookie('token', 'abc123', {
expires: 7 24 60 * 60, // 7天(秒)
path: '/',
secure: true,
sameSite: 'Strict'
})
// 获取 Cookie
const token = getCookie('token') // "abc123"
// 删除 Cookie
removeCookie('token')
`$3
`typescript
import { getOS, getBrowser, isMobile } from 'react-tools'const os = getOS() // "MacOS"
const browser = getBrowser() // "Chrome"
if (isMobile()) {
// 移动端处理
}
`$3
`typescript
import { formatMoney, parseMoney, formatMoneyToChinese, maskEmail } from 'react-tools'formatMoney(1234.56) // "¥1,234.56"
formatMoney(1234.56, { symbol: '$' }) // "$1,234.56"
parseMoney('¥1,234.56') // 1234.56
formatMoneyToChinese(1234.56) // "壹仟贰佰叁拾肆元伍角陆分"
// 邮箱脱敏
maskEmail('dj49846917@proton.me') // "dj4*@proton.me"
`$3
`typescript
import { formatDate, formatRelativeTime, getDaysDiff } from 'react-tools'formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss')
// "2024-11-10 15:30:45"
formatRelativeTime(new Date(Date.now() - 5 60 1000))
// "5 分钟前"
getDaysDiff(new Date('2024-11-15'), new Date('2024-11-10'))
// 5
`$3
`typescript
import {
formatUTC,
getUTCYearStartTimestamp,
getUTCWeeksInYear,
getUTCWeekStart
} from 'react-tools'// 格式化为 UTC 时间
formatUTC(new Date()) // "2024-11-10 07:30:00"
// 获取 2024 年第一天的时间戳
getUTCYearStartTimestamp(2024) // 1704067200000
// 获取 2024 年有多少周
getUTCWeeksInYear(2024) // 52
// 获取第 10 周的开始时间
getUTCWeekStart(2024, 10) // Date 对象
`$3
`typescript
import { Decimal, add, multiply, divide } from 'react-tools'// 使用 Decimal 类
const result = new Decimal('0.1').plus('0.2')
console.log(result.toString()) // "0.3"
// 金额计算
const price = new Decimal('19.99')
const quantity = new Decimal('3')
const total = price.times(quantity)
console.log(total.toFixed(2)) // "59.97"
// 使用工具函数(返回 number 类型)
add(0.1, 0.2) // 0.3
multiply(19.99, 3) // 59.97
divide(100, 3) // 33.333...
`$3
`typescript
import { readExcelToJSON, exportJSONToExcel } from 'react-tools'// 读取 Excel 文件
async function handleFileUpload(file: File) {
const data = await readExcelToJSON(file)
console.log(data) // [{ name: '张三', age: 25 }, ...]
}
// 导出 JSON 为 Excel
function exportData() {
const data = [
{ name: '张三', age: 25, city: '北京' },
{ name: '李四', age: 30, city: '上海' }
]
exportJSONToExcel(data, 'users.xlsx', 'UserList')
}
`$3
`typescript
import {
camelCase,
maskPhone,
isValidEmail,
randomString,
uuid
} from 'react-tools'// 命名转换
camelCase('hello-world') // 'helloWorld'
// 数据脱敏
maskPhone('13812345678') // '138**5678'
// 格式验证
isValidEmail('test@example.com') // true
// 随机生成
randomString(8) // 'aB3xY9Zk'
uuid() // '550e8400-e29b-41d4-a716-446655440000'
`TypeScript 支持
完整的 TypeScript 类型支持,开箱即用。
`typescript
import { Decimal, formatMoney, getOS } from 'react-tools'const amount: Decimal = new Decimal('100')
const formatted: string = formatMoney(1234.56)
const os: string = getOS()
`Tree Shaking
支持按需导入,只打包使用的代码:
`typescript
// 只导入需要的函数
import { formatMoney, Decimal } from 'react-tools'// 打包时只会包含 formatMoney 和 Decimal 相关代码
`依赖
-
date-fns - 日期处理
- date-fns-tz - 时区处理
- decimal.js - 高精度计算
- xlsx` - Excel 文件处理MIT
alice & bobby