JS中camelCase、PascalCase、snake_case、kebab-case互转方法

日常做代码规范校验、前后端接口字段格式对齐、生成代码片段的时候，经常需要在四种常用命名格式之间做转换，不需要为每两种格式单独写转换逻辑，先实现通用的单词拆分函数，再基于拆分结果拼接成目标格式即可，代码轻量无依赖。

核心：通用单词拆分函数 #

不管输入是哪种命名格式，先统一拆成纯小写的单词数组，后续所有格式转换都基于这个数组做拼接，避免重复的正则判断：

function splitIntoWords(str) {
  return str
    // 把下划线、短横线、空格等显式分隔符替换为空格
    .replace(/[_-\s]+/g, ' ')
    // 识别驼峰格式的大小写边界，在单词分界处加空格
    .replace(/([a-z])([A-Z])/g, '$1 $2')
    // 处理连续大写的场景（比如getHTTPResponse拆分为get HTTP Response）
    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
    // 统一转小写后拆分为数组，过滤空值
    .toLowerCase()
    .split(' ')
    .filter(Boolean);
}

如果需要处理带数字、特殊字符的命名，可以在替换逻辑里加一行.replace(/[^a-zA-Z0-9]/g, ' ')，会自动过滤非字母数字的字符，数字会保留在相邻单词片段中，符合常规命名习惯。

各目标格式转换实现 #

基于拆分好的单词数组，按目标格式的规则拼接即可：

• 转camelCase（小驼峰）：第一个单词全小写，后续每个单词首字母大写，直接拼接

function toCamelCase(str) {
  const words = splitIntoWords(str);
  return words
    .map((word, idx) => idx === 0 ? word : word[0].toUpperCase() + word.slice(1))
    .join('');
}

// 用例
// toCamelCase('user_info') → 'userInfo'
// toCamelCase('user-info') → 'userInfo'
// toCamelCase('UserInfo') → 'userInfo'

• 转PascalCase（大驼峰）：所有单词首字母大写，直接拼接

function toPascalCase(str) {
  const words = splitIntoWords(str);
  return words
    .map(word => word[0].toUpperCase() + word.slice(1))
    .join('');
}

// 用例
// toPascalCase('user_info') → 'UserInfo'
// toPascalCase('user-info') → 'UserInfo'
// toPascalCase('userInfo') → 'UserInfo'

• 转snake_case：所有单词小写，用下划线连接

function toSnakeCase(str) {
  return splitIntoWords(str).join('_');
}

// 用例
// toSnakeCase('userInfo') → 'user_info'
// toSnakeCase('UserInfo') → 'user_info'
// toSnakeCase('user-info') → 'user_info'

• 转kebab-case：所有单词小写，用短横线连接

function toKebabCase(str) {
  return splitIntoWords(str).join('-');
}

// 用例
// toKebabCase('userInfo') → 'user-info'
// toKebabCase('UserInfo') → 'user-info'
// toKebabCase('user_info') → 'user-info'

以上实现可以覆盖绝大多数前端开发场景，如果需要支持更特殊的命名（比如带连续数字、缩写专有名词固定大写），只需要调整splitIntoWords里的拆分规则即可，不需要修改各个转换函数的逻辑。

内容的提问来源于stack exchange，提问作者Marek Lisiecki