当前位置:首页 > JavaScript

js实现驼峰

2026-02-28 19:22:32JavaScript

驼峰命名法简介

驼峰命名法分为大驼峰(PascalCase)和小驼峰(camelCase)。大驼峰每个单词首字母大写,小驼峰首个单词首字母小写,后续单词首字母大写。

字符串转小驼峰

将下划线或连字符连接的字符串转为小驼峰格式:

js实现驼峰

function toCamelCase(str) {
  return str.replace(/[-_](.)/g, (_, char) => char.toUpperCase());
}

// 示例
toCamelCase('hello-world'); // 'helloWorld'
toCamelCase('hello_world'); // 'helloWorld'

字符串转大驼峰

将下划线或连字符连接的字符串转为大驼峰格式:

js实现驼峰

function toPascalCase(str) {
  return str.replace(/[-_](.)|(^\w)/g, (match, p1, p2) => 
    (p1 ? p1.toUpperCase() : p2.toUpperCase())
  );
}

// 示例
toPascalCase('hello-world'); // 'HelloWorld'
toPascalCase('hello_world'); // 'HelloWorld'

驼峰转其他格式

将驼峰字符串转为下划线或连字符格式:

function camelToSnake(str) {
  return str.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`);
}

function camelToKebab(str) {
  return str.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
}

// 示例
camelToSnake('helloWorld'); // 'hello_world'
camelToKebab('helloWorld'); // 'hello-world'

处理边界情况

空字符串或非字符串输入时返回原值:

function safeToCamelCase(str) {
  if (typeof str !== 'string') return str;
  return str.replace(/[-_](.)/g, (_, char) => char.toUpperCase());
}

这些方法覆盖了常见的驼峰命名转换需求,可根据实际场景调整正则表达式处理更复杂的格式。

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

相关文章

js实现分页

js实现分页

实现分页的基本思路 分页功能通常需要处理数据分割、页码生成和用户交互。核心逻辑包括计算总页数、根据当前页截取数据、渲染页码按钮等。 前端分页实现(静态数据) 假设已有全部数据,仅需前端分页展示:…

js实现拷贝

js实现拷贝

实现文本拷贝 使用 document.execCommand 方法(已废弃但兼容性较好): function copyText(text) { const textarea = document…

js实现换肤

js实现换肤

使用CSS变量实现换肤 通过CSS变量可以轻松实现主题切换功能。CSS变量在根元素中定义,通过JavaScript动态修改这些变量值。 :root { --primary-color: #349…

js实现祖玛

js实现祖玛

实现祖玛游戏的核心思路 祖玛游戏的核心玩法是发射彩色珠子,形成三个或以上相同颜色的珠子即可消除。以下是使用JavaScript实现的基本框架。 游戏初始化 创建画布并初始化游戏状态: const…

js实现授权

js实现授权

授权流程设计 授权流程通常涉及前端与后端的交互,常见方案包括OAuth2.0、JWT等。以JWT为例的典型流程: 用户提交凭证(如用户名密码)到认证服务 服务端验证通过后生成包含用户信息的JWT令牌…

js实现导航菜单

js实现导航菜单

使用HTML和CSS创建基础结构 导航菜单的基础结构通常由HTML的无序列表(<ul>)和列表项(<li>)组成,每个列表项包含一个链接(<a>)。CSS用于样式化…