当前位置:首页 > JavaScript

js实现驼峰

2026-02-28 19:22:32JavaScript

驼峰命名法简介

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

字符串转小驼峰

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

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

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

字符串转大驼峰

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

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
分享给朋友:

相关文章

css3结合js制作

css3结合js制作

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

jquery js

jquery js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够更高…

js实现授权

js实现授权

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

js实现吸色

js实现吸色

使用Canvas实现吸色功能 通过Canvas的getImageData方法获取像素颜色数据。创建一个Canvas元素,将目标图像绘制到Canvas上,通过鼠标事件获取坐标对应的颜色值。 c…

js实现路由

js实现路由

js实现路由的方法 在JavaScript中实现路由功能可以通过多种方式完成,以下是几种常见的方法: 使用原生JavaScript实现路由 通过监听window.onhashchange事件来实现…

js进度条实现

js进度条实现

使用HTML和CSS创建基础结构 在HTML中创建一个容器元素用于显示进度条,通常使用<div>元素。CSS用于设置进度条的样式,包括宽度、高度、颜色和圆角等属性。 <div c…