整理前端面试题(三):驼峰命名法和短横线命名法的转换

近年来由于Vue和Angular等优秀框架的普及, 在框架的使用中常会进行自定义属性名的命名规则的转换.也就是驼峰命名法(camelCase)和短横线命名法(kebab-case)的转换.所以, 在最近的面试题中, 考查两个命名法的转换的面试题时常出现. 下图是Vue.js的官方文档中命名规则的转换的应用场景.

Vue的官方文档

面试题1

将骆驼命名规则的字符串转换成使用短横线命名法的字符串, 并且全小写 .例如: 'getElementById' => 'get-element-by-id'

方法1:采用数组的方法

function getKebabCase ( str ) {
 var arr = str.split('');
    str = arr.map(function ( item ){
        if( item.toUpperCase() === item ){
            return '-' + item.toLowerCase();
        }else{
            return item;
        }
    }).join( '' );
    return str;
}
console.log( getKebabCase( 'getElementById' ) ); //get-element-by-id

方法2:采用正则表达式

function getKebabCase( str ) {
    return str.replace( /[A-Z]/g, function( i ) {
        return '-' + i.toLowerCase();
    })
}
console.log( getKebabCase( 'getElementById' ) ); //get-element-by-id

面试题2

将短横线命名法的字符串转换成使用骆驼命名规则的字符串, 并且全小写 .例如: 'get-element-by-id' => 'getElementById'

方法1:采用数组的方法

function getCamelCase( str ) {
    var arr = str.split( '-' );
    return arr.map( function( item, index ) {
        if( index === 0 ){
            return item;
        }else{
            return item.charAt(0).toUpperCase() + item.slice( 1 );
        }
    }).join('');
}
console.log( getCamelCase( 'get-element-by-id' ) ); //getElementById

方法2:采用正则表达式

function getCamelCase( str ) {
    return str.replace( /-([a-z])/g, function( all, i ){
        return i.toUpperCase();
    } )
}
console.log( getCamelCase( 'get-element-by-id' ) ); //getElementById

---

进阶版: 考虑缓存和闭包,依次提高性能和减少污染

进阶版getKebabCase()

var getKebabCase = (function() {
    var cache = {};
    return function ( str ) {
        var ret = cache[ str ];
        if( ret ) {
            return ret;
        }else{
            return cache[ str ] = str.replace( /[A-Z]/g, function( i ){
                return '-' + i.toLowerCase();
            })
        }
    } 
})();
console.log( getKebabCase( 'getElementById' ) );

进阶版getCamelCase()

var getCamelCase = (function() {
    var cache = {};
    return function ( str ) {
        if( cache[ str ] ) {
            return cache[ str ];
        }else{
            return cache[ str ] = str.replace( /-([a-z])/g, function( all, i ) {
                return i.toUpperCase();
            })
        }
    }
})()
console.log( getCamelCase( 'get-element-by-id' ) );

完