当前位置:首页 > JavaScript

js实现驼峰

2026-04-03 19:47:39JavaScript

实现字符串驼峰化的方法

使用正则表达式和字符串替换

通过正则表达式匹配字符串中的连字符或下划线,并将其后的字母转换为大写。移除所有非字母数字字符后,将首字母转为小写(小驼峰)或大写(大驼峰)。

function toCamelCase(str, isPascalCase = false) {
  return str.replace(/[-_]+(.)?/g, (_, c) => 
    c ? c.toUpperCase() : ''
  ).replace(/^./, firstChar => 
    isPascalCase ? firstChar.toUpperCase() : firstChar.toLowerCase()
  );
}

使用数组操作和字符转换

将字符串按分隔符拆分为数组,处理每个单词的首字母大小写后拼接成新字符串。

function toCamelCase(str, isPascalCase = false) {
  const words = str.split(/[-_]/);
  return words.map((word, i) => 
    i === 0 && !isPascalCase 
      ? word.toLowerCase() 
      : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
  ).join('');
}

处理边界情况

空字符串或非字符串输入时返回原值,处理连续分隔符和数字开头的字符串。

function toCamelCase(str, isPascalCase = false) {
  if (typeof str !== 'string') return str;
  if (!str.trim()) return str;

  return str
    .replace(/^[^a-zA-Z]+/, '')
    .replace(/[-_]+(.)?/g, (_, c) => 
      c ? c.toUpperCase() : ''
    )
    .replace(/^./, firstChar => 
      isPascalCase ? firstChar.toUpperCase() : firstChar.toLowerCase()
    );
}

性能优化版本

对于长字符串处理,使用一次正则替换完成所有转换。

function toCamelCase(str, isPascalCase = false) {
  return str.replace(
    /(^|[-_])([a-z])/g, 
    (_, prefix, char) => char.toUpperCase()
  ).replace(/^./, firstChar => 
    isPascalCase ? firstChar : firstChar.toLowerCase()
  );
}

TypeScript 类型安全版本

添加类型注解确保输入输出类型正确。

js实现驼峰

function toCamelCase(str: string, isPascalCase: boolean = false): string {
  return str.replace(/[-_]+(.)?/g, (_, c) => 
    c ? c.toUpperCase() : ''
  ).replace(/^./, firstChar => 
    isPascalCase ? firstChar.toUpperCase() : firstChar.toLowerCase()
  );
}

标签: 驼峰js
分享给朋友:

相关文章

css3结合js制作

css3结合js制作

CSS3 结合 JavaScript 制作动态效果 CSS3 和 JavaScript 结合可以实现丰富的动态效果,包括动画、交互和响应式设计。以下是几种常见的实现方式: CSS3 动画与 Java…

js实现轮播图

js实现轮播图

基础轮播图实现 使用HTML、CSS和JavaScript实现一个简单的自动轮播图。HTML结构包含一个容器和多个图片项。 <div class="slider"> <div…

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-containe…

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。…

js实现dh

js实现dh

JavaScript 实现 DH(Diffie-Hellman)密钥交换 Diffie-Hellman(DH)密钥交换是一种安全协议,允许双方在不安全的通信信道上建立一个共享密钥。以下是如何在 Jav…

js实现图

js实现图

JavaScript 实现图的常用方法 在 JavaScript 中,图(Graph)可以通过多种方式实现,常见的包括邻接表(Adjacency List)和邻接矩阵(Adjacency Matrix…