Topwo博客-JS驼峰属性和下划线属性互转

您现在的位置是：Topwo博客>>JavaScript文章

JS驼峰属性和下划线属性互转

发布时间：2021-11-09作者：Topwo来源：原创点击：462

> 最近在写node端，遇到数据库直接返回数据带下划线的情况
> 需要把下划线属性换成驼峰属性
> 入库时驼峰属性需要换成下划线属性

## 1. 字符串，将下划线替换为小驼峰
### 方法1:
```javascript
const strUnderlineToSmallCamel = (val, char = '_') => {
    const arr = val.split('');
    const index = arr.indexOf(char);
    arr.splice(index, 2, arr[index+1].toUpperCase());
    val = arr.join('');
    return val;
}
console.log(strUnderlineToSmallCamel('test_prop')); // testProp
```
* 当然其中的_可以换成任意字符，只要在方法的第二个参数传入就可以了

### 方法2（推荐）之写法1:
```javascript
/**
 * 下划线转小驼峰
 */
function strUnderlineToSmallCamel(val){
    return val.replace(/_([a-z])/g, function(all, letter){
        return letter.toUpperCase();
    });
}
```
### 方法2（推荐）之写法2:
```javascript
// 下划线转换驼峰
function strUnderlineToSmallCamel(val) {
    return val.replace(/\_(\w)/g, function(all, letter){
        return letter.toUpperCase();
    });
}
```

## 2. 字符串，将驼峰替换为下划线
### 方法1（驼峰切割大法）之循环大法:
```javascript
/**
 * 切割驼峰
 * @param {string} val
 * @return {string[]}
 */
function splitCamel(val){
    var res = [];
    for(var i in val){
        var asc = val.charAt(i).charCodeAt();
        if(asc >= 65 && asc <= 90){
            res.push(' ');
            res.push(String.fromCharCode(asc + 32));
        }
        else{
            res.push(val.charAt(i));
        }
    }
    return res.join('').trim().split(' ');
}
```
### 方法1（驼峰切割大法）之函数式编程:
```javascript
function splitCamel(val){
    return val.split('').map(function(c){
        var asc = c.charCodeAt();
        return asc >= 65 && asc <= 90 ? ' ' + String.fromCharCode(asc+32) : c;
    }).join('').trim().split(' ');
}
```
除了循环大法外, 我们还可以使用正则表达式来实现, 下面有请我们的主角 replace 登场~

### 方法2（推荐）之写法1:
```javascript
/**
 * 将驼峰转为下划线
 */
function strCamelToUnderline(val){
    return val.replace(/[A-Z]/g, function(letter){
        return ' ' + letter.toLowerCase();
    }).trim().replaceAll(' ','_');
}
```
### 方法2（推荐）之写法2:
```javascript
// 驼峰转换下划线
function strCamelToUnderline(val) {
    return val.replace(/([A-Z])/g, "_$1").toLowerCase();
}
```
## 3. 对象，替换下划线属性为小驼峰属性
```javascript
const objUnderlineToSmallCamel = (objSrc, char = '_') => {
    const objDest = {...objSrc};
    const arr = Object.keys(objDest).filter(item => item.indexOf(char) !== -1);
    arr.forEach(item => {
        objDest[strUnderlineToSmallCamel(item)] = objDest[item];
        delete objDest[item];
    })
    return objDest;
}
```
## 4. 对象，替换驼峰属性为下划线属性
```javascript
const objCamelToUnderline = (objSrc) => {
    const objDest = {...objSrc};
    const arr = Object.keys(objDest).filter(item => item.search(/([A-Z])/g) !== -1);
    arr.forEach(item => {
        objDest[strCamelToUnderline(item)] = objDest[item];
        delete objDest[item];
    })
    return objDest;
}
```

上一篇：华氏温度和摄氏温度互转

下一篇：js正则判断一个字符串里必须包含大写字母，小写字母，数字，特殊字符