实用函数就像代码的快捷方式。它们让你无需编写大量额外代码就能处理数组、日期和字符串。通过使用这些函数,你可以更快地完成任务,保持一致性,并防止错误。
在本文中,我们将介绍每个开发人员都应该知道的37个常见JavaScript实用函数。如果你是JavaScript的新手或者还没有记录自己的实用函数,这篇文章适合你。通过学习和使用这些工具,你将节省时间,减少错误,并深入了解如何编写干净、可重用的代码。
那么,让我们开始看看这些实用工具如何让你的JavaScript编码更容易和更有效。
JavaScript中常见的字符串工具
以下是一些常见的JavaScript字符串实用函数,每个函数都附有简短的说明和示例用法:
1. 去除空白
从字符串的两端去除空白。
sql复制代码function trim(str) { return str.trim(); } // 示例用法 console.log(trim(' Hello World! ')); // 'Hello World!'
2. 首字母大写
将字符串的第一个字母大写。
scss复制代码function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1); } // 示例用法 console.log(capitalize('hello')); // 'Hello'
3. 转换为驼峰式
将带有连字符的字符串转换为驼峰式(camelCase)。
javascript复制代码function toCamelCase(input) { return ( input // 将kebab-case、snake_case和空格替换为空格 .replace(/[-_\s]+(.)?/g, (_, char) => (char ? char.toUpperCase() : '')) // 处理PascalCase .replace(/^[A-Z]/, (char) => char.toLowerCase()) ); } // 测试用例 console.log(toCamelCase('PascalCase')); // pascalCase console.log(toCamelCase('kebab-case-string')); // kebabCaseString console.log(toCamelCase('snake_case_string')); // snakeCaseString console.log(toCamelCase('string with spaces')); // stringWithSpaces
4. 转换为烤串式
将字符串转换为烤串式(kebab-case)。
javascript复制代码function toKebabCase(input) { return ( input // 在小写字母和大写字母之间插入连字符来处理驼峰式和PascalCase .replace(/([a-z])([A-Z])/g, '$1-$2') // 用连字符替换下划线和空格 .replace(/[_\s]+/g, '-') // 将整个字符串转换为小写 .toLowerCase() ); } // 测试用例 console.log(toKebabCase('camelCase')); // camel-case console.log(toKebabCase('PascalCase')); // pascal-case console.log(toKebabCase('snake_case_string')); // snake-case-string console.log(toKebabCase('string with spaces')); // string-with-spaces
5. 转换为蛇形
将字符串转换为蛇形(snake_case)。
javascript复制代码function toSnakeCase(input) { return ( input // 在小写字母和大写字母之间插入下划线来处理驼峰式和PascalCase .replace(/([a-z])([A-Z])/g, '$1_$2') // 用下划线替换连字符和空格 .replace(/[-\s]+/g, '_') // 将整个字符串转换为小写 .toLowerCase() ); } // 测试用例 console.log(toSnakeCase('camelCase')); // camel_case console.log(toSnakeCase('PascalCase')); // pascal_case console.log(toSnakeCase('kebab-case-string')); // kebab_case_string console.log(toSnakeCase('string with spaces')); // string_with_spaces
6. 转换为帕斯卡式
将字符串转换为帕斯卡式(PascalCase)。
javascript复制代码function toPascalCase(input) { return ( input // 用空格替换驼峰式、烤串式、蛇形和空格 .replace(/([a-z])([A-Z])|[-_\s]+(.)?/g, (match, p1, p2, p3) => { if (p2) { return p1 + ' ' + p2; } return p3 ? ' ' + p3.toUpperCase() : ''; }) // 按空格分割,首字母大写每个词,并连接 .split(' ') .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) .join('') ); } // 测试用例 console.log(toPascalCase('camelCase')); // CamelCase console.log(toPascalCase('kebab-case-string')); // KebabCaseString console.log(toPascalCase('snake_case_string')); // SnakeCaseString console.log(toPascalCase('string with spaces')); // StringWithSpaces
7. 检查字符串是否包含另一个字符串
检查一个字符串是否包含指定的子字符串。
javascript复制代码function contains(str, substring) { return str.indexOf(substring) !== -1; } // 示例用法 console.log(contains('Hello World', 'World')); // true
8. 替换所有出现的子字符串
替换字符串中所有出现的子字符串。
arduino复制代码function replaceAll(str, find, replace) { return str.split(find).join(replace); } // 示例用法 console.log(replaceAll('Hello World', 'o', 'a')); // 'Hella Warld'
9. 在字符串开始处填充
用另一个字符串填充字符串的开始,直到达到目标长度。
javascript复制代码function padStart(str, targetLength, padString) { return str.padStart(targetLength, padString); } // 示例用法 console.log(padStart('5', 3, '0')); // '005'
10. 在字符串末尾填充
用另一个字符串填充字符串的末尾,直到达到目标长度。
javascript复制代码function padEnd(str, targetLength, padString) { return str.padEnd(targetLength, padString); } // 示例用法 console.log(padEnd('5', 3, '0')); // '500'
11. 计算字符的出现次数
计算字符在字符串中出现的次数。
arduino复制代码function countOccurrences(str, char) { return str.split(char).length - 1; } // 示例用法 console.log(countOccurrences('Hello World', 'o')); // 2
12. 转义HTML
转义HTML特殊字符以防止XSS攻击。
javascript复制代码function escapeHTML(str) { return str.replace(/[&<>"']/g, function (match) { const escapeChars = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; return escapeChars[match]; }); } // 示例用法 console.log(escapeHTML('<div>"Hello" & \'World\'</div>')); // '<div>"Hello" & 'World'</div>'
13. 取消转义HTML
取消转义HTML特殊字符。
javascript复制代码function unescapeHTML(str) { return str.replace(/&|<|>|"|'/g, function (match) { const unescapeChars = { '&': '&', '<': '<', '>': '>', '"': '"', ''': "'" }; return unescapeChars[match]; }); } // 示例用法 console.log(unescapeHTML('<div>"Hello" & 'World'</div>')); // '<div>"Hello" & \'World\'</div>'
14. 格式化货币
将数字格式化为货币字符串,使用逗号作为千位分隔符。
function formatMoney(amount, decimalCount = 2, decimal = '.', thousands = ',') { try { // 确保金额是数字并固定小数位数 decimalCount = Math.abs(decimalCount); decimalCount = isNaN(decimalCount)? 2 : decimalCount; const negativeSign = amount < 0? '-' : ''; let i = parseInt((amount = Math.abs(Number(amount) || 0).toFixed(decimalCount))).toString(); let j = i.length > 3? i.length % 3 : 0; return ( negativeSign + (j? i.substr(0, j) + thousands : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, '$1' + thousands) + (decimalCount ? decimal + Math.abs(amount - i) .toFixed(decimalCount) .slice(2) : '') ); } catch (e) { console.log(e); } } // 测试用例 console.log(formatMoney(1234567.89)); // 1,234,567.89 console.log(formatMoney(1234567.89, 3)); // 1,234,567.890 console.log(formatMoney(-1234567.89, 2, '.', ',')); // -1,234,567.89 console.log(formatMoney(1234567.89, 0, '.', ',')); // 1,234,568 console.log(formatMoney(1234.56, 2, ',', '.')); // 1.234,56
15. 截断段落
将段落截断到指定长度,如果截断则添加省略号。
function truncateParagraph(paragraph, maxLength) { if (paragraph.length <= maxLength) { return paragraph; } return paragraph.slice(0, maxLength) + '...'; } // 示例用法 const paragraph = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae eros eget tellus tristique bibendum. Donec rutrum sed sem quis venenatis.'; console.log(truncateParagraph(paragraph, 50)); // 'Lorem ipsum dolor sit amet, consectetur adipiscing...' console.log(truncateParagraph(paragraph, 100)); // 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae eros eget tellus tristique b...'
如果您出于样式目的想要截断字符串,可以使用 Tailwindcss 截断/行限制
JavaScript 中的常见对象工具函数
16. 检查值是否为对象
检查一个值是否为对象。
function isObject(value) { return value!== null && typeof value === 'object' &&!Array.isArray(value); } console.log(isObject({ a: 1 })); // true console.log(isObject([1, 2, 3])); // false
17. 合并对象(平面对象)
将两个或多个对象合并为一个。
function mergeObjects(...objs) { return Object.assign({},...objs); } console.log(mergeObjects({ a: 1 }, { b: 2 }, { a: 3 })); // { a: 3, b: 2 }
18. 深度合并对象
深度合并两个或多个对象。
function deepMerge(...objects) { const isObject = (obj) => obj && typeof obj === 'object'; return objects.reduce((prev, obj) => { Object.keys(obj).forEach((key) => { const prevVal = prev[key]; const objVal = obj[key]; if (Array.isArray(prevVal) && Array.isArray(objVal)) { prev[key] = prevVal.concat(...objVal); } else if (isObject(prevVal) && isObject(objVal)) { prev[key] = deepMerge(prevVal, objVal); } else { prev[key] = objVal; } }); return prev; }, {}); } const obj1 = { a: 1, b: { x: 10 } }; const obj2 = { b: { y: 20 }, c: 3 }; console.log(deepMerge(obj1, obj2)); // { a: 1, b: { x: 10, y: 20 }, c: 3 }
19. 深度克隆对象
创建一个对象的深度克隆。
function deepClone(obj) { return JSON.parse(JSON.stringify(obj)); } const original = { a: 1, b: { c: 2 } }; const clone = deepClone(original); clone.b.c = 3; console.log(original.b.c); // 2 console.log(clone.b.c); // 3
查看 JavaScript 中克隆嵌套对象/数组的正确方法 以获取更高级的用例。
20. 从对象中省略/删除键
返回一个新对象,其中省略了指定的键。
function omitKeys(obj, keys) { const result = {...obj }; keys.forEach((key) => delete result[key]); return result; } console.log(omitKeys({ a: 1, b: 2, c: 3 }, ['a', 'c'])); // { b: 2 }
21. 选择键以创建新对象
返回一个仅包含指定键的新对象。
function pickKeys(obj, keys) { const result = {}; keys.forEach((key) => { if (obj.hasOwnProperty(key)) { result[key] = obj[key]; } }); return result; } console.log(pickKeys({ a: 1, b: 2, c: 3 }, ['a', 'c'])); // { a: 1, c: 3 }
22. 反转对象的键和值
反转对象的键和值。
function invertObject(obj) { const result = {}; Object.keys(obj).forEach((key) => { result[obj[key]] = key; }); return result; } console.log(invertObject({ a: 1, b: 2, c: 3 })); // { '1': 'a', '2': 'b', '3': 'c' }
23. 检查对象是否为空
检查一个对象是否为空(没有可枚举的属性)。
function isEmptyObject(obj) { return Object.keys(obj).length === 0; } console.log(isEmptyObject({})); // true console.log(isEmptyObject({ a: 1 })); // false
24. 映射对象
创建一个具有相同键但值通过函数转换的新对象。类似于数组的 map()
,但用于对象
function mapObject(obj, fn) { const result = {}; Object.keys(obj).forEach((key) => { result[key] = fn(obj[key], key); }); return result; } console.log(mapObject({ a: 1, b: 2, c: 3 }, (value) => value * 2)); // { a: 2, b: 4, c: 6 }
25. 过滤对象
创建一个仅包含通过筛选函数的属性的新对象。类似于数组的 filter()
,但用于对象
function filterObject(obj, fn) { const result = {}; Object.keys(obj).forEach((key) => { if (fn(obj[key], key)) { result[key] = obj[key]; } }); return result; } console.log(filterObject({ a: 1, b: 2, c: 3 }, (value) => value > 1)); // { b: 2, c: 3 }
26. 冻结对象
冻结一个对象,使其不可变。
function freezeObject(obj) { return Object.freeze(obj); } const obj = { a: 1, b: 2 }; const frozenObj = freezeObject(obj); frozenObj.a = 3; // 不会改变值 console.log(frozenObj.a); // 1
27. 深度冻结对象
深度冻结一个对象,使其及其嵌套对象不可变。
function deepFreeze(obj) { Object.keys(obj).forEach((name) => { const prop = obj[name]; if (typeof prop == 'object' && prop!== null) { deepFreeze(prop); } }); return Object.freeze(obj); } const obj = { a: 1, b: { c: 2 } }; deepFreeze(obj); obj.b.c = 3; // 不会改变值 console.log(obj.b.c); // 2
JavaScript 中的常见数组工具函数
28. 去除重复项
从数组中去除重复的值。
function uniqueArray(arr) { return [...new Set(arr)]; } console.log(uniqueArray([1, 2, 2, 3, 4, 4, 5])); // [1, 2, 3, 4, 5]
29. 分割数组
将数组分割为指定大小的块。
function chunkArray(arr, size) { const result = []; for (let i = 0; i < arr.length; i += size) { result.push(arr.slice(i, i + size)); } return result; } console.log(chunkArray([1, 2, 3, 4, 5], 2)); // [[1, 2], [3, 4], [5]]
30. 数组差异
返回两个数组之间的差异。
function arrayDifference(arr1, arr2) { return arr1.filter((item) =>!arr2.includes(item)); } console.log(arrayDifference([1, 2, 3], [2, 3, 4])); // [1]
JavaScript 中的常见日期工具函数
这些实用函数可以帮助您在 JavaScript 中高效地执行各种日期操作和格式化任务。
31. 无库格式化日期
将日期格式化为指定的字符串格式。
function formatDate(date, format) { const map = { mm: ('0' + (date.getMonth() + 1)).slice(-2), dd: ('0' + date.getDate()).slice(-2), yyyy: date.getFullYear(), hh: ('0' + date.getHours()).slice(-2), MM: ('0' + date.getMinutes()).slice(-2), ss: ('0' + date.getSeconds()).slice(-2) }; return format.replace(/mm|dd|yyyy|hh|MM|ss/gi, (matched) => map[matched]); } const date = new Date(); console.log(formatDate(date, 'dd-mm-yyyy hh:MM:ss')); // 示例:28-07-2024 14:30:45
32. 添加天数
向日期添加指定的天数。
function addDays(date, days) { const result = new Date(date); result.setDate(result.getDate() + days); return result; } const date = new Date(); console.log(addDays(date, 5)); // 向当前日期添加 5 天
33. 减去天数
从一个日期减去指定的天数。
function subtractDays(date, days) { const result = new Date(date); result.setDate(result.getDate() - days); return result; } const date = new Date(); console.log(subtractDays(date, 5)); // 从当前日期减去 5 天
34. 计算两个日期之间的天数
计算两个日期之间的天数。
function daysBetween(date1, date2) { const oneDay = 24 * 60 * 60 * 1000; // 小时 * 分钟 * 秒 * 毫秒 const diffDays = Math.round(Math.abs((date2 - date1) / oneDay)); return diffDays; } const date1 = new Date('2024-07-01'); const date2 = new Date('2024-07-28'); console.log(daysBetween(date1, date2)); // 示例:27 天
35. 检查日期是否为周末
检查给定的日期是否在周末。
function isWeekend(date) { const day = date.getDay(); return day === 0 || day === 6; } const date = new Date(); console.log(isWeekend(date)); // 如果日期是周末则返回 true,否则返回 false
36. 计算一个月的天数
获取特定年份特定月份的天数。
function getDaysInMonth(month, year) { return new Date(year, month + 1, 0).getDate(); } const month = 6; // 七月 const year = 2024; console.log(getDaysInMonth(month, year)); // 示例:2024 年 7 月有 31 天
37. 计算两个日期之间的持续时间
function getDuration(startDate, endDate) { const diff = endDate - startDate; return Math.floor(diff / (1000 * 60 * 60)); // 1000 * 60 * 60 表示以小时为单位的持续时间 // 1000 * 60 * 60 * 24 表示以天为单位的持续时间 // 1000 * 60 表示以分钟为单位的持续时间 } const startDate = new Date('2024-07-01T12:00:00'); const endDate = new Date('2024-07-01T15:30:00'); console.log(getDurationInHours(startDate, endDate)); // 以小时为单位的持续时间
对于更高级的日期用例和经过测试的实用工具,考虑使用 类似于 day.js 的日期库
结论
我们已经介绍了 37 个有用的 JavaScript 实用函数,它们可以帮助您更高效地编码。这些函数简化了数组处理、日期格式化和字符串操作等任务。使用它们可以节省您的时间并减少代码中的错误。
如果这篇文章对您有帮助,请与可能从中受益的其他人分享。将其加入书签以供将来参考,如果您有任何喜欢但未提及的实用函数,欢迎在评论中分享。