1
/**
2
 * @desc 驼峰 => 下划线
3
 * @param {String} HumpStr
4
 * @returns 下划线命名
5
 */
6
const HumpToline = (HumpStr) => {
7
  // (?<=.) 兼容大驼峰的情况
8
  return HumpStr.replace(/(?<=.)([A-Z])/g, "_$1").toLowerCase();
9
};

1
/**
2
 * @desc 下划线 => 驼峰
3
 * @param {String} LineStr
4
 * @returns 驼峰命名
5
 */
6
const LineToHump = (LineStr) => {
7
  return LineStr.replace(/\_(\w)/g, (all, letter) => letter.toUpperCase());
8
};

1
/**
2
 * 数据对象key 驼峰下划线互相转化
3
 * @param {Object} data 需要转换的对象
4
 * @param {String} type hump-转驼峰 toLine-转下划线
5
 */
6
const HumpLineTransfer = (data, type = 'hump') => {
7
  let hump = '';
8
  // 处理对象中的每个key
9
  const TransferKey = (data) => {
10
    if (data instanceof Array) {
11
      data.forEach(item => TransferKey(item));
12
    } else if (data instanceof Object) {
13
      for (const key in data) {
14
        hump = type === 'hump' ? LineToHump(key) : HumpToLine(key);
15
        data[hump] = data[key];
16
        if (key !== hump) {
17
          delete data[key];
18
        }
19
        if (data[hump] instanceof Object) {
20
          HumpLineTransfer(data[hump]);
21
        }
22
      }
23
    } else if (typeof data === 'string') {
24
      data = type === 'hump' ? LineToHump(data) : HumpToLine(data);
25
    }
26
  };
27
  TransferKey(data);
28
  return data;
29
};

1
/**
2
 * css属性名 转 驼峰
3
 * @param {string} propertyName
4
 */
5
const toHump = (propertyName) => {
6
  if (propertyName[0] === '-') {
7
    // 忽略开头的'-'
8
    propertyName = propertyName.substring(1, propertyName.length);
9
  }
10
  return propertyName.replace(/-(\w)/g, (all, letter) => letter.toUpperCase());
11
};
12
console.log(toHump('-webkit-line-clamp')); // webkitLineClamp
13
console.log(toHump('font-size')); // fontSize

1
/**
2
 * 驼峰 转 Css属性名
3
 * @param {string} sName
4
 */
5
const toPropertyName = (sName) => {
6
  return sName.replace(/([A-Z])/g, "-$1").toLowerCase();
7
};
8
console.log(toHump('webkitLineClamp')); // -webkit-line-clamp
9
console.log(toHump('fontSize')); // font-size