前言

在解决这个问题之前，我们需要先了解什么是驼峰命名？什么是烤串命名？

驼峰命名：

一个诸如userInfoData命名格式的变量名我给它称作驼峰命名，有点类似于骆驼的背部。

而驼峰又分为大驼峰和小驼峰。

大驼峰的格式是这样：UserInfoData，即首字母大写。

小驼峰的格式是这样：userInfoData，即首字母小写。

烤串命名：

一个诸如user-info-data命名格式的变量名我给它称作烤串命名，用一根竹签将两个单词穿插起来。

而烤串又分为中烤串和下烤串。

中烤串的格式是这样：user-info-data，即使用-分割。

下烤串的格式是这样：user_info_data，即使用_分割。

实现需求

当前的具体需求是封装一个公共方法，这个方法最终返回一个转换后的字符串，支持自定义分隔符，支持驼峰=>烤串，也支持烤串=>驼峰，烤串转驼峰时支持转大驼峰和小驼峰。

骨架实现

首先我们定义一个方法TransformVar，接收四个参数：

stringstr：源字符串
stringsplit：自定义分隔符
booleanreverse：是否驼峰转烤串
booleanfirstUp：是否转大驼峰

最终返回一个字符串。

const TransformVar = (str="",split="_",reverse=false,firstUp=false) => {
    return "";
}

烤串转驼峰

既然有了reverse这个参数，我们就来根据这个参数来做判断该怎样实现对应的功能。

// ...
// 烤串转驼峰
if(!reverse){
    // 将源字符串通过分隔符转为数组
    const strArr = str.split(split);
    // 通过数组的map方法来处理每一个单词的大小写
    const newArr = strArr.map((field,index) => {
      // 大驼峰的话，所有首字母都大写 
      if(firstUp) return `${field.charAt(0).toUpperCase()}${field.slice(1)}`;
      // 小驼峰的话除了第一个单词之外，其他单词的首字母都大写
      return `${index > 0 ? field.charAt(0).toUpperCase() : field.charAt(0)}${field.slice(1)}`;
    } );
    return newArr.join("");
}

驼峰转烤串

上述代码在if中已经写有return了，后面的代码主要来处理驼峰转烤串，不需要再写else了。

// ...
// 驼峰转烤串
// 通过正则拿到每个单词所组成的数组
const strArr = str.match(/[a-zA-Z][a-z]+/g) || [];
// 通过数组的map方法将所有的单词都转为小写
const newArr = strArr.map((str) => str.toLowerCase());
// 最后通过数组的join方法使用自定义分隔符将数组转为字符串
return newArr.join(split);

最后分享一下完整代码

/**
 * @title 分隔符转驼峰
 * @example user_name_age => userNameAge TransformVar("user_name_age","_",false,false)
 * @example user_name_age => UserNameAge TransformVar("user_name_age","_",false,true)
 * @example userNameAge => user_name_age TransformVar("userNameAge","_",true)
 * @param {string} str 源字符串
 * @param {string} split 分隔符
 * @param {boolean=false} reverse 是否驼峰转烤串(忽略第四个参数，首字母一定小写)
 * @param {boolean=false} firstUp 首字母是否大写
 * @return {string} 转换之后的字符串
 * */
export const TransformVar = (str:string="",split:string = "_",reverse:boolean = false,firstUp:boolean = false) => {
  // 烤串转驼峰
  if(!reverse) {
    const strArr = str.split(split);
    const newArr = strArr.map((field,index) => {
      if(firstUp) return `${field.charAt(0).toUpperCase()}${field.slice(1)}`;
      return `${index > 0 ? field.charAt(0).toUpperCase() : field.charAt(0)}${field.slice(1)}`;
    } );
    return newArr.join("");
  }
  // 驼峰转烤串
  const strArr = str.match(/[a-zA-Z][a-z]+/g) || [];
  const newArr = strArr.map((str) => str.toLowerCase());
  return newArr.join(split);
}

结语

这也是今天突然来了灵感，需要实现这么一个公共方法，如果各位看官觉得哪里还能优化，记得评论我来更新。小生不才，如有误导，请多指教！！！本文正在参加「金石计划」

JS中驼峰与烤串互转

前言

实现需求

骨架实现

烤串转驼峰

驼峰转烤串

最后分享一下完整代码

结语